@font-face {
  font-family: andy;
  src: url(andy.ttf);
}

* {
  box-sizing: border-box;
  outline: none;
  padding: 0;
  border: 0;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-image: url(../images/static.gif);
  background-color: black;
  user-select: none;
  /* cursor: none; */
  color: white;
}

body[off] {
  background-image: none;
}

.vjs-hidden,
.vjs-control-bar,
.vjs-loading-spinner,
.vjs-big-play-button,
body[off] calendar,
body[off="true"] about {
  display: none;
}

[cloak] {
  visibility: hidden !important;
}

about,
screen,
.video-js,
.video-js video {
  height: 100%;
  width: 100%;
}

screen {
  transform: translate(-50%, -50%);
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
}

.video-js video {
  transform: scale(1.04);
  object-fit: cover;
}

.video-js[paused="false"] {
  background: black;
}

.video-js[paused="true"] {
  opacity: 0.5;
}

.video-js[scale="true"] video {
  transform: scale(1.6);
}

guide {
  display: grid;
  grid-template-rows: 77vh 23vh;
  height: 100vh;
}

calendar {
  -webkit-text-stroke: 1px black;
  padding: 1rem 10rem;
  text-align: right;
  font-size: 5rem;
  user-select: none;
  letter-spacing: 4px;
}

topic {
  padding: 15px 50px 40px 285px;
  background-color: rgba(0, 0, 0, 0.4);
  background-repeat: no-repeat;
  background-position: 50px 15px;
  background-size: 216px;
  font-size: 3rem;
  display: none;
}

volume {
  display: grid;
  position: fixed;
  align-content: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  color: white;
  opacity: 0.6;
  font-size: 12rem;
  font-weight: 900;
  -webkit-text-stroke: 5px black;
}

calendar,
volume {
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black,
    1px 1px 0 black;
}

calendar[jukebox="true"]:after {
  content: "♬";
  font-size: 1.2em;
  color: lightyellow;
  position: absolute;
  right: 5%;
}

about {
  position: absolute;
  top: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 30% 30% 40%;
  justify-items: center;
  align-items: center;
  align-content: center;
  display: none;
  animation: fadeIn ease 0.5s;
}
about[show="true"] {
  display: grid;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
}

about label {
  font-family: andy;
  font-size: 8rem;
  text-shadow: -3px -3px 0 rgb(8, 6, 3), 3px -3px 0 orange, -3px 3px 0 orange,
    3px 3px 0 orange;
}
about label span {
  color: #e4dd14;
}

about p {
  font-size: 3rem;
  text-align: center;
}

about flags {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  justify-items: center;
}

about img {
  height: 60px;
  width: auto;
}

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

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
  topic {
    padding: 25px 0 40px 135px;
    background-position: 1%;
    background-size: 120px;
    font-size: 1.6rem;
  }
  calendar {
    padding: 1rem 1rem;
    font-size: 3rem;
  }
  calendar[jukebox="true"]:after {
    right: 0;
    top: 12%;
    font-size: 0.6em;
  }
  about label {
    font-size: 6rem;
  }
  about img {
    height: 50px;
  }
}

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  topic {
    padding: 5px 0 5px 130px;
    background-position: 1% 5%;
    background-size: 120px;
    font-size: 1.6rem;
  }
  calendar {
    padding: 1rem 1rem;
    font-size: 3rem;
  }
  calendar[jukebox="true"]:after {
    right: 0;
    top: 6%;
    font-size: 0.6em;
  }
  about label {
    font-size: 5rem;
  }
  about flags {
    display: block;
    text-align: center;
    width: 100%;
  }
  about p {
    font-size: 1.6rem;
  }
  guide {
    grid-template-rows: 80vh 20vh;
  }
}