@import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap');

@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

body, #about, #story, #related, #pic img { animation: fadein ease .3s; animation-iteration-count: 1; animation-fill-mode: forwards; }

body {
  animation: fadein ease 1s;
  background-color: black;
  background-image: url("paper dark.png"); background-repeat: no-repeat; background-size: auto 100vh;
  margin: 0;
  font-family: 'Tilt Neon', sans-serif;
  cursor: url("violin.png"), auto;
}

a { color: orange; }

header { width: 100vw; height: 10vh; display: flex; align-items: center; background-color: #ffecdc; background-image: url('paper light.png'); color: #c6a668; }
header blockquote { margin: 5px 0 5px 3em; width: 20em; border: #c6a668 solid 6px; border-left: double 12px;  display: flex; }
#home { position: absolute; right: 3em; top: 1vh; width: 12vh; text-align: center; color: #c6a668; transition: 0.2s; font-weight: bold; text-decoration: none; }
#home:hover { right: 3.5em; }
header div { border-right: #c6a668 solid 6px; font-size: 2em; width: 80%; display: flex; justify-content: center; align-items: center; }
header p { margin: 3px; }
header img { width: 2.5em; margin: auto; }

body > main { display: flex; align-items: center; justify-content: center; height: 90vh; width: 95vw; margin: auto; }
#panel { width: 10em; height: 80%; background-color: #d88414; display: flex; justify-content: center; align-items: center; flex-direction: column;
gap: 10px; }
#info { width: 50em; height: 80%; color: white; text-align: center; }
#gal { width: 40em; height: 80%; background-color: #d88414; display: flex; justify-content: center; align-items: center; flex-direction: column; }

#panel img { width: 70%; }

h2 { height: 10%; margin: 0; }
#info main { overflow-y: auto; height: 90%; width: 100%; margin: auto; scrollbar-color: transparent transparent; }
#about, #story { display: none; flex-direction: column; justify-content: center; align-items: center; width: 80%; margin: auto; }
#related { display: none; width: 80%; margin: auto; flex-direction: column; }
#related img { height: 8em; margin: 1em; }
#related div { display: flex; width: 100%; margin: 1em 0; }
#related p { overflow-y: auto; height: 8em; }

#pic { width: 28em; height: 80%; margin: 2em; display: flex; justify-content: center; }
#pic img { margin: auto; max-height: 60vh; max-width: 100%; display: none; }
#gal p { margin: 7px; text-align: right; user-select: none; }

footer { height: 73px; width: 100%; position: absolute; top: 10vh; background-image: url("floaty.gif"); z-index: -1; }

@media only screen and (max-width: 875px) {
  body > main { flex-direction: column-reverse; height: initial; padding-top: 2em; }
  #panel { display: none; }
  #info, #gal { width: 100%; }
  #pic { width: 75%; height: initial; }
  h2 { margin: 1em 0; }
  #home { position: static; display: block; margin: auto; padding-bottom: 1em; }
  #home:hover { color: white; }
  header blockquote { height: 5vh; min-width: 60%; margin: auto; }
  header div { font-size: 1.5em; }
  header img { width: 2em; }
}

@media only screen and (max-width: 990px) {
  #panel { display: none; }
}