.body {
  width: 100%;
  height: 100vh;
  background: #000000;
  position: absolute;
}

.college {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 5000;
  background: #ffffff;
}

.perspective-container {
  width: 100vw;
  height: 100vh;
  perspective: 12px;
  transform-style: preserve-3d;
  /* overflow: hidden;   */
  position: relative;
}

.layer {
  position: absolute;
}

.layer img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: scale-down;
}

.layer1 {
  z-index: 10;
}
.layer2 {
  z-index: 9;
}
.layer3 {
  z-index: 8;
}
.layer4 {
  z-index: 7;
}
.layer5 {
  z-index: 6;
}
.layer6 {
  z-index: 5;
}

#flash-img {
  position: absolute;
  display: none;
  filter: brightness(0);
  z-index: 2;
}

@media (max-width: 600px) {
  .perspective-container {
    width: 100%;
    height: 100%;
    transform: translateY(0%);
  }

  .layer img {
    max-width: 100vw;
    object-fit: contain;
    min-width: 0;
    max-height: none;
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .perspective-container {
    width: 100vw;
    height: 100vh;
  }
  .layer1 img {
    transform: scale(6);
  }
  .layer3 img {
    transform: scale(11);
  }
  .layer5 img {
    transform: scale(20);
  }
  .layer6 img {
    transform: scale(32);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .perspective-container {
    width: 100vw;
    height: 100vh;
  }
  .layer1 img {
    transform: scale(6);
  }
  .layer3 img {
    transform: scale(11);
  }
  .layer5 img {
    transform: scale(20);
  }
  .layer6 img {
    transform: scale(30);
  }
}

@media (min-width: 1025px) {
  .perspective-container {
    width: 100vw;
    height: 100vh;
    transform: translateY(-20%);
  }
  .layer1 img {
    transform: scale(8.5);
  }
  .layer3 img {
    transform: scale(16);
  }
  .layer5 img {
    transform: scale(30);
  }
  .layer6 img {
    transform: scale(45);
  }
}

/* Tap Hint Styling */
.tap-hint {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

.tap-hint img {
  width: 16vw;
  /* min-width: 100px;
  max-width: 200px; */
  height: auto;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.89));
}

.tap-text {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.8rem, 1.5vw, 2rem);
  letter-spacing: clamp(0.1rem, 0.1vw, 0.3rem);
  color: #313131;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
  animation: pulseTap 1.2s infinite ease-in-out;
}

@keyframes pulseTap {
  0%,
  100% {
    opacity: 0.75;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@media (max-width: 768px) {
  .tap-hint {
    bottom: 25vh;
  }
  .tap-hint img {
    width: 30vw;
    min-width: 80px;
  }
}