@charset "UTF-8";
@font-face {
    font-family: 'worms';
    src: url('w3d.ttf');
    font-weight: normal;
    font-style: normal;
}

:root{
	--hilit: #0026ff;
	--textHilit: #f690ff;
	--textNormal: #ffffff;
	--textLink: #f690ff;
	--trans: #00000052;
  --borderColor: #000;
	--background-purple: #350A47;
  --simpsons: #F1C40F;
}

#output{
  text-align: center;
  text-transform:uppercase;
  color:#ffffff;
  font-size:3em;
  font-weight:bold;
  text-shadow:0.08em 0.08em #000000;
  font-family: worms;
}

*{
  line-height: 1.5;
  box-sizing: border-box;
}
img {
  display: block;
  margin: auto;
  width: 50%;
  justify-content: center
}
body{
  background-color: var(--background-purple);
  color: #f1f5f9;
  font-family: Arial;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.m_title{
  text-align: center;
	text-wrap: balance;
  font-size: 200%;
  font-family: worms;
}
.m_text{
  text-align: center;
	text-wrap: balance;
  font-size: 175%;
  font-family: monospace;
}
p{
  text-align: center;
	text-wrap: balance;
}
p:first-child{
	margin: 0;
}
p:last-child{
	margin: 0;
}
summary{
	cursor: pointer;
}
ul:first-child{
	margin: 0;
}
ul:last-child{
	margin: 0;
}
.content-wrapper{
	display: grid;
	grid-template-areas: ". content .";
	grid-template-columns: 1fr minmax(0, 80rem) 1fr;
}
.container {
  min-height: 100vh;
  position: sticky;
  left: 50%;
  transform: translate(-50%);
  max-width: 70vw;
  min-width: 50vw;
  background-color: var(--trans);
}
.content{
	grid-area: content;
}
.anchor{
	color: var(--textNormal);
  text-decoration: none;
}

.anchor:hover{
  text-decoration: none;
	color: var(--textHilit);
	cursor: pointer;
  text-shadow: -2px -2px 0 var(--hilit),
  2px -2px 0 var(--hilit),
  -2px 2px 0 var(--hilit),
  2px 2px 0 var(--hilit);
  cursor: pointer;
}
.details{
	margin: 1rem 0;
	padding: 1rem;
	text-wrap: balance;
  font-size: 175%;
  font-family: monospace;
	border: 2px solid var(--borderColor);
  position: relative;
}
.details li{
  text-align: center;
  list-style-type: none;
}

.details summary {
  cursor: pointer;
  user-select: none;
}

summary:hover{
  text-decoration: none;
	color: var(--textHilit);
	cursor: pointer;
  text-shadow: -2px -2px 0 var(--hilit),
  2px -2px 0 var(--hilit),
  -2px 2px 0 var(--hilit),
  2px 2px 0 var(--hilit);
  cursor: pointer;
}
.footer{
	padding: 1rem;

	border-top: 2px solid var(--borderColor);
	text-align: center;
}
.copyright {
	text-align: center;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
  font-size: 95%;
}

@media (max-width: 600px) {
  .m_title {
    font-size: 1.5rem;
  }

  .m_text,
  .details {
    font-size: 1rem;
    padding: 1rem;
  }

  img {
    width: 100%;
  }

.container {
  max-width: 100%;
  margin: 1rem;
  padding: 1rem;
  background-color: var(--trans);
  border-radius: 1rem;

  position:unset;
  top: unset;
  left: unset;
  transform: unset;
  max-width: unset;
  min-height: unset;
  background-color: var(--trans);
}

  .content-wrapper {
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }
}