:root {
  --red: #f21d1b;
  --orange: #fb9704;
  --yellow: #fffc31;
  --green: #60ac4c;
  --blue: #4191fb;
  --purple: #a86efb;
}
html{
  background-color: black;
  background-image: url("/styles/bgs/stars.gif");
  background-size: 200px;
  background-attachment: fixed;
  color: var(--blue);
  font-family: sans-serif;
}
h1{color: var(--blue);}
h2{color: var(--green); margin: -3px;}
img{border-radius: 5px;}
a{
  color: var(--green);
  text-decoration: none;
}
a:hover{
  color: var(--yellow);
  text-decoration: underline;
  text-shadow: 0 0 5px var(--yellow);
}

#content{
  width: 850px;
  margin: auto;
  padding: 20px;
}

#header{margin-bottom: 10px;}

.row{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px;
  width: 100%;
}
.row img{
  align-self: center;
}

.box{
  background: black;
  padding: 20px;
  border-radius: 50px 5px;
  border: solid thick var(--color);
  filter: drop-shadow(0px 0px 5px var(--color));
  box-shadow: var(--color) 0px 0px 5px inset;
  animation: flash 10s infinite linear;
}

#whatIs{
  --color: var(--yellow);
  width: 500px;
  height: 360px; 
  overflow-y: scroll;
}
#characters, #photos{
  --color: var(--green);
  width: 840px;
}
#characters{height: 570px; }
#charFlex, #photoFlex{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.character{
  width: 180px;
  height: 230px;
  text-align: center;
}
.character p{margin: 0;}
.arthur{--charColor: var(--red);}
.ford{--charColor: var(--blue);}
.trillian{--charColor: var(--yellow);}
.zaphod{--charColor: var(--purple);}
.marvin{--charColor: var(--orange);}
.arthur, .trillian, .marvin{--rotateAngle: 7deg;}
.ford, .zaphod{--rotateAngle: -7deg;}
.character img{
  height: 150px;
  filter: drop-shadow(0px 0px 10px var(--charColor));
  border: solid medium var(--charColor);
  transition: .5s;
  }
.character img:hover{transform: scale(1.2) rotate(var(--rotateAngle));}

#interpretations{
  width: 330px;
  height: 330px;
  --color: var(--yellow);
  overflow-y: scroll;
}

#interpretations .year{
  font-weight: bold;
  color: var(--green);
  }

#misc{
  width: 400px;
  height: 330px;
  --color: var(--blue);
  overflow-y: scroll;
}

#misc span{
  color: var(--charColor);
  font-weight: bold;
  text-shadow: 0 0 5px var(--charColor);
}

#photoFlex img:nth-child(6n-5){--color: var(--red);}
#photoFlex img:nth-child(6n-4){--color: var(--orange);}
#photoFlex img:nth-child(6n-3){--color: var(--yellow);}
#photoFlex img:nth-child(6n-2){--color: var(--green);}
#photoFlex img:nth-child(6n-1){--color: var(--blue);}
#photoFlex img:nth-child(6n){--color: var(--purple);}

#photoFlex img:nth-child(2n){--rotateAngle: 3deg;}
#photoFlex img:nth-child(2n-1){--rotateAngle: -3deg;}


#photos{width: 800px;}
#photoFlex{gap: 20px;}
#photoFlex img{
  height: 170px;
  filter: drop-shadow(0px 0px 5px var(--color));
  border: solid medium var(--color);
  transition: .75s;
}

#photoFlex img:hover{transform: scale(1.3) rotate(var(--rotateAngle)); z-index: 900; filter: drop-shadow(0px 0px 10px var(--color));}

@keyframes flash{
  0%{filter: drop-shadow(0px 0px 5px var(--color));}
  50% {filter: drop-shadow(0px 0px 2px var(--color));}
  100%{filter: drop-shadow(0px 0px 5px var(--color));}
}