@font-face {
  font-family: "pnut2";
  src: url(/media/fonts/pnut2.ttf);
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  max-height: 100dvh;
  background: #e7ebe7;
  position: relative;
  overflow: hidden;
}
video {
  width: 100%;
  height: 100%;
  position: absolute;
}

.hidden {
  transform: translate(100%); /* Slide down fully off the screen */
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.visible {
  transform: translateY(0); /* Bring into view */
}

#remoteContainer {
  position: absolute;
  /* bottom: -100%; */
  left: 50%; /* Starts the remote horizontally centered */
  width: clamp(200px, 300px, 65dvw); /* Adjust size as needed */
  /* height: fit-content; */

  transform: translateX(-50%); /* Adjusts for image centering */
  transition: transform 0.1s ease-out; /* Smooth movement for minor delays */

  z-index: 1000; /* Keeps the remote on top */
  display: none;
}

#remoteBase {
  width: 100%;
}
#remoteButton {
  cursor: pointer;
  position: absolute;
  width: 48%;
  left: 20%;
  top: 29%;
}
#remoteButton:active {
  opacity: 0;
}

.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  font-size: 1.5rem;
  color: white;
  background-color: #ec1c23;
  border: 2.8px solid black;
  padding: 20px 30px;
  border-radius: 24px;
  text-align: center;
  font-family: "pnut2";
  font-size: 4rem;
  letter-spacing: 4px;
}

#intro-videos {
  /* visibility: hidden; Hide videos until loaded */
  width: 100%;
  height: 100%;
}