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

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

#wip { position: fixed; left: 2em; bottom: 2em; width: 6em; z-index: 10; }

a { color: red; font-weight: bold; text-decoration: none; transition: 0.8s; }
a:hover { color: white; }

body {
   background-color: black;
   
   animation: fadein ease .5s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
   
   font-family: 'Syne Mono', sans-serif;
   color: white;
   
   overflow: hidden;
   text-align: center;
}

article {
    display: flex;
    justify-content: center;
}

#blinkies { max-width: 150px; position: absolute; top: 0; right: 5px; }
#nav { max-width: 150px; position: absolute; top: 3px; left: 20px; }
#dropdown { background-color: red; animation: highlight ease 0.3s; animation-delay: 1s; width: 4em; height: 1.5em; overflow: hidden; }
@keyframes highlight { 
  0% { transform: rotate(10deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(none); }
}
#dropdown p { display: none; }
#dropdown:hover { height: 4em; transition: height 0.5s; transition-timing-function: cubic-bezier(0.3, 1.5, 0.1, 0.3); }
#dropdown:hover p { display: initial; position: static; }
#dropdown:hover p:hover { color: black; }

h3 {
    margin-bottom: 2em;
}

h1 {
  margin: 0;
}

header {
  padding: .7em; 
  color: black;
}

#wrapper {
  display: flex;
  flex-direction: row;
  margin-top: 2em;
  height: 75vh;
  scrollbar-color: red transparent;
}

#left {
    width: 45vw;
    overflow: auto;
    text-align: center;
}

#albumce {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    gap: 2em;
}

.doll { position: fixed; right: 1em; bottom: 0; z-index: 10; }

#right {
    width: 55vw; 
    overflow-y: auto;
    overflow-x: hidden;
}

#right img {
  width: 18em; 
}

#note {
  position: fixed; left: 2.5em; top: 10em;
  width: 5em; text-align: center;
}

.albumstack {
     gap: 3em;
     display: flex;
     flex-direction: column;
}

.albumstack > img {
    max-width: 9em;
}

.yapomatic {
    border-radius: 8px;
    margin: 0 2em 0 2em;
    display: none;
}

.main { text-align: center; padding: 2em; }

#pablo { border: 8px #D6A729 double; }
#pablo > header { background-color: #D6A729; }

#bends { border: 8px #6B0011 double; }
#bends > header { background-color: #6B0011; }

#ok { border: 8px #00BCE8 double; }
#ok > header { background-color: #00BCE8; }

#kida { border: 8px #567091 double; }
#kida > header { background-color: #567091;  }

#amnesiac { border: 8px #D60000 double; }
#amnesiac > header { background-color: #D60000; }

#httt { border: 8px #FF7F27 double; }
#httt > header { background-color: #FF7F27; }

#rainbows { border: 8px #A349A4 double; }
#rainbows > header { background-color: #A349A4; }

#tkol { border: 8px #6C8139 double; }
#tkol > header { background-color: #6C8139; }

#amsp { border: 8px #C3C3C3 double; }
#amsp > header { background-color: #C3C3C3; }

@media only screen and (max-width: 1275px) {
  body { display: flex; flex-direction: column; }
  #note, .doll { display: none; }
}

@media only screen and (max-width: 860px) {
    #right img { width: 13em; }
}

@media only screen and (max-width: 770px) {
  body { overflow: auto; }
  #wrapper { flex-direction: column; height: initial;  }
  #left { width: initial; height: 15em; margin-top: 90px; border-bottom: 6px double red; border-top: 6px double red; }
  #right { width: initial; margin-top: 10px; }
  #note { display: block; position: absolute; top: 100px; right: 5px; left: initial; width: 10em; }
  #nav { top: 90px; left: 5px; }
  #blinkies { position: static; margin: 10px auto auto auto; }
}