body {
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

.content {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Higher than overlay but lower than curtains */
}

.content img {
  width: 100%;
}

.curtainContainer {
  position: absolute;
  display: flex;
  top: -10%;
  width: 100%;
  height: 110%;
  margin: auto;
  transform-style: preserve-3d;
  overflow: hidden;
  transition: transform 18s ease;
   z-index: 3;
}

.curtainContainer:nth-child(1) {
  transform-origin: -120% top;
  justify-content: flex-start;
  transform: translatex(-5vw);
}

.curtainContainer:nth-child(2) {
  transform-origin: 120% top;
  justify-content: flex-end;
  transform: translatex(15vw);
}

.rollLeft {
  transform: translatex(-150vw) scaleX(0);
}

.rollRight {
  transform: translatex(150vw) scaleX(0);
}

/* .curtainBody:hover .curtainContainer:nth-child(1) {
  transform: translatex(-150vw) scaleX(0);
}

.curtainBody:hover .curtainContainer:nth-child(2) {
  transform: translatex(150vw) scaleX(0);
} */
.curtainBody.clicked .curtainContainer:nth-child(1) {
  transform: translateX(-150vw) scaleX(0);
}

.curtainBody.clicked .curtainContainer:nth-child(2) {
  transform: translateX(150vw) scaleX(0);
}

.unCurtain {
  display: inline-block;
  width: 15vw;
  margin: 0;
  padding: 0;
  height: 120vh;
  background-size: 100% 100%;
  background: repeating-linear-gradient(
    to left,
    #dd3232 4vw,
    #911818 12vw,
    #ec8989 15vw
  );
  transform-origin: 0 0%;
  transform: rotate(3deg);
  transition: transform 4s ease;
  animation: swing 2s ease infinite;
}

@keyframes swing {
  50% {
    transform: rotate(-3deg);
  }
}
.unCurtain:nth-child(2) {
  margin-left: -10vw;
  animation-delay: -0.1s;
}

.unCurtain:nth-child(3) {
  margin-left: -10vw;
  animation-delay: -0.2s;
}

.unCurtain:nth-child(4) {
  margin-left: -10vw;
  animation-delay: -0.3s;
}

.unCurtain:nth-child(5) {
  margin-left: -10vw;
  animation-delay: -0.4s;
}

.unCurtain:nth-child(6) {
  margin-left: -10vw;
  animation-delay: -0.5s;
}

.unCurtain:nth-child(7) {
  margin-left: -10vw;
  animation-delay: -0.6s;
}

.unCurtain:nth-child(8) {
  margin-left: -10vw;
  animation-delay: -0.7s;
}

.unCurtain:nth-child(9) {
  margin-left: -10vw;
  animation-delay: -0.8s;
}

.unCurtain:nth-child(10) {
  margin-left: -10vw;
  animation-delay: -0.9s;
}

.unCurtain:nth-child(11) {
  margin-left: -10vw;
  animation-delay: -1s;
}

.unCurtain:nth-child(12) {
  width: 10vw;
  background: repeating-linear-gradient(
    to left,
    #dd3232 4vw,
    #911818 8vw,
    #ec8989 10vw
  );
  margin-left: -10vw;
  animation-delay: -1.1s;
}

.curtainBody {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}

.overlay {
  display: block;
  position: absolute;
  color: white;
  top: 0%;
  left: 0%;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to top, rgba(2, 2, 2, 0) 0vh, black 100vh);
  transition: opacity 3s ease;
  z-index: 1; /* Lower than curtains but above normal content */
}

.curtainBody:hover .overlay {
  opacity: 0;
}
.welcome-btn {
  height: 100vh;
  width: 100vw;
  z-index: 1212;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-btn button {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: rgba(255, 255, 255, 0.1); /* glass background */
  border: 2px solid rgba(255, 255, 255, 0.3); /* soft border */
  border-radius: 0.6em;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease-in-out;
}

.welcome-btn button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.welcome-btn button:hover, .welcome-btn button:focus {
  color: #fff;
  outline: 0;
}


.welcome-btn.hidden {
  display: none;
}