html, body {
  /* background-color: #434340; */
  background-color: #fffffa;
  margin: 0;
  padding: 0;
  /* font-size: min(2vw,2vh); */
  /* font-size: 1vmax; */
  font-family: monospace;
  height: 100%;
}

body.dark {
  background-color: #434340;
}

#main.locked {
  display: none;
  /* filter: blur(20px); */
  /* z-index: -1 !important; */
  /* filter: contrast(0); */
}

#main {
  width: 100%; /* something like 3 across */
  box-sizing: border-box;
  height: 100%;
  /* min-height: 100vh; */
  padding: 1rem;
  margin: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 2rem;
}

#dark {
  background-color: transparent;
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: 32px;
  width: 32px;
  border: none;
}

#unlock {
  display: none;
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);

  border: 5px solid black;
  background-color: red;
}

#unlock.unauthd {
  display: initial;
}

#unlock input {
  padding: 1rem;
  font-size: 24px;
  font-family: monospace;
}

body.dark #dark {
  filter: invert(100%);
}

#main > div {
  /* background-color: #444; */
  box-sizing: border-box;
}

#main > .margina {
  /* height: 4em; */
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  gap: 2rem;
}

/* unused */
/* div.margina button { */
/*   background-color: #fff; */
/*   width: 4em; */
/*   height: 4em; */

/*   border: 2px solid black; */
/*   box-shadow: 2px 2px black; */
/* } */

div.margina > div {
  display: block;
  padding: 2rem;
  margin: 0;

  background-color: #444;
  border: 1px dotted gray;
}

div.margina > div > * {
  display: block;
  padding: 1rem;
  margin: 0;

  background-color: #fff;
  border: 2px solid black;
}

#hello {
  font: 1rem monospace;
}

#details {
  flex-grow: 1;
  min-width: 20rem;
  text-align: center;
  font: 1rem monospace;
}

/* BUTTONS */
#buttons {
  /* width: 100%; */
  /* padding: 2rem; */
  /* border: 1px dotted gray; */
  /* background-color: #444; */

  display: flex;
  align-content: center;
  align-items: center;
}

@media (orientation: landscape) {
  #buttons {
    /* width: 90vw; */
    flex-direction: row;
    justify-content: space-evenly;
    gap: 7.5vw;
  }

  #buttons button {
    width: 15vw;
    height: 15vw;
    /* width: 12rem; */
    /* height: 12rem; */
  }
}

@media (orientation: portrait) {
  #buttons {
    /* height: 100%; */
    flex-direction: column;
    justify-content: space-evenly;
    gap: 6vh;
  }

  #buttons button {
    width: min(12rem,15vh);
    height: min(12rem,15vh);
  }
}

#buttons button {
  /* background-color: #ddf; */
  /* background-color: #aaa; */

  padding: 1.5vmax;
  border-radius: 10%;
  border: .4vmax solid black;
  box-shadow: .5vmax .5vmax #001;
}

#buttons button:active, #buttons button:active.loading, #buttons button:active.playing {
  position: relative;
  top: .4vmax;
  left: .4vmax;
  box-shadow: .1vmax .1vmax #001;
}

#buttons button.loading, #buttons button.playing {
  position: relative;
  top: .3vmax;
  left: .3vmax;
  box-shadow: .2vmax .2vmax #001;
}

#buttons button.loading {
  /* background-color: #f77; */
  /* border: 2px solid #f77; */
}

#buttons button.loading {
  /* fill: white; */
  /* background-color: #fdd; */
  /* color: red; */
}

#buttons button.playing {
  /* background-color: #aaf; */
  /* filter: contrast(2); */
}

#buttons button.playing svg {
  /* filter: invert(100%); */
}

#buttons button.playing {
  /* background-color: #dfd; */
  /* color: green; */
}

#magic {
  /* background-color #eef; */
}

/* #magic.playing { */
/*   filter: saturate(5); */
/* } */

#magic {
  background-color: #d0d0ff;
}

#magic.playing, #magic.loading {
  background-color: #7070ff;
}

#films {
  background-color: #ffc0c0;
}

#films.playing, #films.loading {
  background-color: #ff6040;
}

#songs {
  background-color: #ffffc0;
}

#songs.playing, #songs.loading {
  background-color: #ffff70;
}

#tv {
  background-color: #d0ffd0;
}

#tv.playing, #tv.loading {
  background-color: #30e030;
}


@keyframes jiggle {
  25% {
    /* transform: rotate(-3deg); */
    transform: translateY(-0.5rem);
  }

  75% {
    /* transform: rotate(3deg); */
    transform: translateY(0.5rem);
  }
}