/* * { cursor: url("../images/cursor.png"), auto; } */

body {
    margin: 0;
    padding: 0;
    height: 250vh; /* Create enough scrollable content */
    font-family: 'Space Grotesk';
    display: flex;
    justify-content: center;
    background-color: #212121;
    overflow-x: hidden;
}

.sky {
    position: fixed;
    background-image: url("../images/lax/sky.png");
    background-size: 200%;
    background-position-x: 50%;
    background-position-y: 6%;
    height: 100vh;
    width: 90vw;
}
.sky2 {
    position: absolute;
    background-color: rgb(150, 195, 136);
    height: 100vh;
    width: 90vw;
}
/* .skyset {
    opacity: 1;
    z-index: 10;
    position: absolute;
    background-color: pink;
    height: 250vh;
    width: 90vw;
} */

/* .sun {
    position: absolute;
    height: 100vh;
    width: 90vw;
    z-index: 0;
    background-image: url("../images/sun.png");
    background-size: cover;
    transition: transform 0.23s ease-out;
} */

.mountains {
    opacity: 0.8;
    position: absolute;
    height: 100vh;
    width: 90vw;
    background-size: cover;
}
/* 
.layer1 {
    z-index: 0;
    background-image: url("../images/layer1.png");
}
.layer2 {
    z-index: 2;
    background-image: url("../images/layer2.png");
}
.layer3 {
    z-index: 4;
    background-image: url("../images/layer3.png");
}
.layer4 {
    z-index: 6;
    background-image: url("../images/layer4.png");
} */


.layer1 {
  z-index: 14;
  background-image: url("../images/lax/layer1.png");
}
.layer2 {
  z-index: 12;
  background-image: url("../images/lax/layer2.png");
}
.layer3 {
  z-index: 10;
  background-image: url("../images/lax/layer3.png");
}
.layer4 {
  z-index: 8;
  background-image: url("../images/lax/layer4.png");
}
.layer5 {
  z-index: 6;
  background-image: url("../images/lax/layer5.png");
}
.layer6 {
  z-index: 4;
  background-image: url("../images/lax/layer6.png");
}
.layer7 {
  z-index: 2;
  background-image: url("../images/lax/layer7.png");
}
/* .layer8 {
  z-index: 0;
  background-image: url("../images/lax/layer8.png");
} */

.layer1-ext {
  z-index: 14;
  transform: translateY(200%);
  background-color: #03111a;
  position: absolute;
  height: 250vh;
  width: 90vw;
}

.layer2-ext {
  z-index: 12;
  transform: translateY(200%);
  background-color: #091c28;
  position: absolute;
  height: 250vh;
  width: 90vw;
}

/* .gray {
    z-index: 6;
    transform: translateY(200%);
    position: absolute;
    height: 250vh;
    width: 95vw;
    background-color: #212121;
}

.gray-cover {
    z-index: 6;
    transform: translateY(150%);
    position: absolute;
    height: 250vh;
    width: 95vw;;
    background-color: #212121;
} */

.welcome {
    z-index: 1;
    transition: opacity 3s ease;
}

.scroll-div1 {
    z-index: 15;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: -100%; /* Initially hide the div below the viewport */
    background-color: #252525;
    opacity: 0;
    transition: opacity 0.5s, bottom 0.75s; /* Transition the bottom property */
    color: rgb(255, 255, 255);
}

.scroll-div1.active {
    bottom: 0; /* Move the div to the center when active */
    opacity: 1;
}

#overlay1 {
    background-color: rgba(205, 211, 253, 0.35);
    z-index: 12;
    height: 100vh;
    width: 100vw;
    position: absolute;
}

.dt-left, .dt-right {
    display: flex;
    background-color: rgba(246, 231, 255, 0.6);
    height: 100vh;
    width: 30vw;
    position: absolute;
}
.dt-left {
    left: 0px;
}
.dt-right {
    right: 0px;
}

.cover {
    border: 1px solid pink;
    border-radius: 4px;
    z-index: 12;
    max-height: 16vh;
    /* padding: 1vw; */
}

.stack {
    margin-top: 7vh;
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    justify-content: center;
    align-items: center;
}
.stack-row {
    /* display: flex; */
    justify-content: space-between; 
    margin-bottom: 1vh;
}

.scroll-div2 {
    z-index: 16;
    width: 100%;
    height: 100vh;
    position: fixed;
    bottom: -100%; 
    background-color: rgba(56, 25, 56, 0.4);
    opacity: 1;
    transition: opacity 0.5s, bottom 0.75s; 
    color: rgb(255, 235, 235);
}

.scroll-div2.active {
    bottom: 0; 
    opacity: 1;
}

.homu {
    background-image: url("../images/homura.jpg");
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
}
.mado {
    background-image: url("../images/madoka.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

#overlay2 {
    background-color: rgb(253, 205, 219, 0.1);
    z-index: 12;
    height: 100vh;
    width: 100vw;
    position: absolute;
    pointer-events: none;
}

.scroll-div3 {
    z-index: 16;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: -100%; 
    background-color: #212121;;
    opacity: 0;
    transition: opacity 0.5s, bottom 0.75s; 
}
.scroll-div3.active {
    bottom: 0; /* Move the div to the center when active */
    opacity: 1;
}
#overlay3 {
    background-color: rgb(253, 205, 219, 0.15);
    z-index: 12;
    height: 100vh;
    width: 100vw;
    position: absolute;
    pointer-events: none;
}

.end-div {
    z-index: 17;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: -100%;
    background-color: rgb(17, 17, 17);
    opacity: 0;
    transition: opacity 0.5s, bottom 0.75s; 
    color: rgb(255, 235, 235);
}
.end-div.active {
    bottom: 0; /* Move the div to the center when active */
    opacity: 1;
}

.text-container {
    width: 60%;
}

.nv-cnt {
    position: absolute;
}

#cum {
    width: 400px;
    height: 300px;
}

.meme {
    font-size: 30px;
    font-family: Impact, sans-serif;
    color: white;
    text-shadow: 
    -1.5px -1.5px 0 black,
    1.5px -1.5px 0 black,
    -1.5px 1.5px 0 black,
    1.5px 1.5px 0 black;
}

footer {
    color: white;
    position: fixed;
    bottom: 5px;
    z-index: 99;
}

#down {
    margin-top: -20px;
    height: 70px;
}

@media only screen and (max-width: 900px) and (orientation: landscape) {
  footer {
      display: none;
  }
  .down-cnt {
    height: 50px;
    font-size: 0px !important;
    bottom: 20px !important;
  }
  i {
    font-size: 15px !important;
  }
  #social {
    display: none;
  }
  .goodbye {
    margin-top: 100px !important;
  }
}

.down-cnt {
    text-align: center;
    color: rgb(255, 215, 222);
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 50px;
    display: flex;
    z-index: 50;
    transition: color 0.5s ease, transform 0.5s ease;
}
.down-cnt:hover {
    color: white;
    transform: scale(1.05);
}

.p-text {
    text-decoration: none;
    color: pink;
    transition: color 0.2s ease;
}

i.p-text {
    font-size: 3vh;
    margin: 5px;
}

.p-text:hover {
    color: white;
}

#player {
    z-index: 15;
    width: 20.6vw;
    position: absolute;
    left: 7vw;
    top: 25vh;

}
#pain {
    z-index: 15;
    width: 20vw;
    height: 40vh;
    position: absolute;
    right: 7vw;
    top: 10vh;
    border-radius: 10px;
    filter: brightness(105%);
    opacity: 0.9;
}

#pain2 {
    top: 32vh;
    right: 6vw;
    width: 23vw;
    position: absolute;
    border-radius: 10px;
    filter: brightness(119%);
    opacity: 0.9;
}
.goodbye {
    margin-top: 275px; 
    color:black; 
    z-index: 90;
    text-decoration: underline;
}

@media only screen and (max-width: 900px) {
    .layer1, .layer2, .layer3 {
      display: none;
    }
    .typewriter {
      z-index: 15;
    }
    .dt-left, .dt-right {
        display: none;
    }
    .text-container {
        font-size: 12.5px;
        width: 72%;
    }
    .meme {
        font-size: 25px;
    }
    #player {
        display: none;
    }
    #pain {
        display: none;
    }

}

#viewer {
    display: none;
    z-index: 100;
    position: fixed;
    width: 100vw;
    height: 110vh;
    background-color: rgb(0, 0, 0, 0.8);
}
  
.rm {
    transition: opacity 0.5s ease;
}