@charset "UTF-8";

@font-face {
  font-family: "teletext";
  src: url(../fonts/MODE7GX0.TTF);
}

/* html {
  cursor : none;
} */

/* * {
  cursor: none;
  user-select: none;
} */
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100svh;
  background-color: black;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  flex-direction: column;
}

#overlay.is-off {
  display: none;
}

#overlayVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: width 0.9s ease, height 0.9s ease;
}

#initialText {
  font-family: teletext;
  font-size: 60px;
  color: red;
  text-align: center;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 3s ease-in-out;
}

#initialText:hover {
  cursor: pointer;
  transition: text-shadow 0.2s ease-in-out;
  text-shadow: 0 0 40px rgb(0, 251, 238);
}

.button {
  position: fixed;
  z-index: 300;
  height: 40px;
  width: 75px;
  font-family: teletext;
  font-size: 30px;
  color: blue;
  text-align: center;
  background-color: rgb(0, 251, 238);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 10px 0 rgb(0, 251, 238);
  border-radius: 7px;
  transform-origin: center;
  transition: transform 0.9s ease;
}

.switch-0 .button {
  display: none;
}

#button1 {
  right: 14px;
  top: 14px;
}

#button2 {
  left: 14px;
  bottom: 14px;
}

#button1:hover,
#button2:hover {
  box-shadow: 0 0 30px 0 blue;
  cursor: pointer;
}

.switch-14 #button1 {
  display: none;
  transform-origin: center;
  transition: transform 0.2s ease-in-out;
}
.switch-1 #button2 {
  display: none;
  transform-origin: center;
  transition: transform 0.2s ease-in-out;
}

#videoBG {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

#video-container {
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* background-color: black; */
}

.entry-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100dvmin;
  height: 100dvmin;
  transform: translate3d(-50%, -50%, 0) scale(0);
  transform-origin: center;
  transition: transform 0.9s ease;
}
.video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.video:hover {
  cursor: pointer;
}

.entry-video1 {
  display: block;
  width: 60%;
  height: auto;
  transform: translate3d(-50%, -50%, 0) scale(0.9);
}

.switch-0 .entry-video1 {
  transform: translate3d(-50%, -50%, 0) scale(2);
}
.switch-2 .entry-video2 {
  transform: translate3d(-50%, -50%, 0) scale(0.5);
}

.switch-3 .entry-video2 {
  transform: translate3d(-50%, -50%, 0) scale(0.85);
}
.switch-3 .entry-video3 {
  transform: translate3d(-50%, -50%, 0) scale(0.5);
}

.switch-4 .entry-video2 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-4 .entry-video3 {
  transform: translate3d(-50%, -50%, 0) scale(0.75);
}
.switch-4 .entry-video4 {
  transform: translate3d(-50%, -50%, 0) scale(0.5);
}

.switch-5 .entry-video2 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-5 .entry-video3 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-5 .entry-video4 {
  transform: translate3d(-50%, -50%, 0) scale(0.75);
}

.switch-5 .entry-video5 {
  transform: translate3d(-50%, -50%, 0) scale(0.5);
}

.switch-6 .entry-video2 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-6 .entry-video3 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-6 .entry-video4 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-6 .entry-video5 {
  transform: translate3d(-50%, -50%, 0) scale(0.75);
}

.switch-6 .entry-video6 {
  transform: translate3d(-50%, -50%, 0) scale(0.5);
}

.switch-7 .entry-video2 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-7 .entry-video3 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-7 .entry-video4 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-7 .entry-video5 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-7 .entry-video6 {
  transform: translate3d(-50%, -50%, 0) scale(0.75);
}
.switch-7 .entry-video7 {
  transform: translate3d(-50%, -50%, 0) scale(0.5);
}

.switch-8 .entry-video2 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-8 .entry-video3 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-8 .entry-video4 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-8 .entry-video5 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-8 .entry-video6 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}
.switch-8 .entry-video7 {
  transform: translate3d(-50%, -50%, 0) scale(0.75);
}

.switch-8 .entry-video8 {
  transform: translate3d(-50%, -50%, 0) scale(0.5);
}

.switch-9 .entry-video2 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-9 .entry-video3 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-9 .entry-video4 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-9 .entry-video5 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-9 .entry-video6 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}
.switch-9 .entry-video7 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-9 .entry-video8 {
  transform: translate3d(-50%, -50%, 0) scale(0.75);
}

.switch-9 .entry-video9 {
  transform: translate3d(-50%, -50%, 0) scale(0.5);
}

.switch-10 .entry-video2 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-10 .entry-video3 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-10 .entry-video4 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-10 .entry-video5 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-10 .entry-video6 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}
.switch-10 .entry-video7 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-10 .entry-video8 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-10 .entry-video9 {
  transform: translate3d(-50%, -50%, 0) scale(0.75);
}

.switch-10 .entry-video10 {
  transform: translate3d(-50%, -50%, 0) scale(0.5);
}

.switch-11 .entry-video2 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-11 .entry-video3 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-11 .entry-video4 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-11 .entry-video5 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-11 .entry-video6 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}
.switch-11 .entry-video7 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}
.switch-11 .entry-video8 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-11 .entry-video9 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-11 .entry-video10 {
  transform: translate3d(-50%, -50%, 0) scale(0.75);
}

.switch-11 .entry-video11 {
  transform: translate3d(-50%, -50%, 0) scale(0.5);
}

.switch-12 .entry-video3 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-12 .entry-video4 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-12 .entry-video5 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-12 .entry-video6 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}
.switch-12 .entry-video7 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-12 .entry-video8 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-12 .entry-video9 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-12 .entry-video10 {
  transform: translate3d(-50%, -50%, 0) scale(1.2);
}

.switch-12 .entry-video11 {
  transform: translate3d(-50%, -50%, 0) scale(0.75);
}

.switch-13 .entry-video3 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-13 .entry-video4 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-13 .entry-video5 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-13 .entry-video6 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}
.switch-13 .entry-video7 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-13 .entry-video8 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-13 .entry-video9 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-13 .entry-video10 {
  transform: translate3d(-50%, -50%, 0) scale(1.2);
}

.switch-13 .entry-video11 {
  transform: translate3d(-50%, -50%, 0) scale(1.2);
}

.switch-14 .entry-video3 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-14 .entry-video4 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}
.switch-14 .entry-video5 {
  transform: translate3d(-50%, -50%, 0) scale(1.15);
}

.switch-14 .entry-video6 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}
.switch-14 .entry-video7 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-14 .entry-video8 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-14 .entry-video9 {
  transform: translate3d(-50%, -50%, 0) scale(1.17);
}

.switch-14 .entry-video10 {
  transform: translate3d(-50%, -50%, 0) scale(1.2);
}

.switch-14 .entry-video11 {
  transform: translate3d(-50%, -50%, 0) scale(1.9);
}

.panel {
  position: fixed;
  z-index: 400;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;

  transform: translate3d(0, 0, 0) scale(0);
  transition: transform 0.5s ease-in-out;
}

.is-video-open-1 .panel-1,
.is-video-open-2 .panel-2,
.is-video-open-3 .panel-3,
.is-video-open-4 .panel-4,
.is-video-open-5 .panel-5,
.is-video-open-6 .panel-6,
.is-video-open-7 .panel-7,
.is-video-open-8 .panel-8,
.is-video-open-9 .panel-9,
.is-video-open-10 .panel-10,
.is-video-open-11 .panel-11 {
  transform: translate(0%);
}

.button-close {
  z-index: 4000;
  font-family: teletext;
  width: 60px;
  height: 20px;
  position: fixed;
  top: 14px;
  left: 14px;
  background-color: blue;
  box-shadow: 0 0 10px 0 rgb(0, 251, 238);
  border: none;
  padding: 10px 10px;
  font-size: 20px;
  color: rgb(0, 251, 238);
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 7px;
  text-align: center;
}

#button-close {
  box-shadow: 0 0 30px 0 blue;
}

.container-panel {
  position: relative;
  width: 100dvw;
  height: 100dvh;
}

.vpanel {
  position: absolute;
  object-fit: cover;
  width: 100dvw;
  height: 100dvh;
}

.container-text {
  display: flex;
  /* justify-content: center;
  align-items: center; */
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.title {
  text-align: center;
  padding: 1rem;
  z-index: 3000;
  font-family: teletext;
  text-transform: uppercase;
  color: yellow;
  font-size: 20px;
}

.centered-text {
  text-align: center;
  padding: 1rem 2rem 1rem 2rem;
  /* padding-right: 10%;
  padding-left: 10%; */
  z-index: 3000;
  font-family: teletext;
  color: yellow;
  font-size: 2rem;
}

#loader-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: teletext;
  font-size: 2.5rem;
  text-transform: uppercase;
  color: yellow;
}

@media screen and (orientation: portrait) {
  .centered-text {
    font-size: 1rem;
  }
}

@media only screen and (max-aspect-ratio: 4/3.5) {
  #initialText {
    font-size: 40px;
  }
  .switch-0 .entry-video1 {
    transform: translate3d(-50%, -50%, 0) scale(5);
  }

  .switch-14 .entry-video11 {
    transform: translate3d(-50%, -50%, 0) scale(2.9);
  }
  .switch-4 .entry-video2 {
    transform: translate3d(-50%, -50%, 0) scale(1.25);
  }
  .title {
    font-size: 10px;
  }

  .centered-text {
    font-size: 1rem;
  }

  .entry-video1 {
    transform: translate3d(-50%, -50%, 0) scale(1.75);
  }
}

@media screen and (max-aspect-ratio: 4/2) {
}