/*general*/
html{
    font-size: calc(0.835vw);
    overflow-x: hidden;
}

body{
    margin: 0;
    padding: 0;
    font-family: "Roboto Mono", serif;
    color: #fff;
    background-color: #332200;
    width: 100vw;
    overflow-x: hidden;
    position: relative;
    height: 100vh;
}

#bg{
    height: 640.121rem;
    position: absolute;
    z-index: -9999;
}

.fancy{
    color: #2C2B7E;;
}

#bg-cloud-1{
    height: 40rem;
    width: 60rem;
    position: absolute;
    rotate: 10deg;
    transform: translate(6rem, 174.578rem);
}

#bg-cloud-2{
    height: 25rem;
    width: 25rem;
    position: absolute;
    rotate: -10deg;
    transform: translate(48rem, 226.952rem);
}

#bg-cloud-3{
    height: 30rem;
    width: 30rem;
    position: absolute;
    rotate: 10deg;
    transform: translate(48rem, 250.229rem);
}

#bg-cloud-4{
    height: 40rem;
    width: 40rem;
    position: absolute;
    rotate: -2deg;
    transform: translate(72rem, 250.229rem);
}

#bg-cloud-5{
    height: 35rem;
    width: 50rem;
    position: absolute;
    rotate: 8deg;
    transform: translate(48rem, 290.964rem);
}

#bg-cloud-6{
    height: 25rem;
    width: 25rem;
    position: absolute;
    rotate: -10deg;
    transform: translate(24rem, 343.337rem);
}

#bg-cloud-7{
    height: 30rem;
    width: 30rem;
    position: absolute;
    rotate: 10deg;
    transform: translate(68.4rem, 366.615rem);
}

#bg-cloud-8{
    height: 40rem;
    width: 40rem;
    position: absolute;
    rotate: -2deg;
    transform: translate(60rem, 389.892rem);
}

#bg-cloud-9{
    height: 30rem;
    width: 30rem;
    position: absolute;
    rotate: 10deg;
    transform: translate(72rem, 409.892rem);
}

#bg-cloud-10{
    height: 40rem;
    width: 40rem;
    position: absolute;
    rotate: -2deg;
    transform: translate(72rem, 448.084rem);
}

#bg-cloud-11{
    height: 35rem;
    width: 50rem;
    position: absolute;
    rotate: 8deg;
    transform: translate(48rem, 465.542rem);
}

#bg-cloud-12{
    height: 25rem;
    width: 25rem;
    position: absolute;
    rotate: -10deg;
    transform: translate(0rem, 517.916rem);
}

#bg-cloud-13{
    height: 25rem;
    width: 25rem;
    position: absolute;
    rotate: -10deg;
    transform: translate(-90rem, 541.193rem);
}

#bird-1{
    height: 10rem;
    width: 10rem;
    position: absolute;
    rotate: -10deg;
    transform: translate(-6rem, 104.747rem);
}

#bird-2{
    height: 6rem;
    width: 6rem;
    position: absolute;
    rotate: 3deg;
    transform: translate(24rem, 108.239rem);
}

#bird-3{
    height: 10rem;
    width: 10rem;
    position: absolute;
    rotate: -5deg;
    transform: translate(72rem, 244.048rem);
}

#bird-4{
    height: 10rem;
    width: 10rem;
    position: absolute;
    rotate: 6deg;
    transform: translate(72rem, 349.157rem);
}

#bird-5{
    height: 10rem;
    width: 10rem;
    position: absolute;
    rotate: 6deg;
    transform: translate(72rem, 523.735rem);
}

/* #sun-container{
    position: absolute;
    height: 1130vh;
    z-index: -100;
}

#sun{
    height: 15rem;
    width: 15rem;
    position: sticky;
    opacity: 0.9;
    top: 10rem;
    z-index: -1002;
    transform: translate(5vw);
} */



/*nav*/
#nav{
    position: absolute;
    width: 120rem;
}

#nav-logo{
    height: 7rem;
}



/*css*/
#banner{
    height: 41.317rem;
    width: 120rem;
    background-color: #4db35e;
}

#title{
    font-family: "Inter", serif;
    font-size: 9.4rem;
}

#tree{
    position: absolute;
    rotate: 180deg;
    transform: translate(3rem, -38.458rem);
    height: 15rem;
    z-index: 1000;
}

#trunk{
    position: absolute;
    z-index: -999;
    width: 72rem;
    height: 660.488rem;
    transform: translate(22.8rem, 5.819rem);
}

.logo-carousel-logo{
    filter: brightness(0) saturate(100%) invert(100%) opacity(0.6);
    height: 7.5rem;
}

.logo-carousel-logo:hover{
    filter: invert(0%) opacity(0.9);
}

#banner-sponsors{
    z-index: 1002;
    position: relative;
}

#sponsors-title{
    font-family: "Inter", serif;
    opacity: 0.6;
}

@keyframes banner-scroll-left{
    to{
        transform: translateX(-500rem);
    }
}

@keyframes banner-scroll-right{
    to{
        transform: translateX(500rem);
    }
}

#banner-cloud-1{
    height: 40rem;
    width: 60rem;
    position: absolute;
    rotate: 10deg;
    animation: banner-cloud-1 4s ease-in-out infinite, banner-scroll-left linear;
    animation-timeline: auto, scroll();
    z-index: 1002;
}

@keyframes banner-cloud-1 {
    0%{
        transform: translate(-14.4rem, 30.26rem);
    }
    50%{
        transform: translate(-14.4rem, 31.424rem);
    }
    100%{
        transform: translate(-14.4rem, 30.26rem);
    }
}

#banner-cloud-2{
    height: 30rem;
    width: 40rem;
    position: absolute;
    rotate: -6deg;
    animation: banner-cloud-2 4s ease-in-out infinite, banner-scroll-right linear;
    animation-timeline: auto, scroll();
    z-index: 1002;
}

@keyframes banner-cloud-2 {
    0%{
        transform: translate(76.8rem, 34.334rem);
    }
    50%{
        transform: translate(76.8rem, 32.588rem);
    }
    100%{
        transform: translate(76.8rem, 34.334rem);
    }
}

#banner-cloud-3{
    height: 60rem;
    width: 70rem;
    position: absolute;
    rotate: -6deg;
    animation: banner-cloud-3 5s ease-in-out infinite, banner-scroll-right linear;
    animation-timeline: auto, scroll();
    z-index: 1002;
}

@keyframes banner-cloud-3{
    0%{
        transform: translate(68.4rem, 36.661rem);
    }
    50%{
        transform: translate(68.4rem, 37.825rem);
    }
    100%{
        transform: translate(68.4rem, 36.661rem);
    }
}

#banner-cloud-4{
    height: 30rem;
    width: 40rem;
    position: absolute;
    rotate: 2deg;
    animation: banner-cloud-4 5s ease-in-out infinite, banner-scroll-left linear;
    animation-timeline: auto, scroll();
    z-index: 1002;
}

@keyframes banner-cloud-4 {
    0%{
        transform: translate(16.8rem, 39.571rem);
    }
    50%{
        transform: translate(16.8rem, 37.825rem);
    }
    100%{
        transform: translate(16.8rem, 39.571rem);
    }
}

#banner-cloud-5{
    height: 30rem;
    width: 40rem;
    position: absolute;
    rotate: 8deg;
    animation: banner-cloud-5 3s ease-in-out infinite, banner-scroll-left linear;
    animation-timeline: auto, scroll();
    z-index: 1002;
}

@keyframes banner-cloud-5 {
    0%{
        transform: translate(6rem, 26.187rem);
    }
    50%{
        transform: translate(6rem, 25.023rem);
    }
    100%{
        transform: translate(6rem, 26.187rem);
    }
}

#vine1{
    height: 11.639rem;
    width: 24rem;
    position: sticky;
    rotate: 90deg;
    margin-left: 11.522rem;
    top: 5rem;
}

#vine2{
    height: 11.639rem;
    width: 24rem;
    position: sticky;
    rotate: 270deg;
    margin-top: -11.639rem;
    top: 5rem;
}

#vine{
    transform: translate(40.2rem);
    padding-top: 55.283rem;
    position: absolute;
    height: 657.579rem;
    z-index: 101;
    width: 0rem;
}

#monkey{
    height: 20rem;
    position: sticky;
    top: 10rem;
    margin-left: 7.2rem;
}

#stats-cloud-1{
    height: 30rem;
    width: 40rem;
    rotate: -5deg;
}

#stats-cloud-1-container{
    position: absolute;
    animation: stats-cloud-1 4s ease-in-out infinite;
    z-index: 1002;
}

#stats-cloud-2-container{
    position: absolute;
    animation: stats-cloud-2 4s ease-in-out infinite;
    z-index: 1002;
}

#stats-cloud-3-container{
    position: absolute;
    animation: stats-cloud-3 5s ease-in-out infinite;
    z-index: 1002;
}

#stats-cloud-4-container{
    position: absolute;
    animation: stats-cloud-4 5s ease-in-out infinite;
    z-index: 1002;
}

@keyframes stats-cloud-1 {
    0%{
        transform: translate(-7.2rem, 4.655rem);
    }
    50%{
        transform: translate(-7.2rem, 5.819rem);
    }
    100%{
        transform: translate(-7.2rem, 4.655rem);
    }
}

#stats-cloud-2{
    height: 30rem;
    width: 40rem;
    rotate: -6deg;
}

@keyframes stats-cloud-2 {
    0%{
        transform: translate(82.8rem, 8.729rem);
    }
    50%{
        transform: translate(82.8rem, 7.565rem);
    }
    100%{
        transform: translate(82.8rem, 8.729rem);
    }
}

#stats-cloud-3{
    height: 30rem;
    width: 30rem;
    rotate: 4deg;
}

@keyframes stats-cloud-3{
    0%{
        transform: translate(57.6rem, 7.565rem);
    }
    50%{
        transform: translate(57.6rem, 8.729rem);
    }
    100%{
        transform: translate(57.6rem, 7.565rem);
    }
}

#stats-cloud-4{
    height: 30rem;
    width: 40rem;
    rotate: 2deg;
}

@keyframes stats-cloud-4 {
    0%{
        transform: translate(24rem, 11.057rem);
    }
    50%{
        transform: translate(24rem, 9.311rem);
    }
    100%{
        transform: translate(24rem, 11.057rem);
    }
}

#why{
    height: 46.554rem;
    margin-top: 30rem;
}

#why-title{
    position: absolute;
}

#about{
    width: 120rem;
    position: relative;
    z-index: 1002;
}

#last-year{
    width: 120rem;
}

#last-year-title{
    position: relative;
    z-index: 1002;
}

@media (max-width: 1000px) {
    #last-year{
        display: none;
    }

    #trunk{
        height: 280rem;
    }

    #bg{
        height: 287rem;
    }

    #vine{
        height: 277rem;
    }

    #bg-cloud-2,
    #bg-cloud-3,
    #bg-cloud-4,
    #bg-cloud-5,
    #bg-cloud-6,
    #bg-cloud-7,
    #bg-cloud-8,
    #bg-cloud-9,
    #bg-cloud-10,
    #bg-cloud-11,
    #bg-cloud-12,
    #bg-cloud-13,
    #bird-3,
    #bird-4,
    #bird-5{
        display: none;
    }
}

.cloud{
    opacity: 0.7;
}

#cloud-text-1{
    position: absolute;
    margin-left: 15rem;
    margin-top: 9rem;
    text-align: center;
    z-index: 10;
}

#cloud-text-2{
    position: absolute;
    margin-left: 14.5rem;
    margin-top: 7.5rem;
    text-align: center;
    z-index: 10;
}

#cloud-text-3{
    position: absolute;
    margin-left: 11rem;
    margin-top: 5.5rem;
    text-align: center;
    z-index: 10;
}

#cloud-text-4{
    position: absolute;
    margin-left: 14.5rem;
    margin-top: 7rem;
    text-align: center;
    z-index: 10;
}

.plane-svg{
    height: 30rem;
}

.plane-right-container{
    animation: plane-scroll-right linear;
    animation-timeline: view();
    margin-bottom: -8rem;
    z-index: 50;
    position: relative;
}

.plane-left-container{
    animation: plane-scroll-left linear;
    animation-timeline: view();
    transform: translateX(84rem);
    margin-bottom: -8rem;
    z-index: 50;
    position: relative;
}

.plane-right-container-2{
    animation: plane-scroll-right-2 linear;
    animation-timeline: view();
    margin-bottom: -8rem;
    z-index: 50;
    position: relative;
}

.plane-left-container-2{
    animation: plane-scroll-left-2 linear;
    animation-timeline: view();
    transform: translateX(84rem);
    margin-bottom: -8rem;
    z-index: 50;
    position: relative;
}

/*taken from hackthe6ix 2024 website sorry lol*/
.plane-right-container::after,
.plane-left-container::after,
.plane-left-container-2::after,
.plane-right-container-2::after{
    position: absolute;
    background-image: 
    linear-gradient(to top right, transparent 50%, #ebdd47 0), 
    linear-gradient(to bottom right, #ebdd47 50%, transparent 0);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position: 0, 100%;
    width: calc(24rem - 1rem);
    height: 10rem;
    content: "";
    opacity: .2;
    transform: translate(0.6rem, -30rem);
}

@keyframes plane-scroll-right{
    to{
        transform: translateX(60rem);
    }
}

@keyframes plane-scroll-left{
    to{
        transform: translateX(0rem);
    }
}

@keyframes plane-scroll-right-2{
    to{
        transform: translateX(96rem);
    }
}

@keyframes plane-scroll-left-2{
    to{
        transform: translateX(-12rem);
    }
}

.plane-img{
    height: 14.548rem;
    width: 24rem;
    object-fit: cover;
    transform: translateX(0.2rem);
    scale: 106%;
    opacity: 0.8;
    transition-duration: 0.4s; 
    transition-timing-function: cubic-bezier(.88,.3,.21,.94);
}

.plane-img-container{
    height: 14.548rem;
    width: 24rem;
    overflow: hidden;
    border-radius: 0.7rem;
}

.plane-img-text-container{
    height: 14.548rem;
    width: 24rem;
    position: absolute;
    overflow: hidden;
    z-index: 102;
}

.plane-img-text{
    position: absolute;
    z-index: 10;
    left: 1rem;
    bottom: -1.5rem;
    transition-duration: 0.5s; 
    transition-timing-function: cubic-bezier(.88,.3,.21,.94);
}

.plane-img-text-container:hover ~ .plane-img-container .plane-img{
    scale: 100%;
    opacity: 0.9;
}

.plane-img-text-container:hover .plane-img-text{
    transform: translateY(-2rem);
}

.card{
    box-shadow: 0px 0px 20px 5px rgba(33, 43, 48, 0.18);
    height: min-content;
    width: 20rem;
    background-color: #fff;
    margin-bottom: 1rem;
    border-radius: 2rem;
    overflow: hidden;
}

.nrg{
    animation: background-pan 2.5s linear infinite;
    background: linear-gradient(to right, #4336ff, #753cfa, #4336ff);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

@keyframes background-pan{
    0% {
        background-position: 0% center;
        background-position-x: 0%;
        background-position-y: center;
    }
    100% {
        background-position: -200% center;
        background-position-x: -200%;
        background-position-y: center;
    }
}

.card-img{
    height: 12rem;
    width: 100%;
    object-fit: cover;
}

#mountains{
    height: 87.289rem;
    position: absolute;
    z-index: -1000;
}

#tree-1{
    height: 10rem;
    transform: translate(6rem, 39.862rem);
    position: absolute;
    z-index: -1001;
}

#tree-1-logo{
    position: absolute;
    transform: translate(2.8rem, 22.5rem);
    height: 13rem;
    opacity: 0.7;
}

#tree-1-container:hover #tree-1-logo{
    opacity: 0.9;
}

#tree-2{
    height: 10rem;
    transform: translate(19.2rem, 31.715rem);
    position: absolute;
    z-index: -1001;
}

#tree-2-logo{
    position: absolute;
    transform: translate(12.8rem, 12rem);
    height: 17.5rem;
    opacity: 0.8;
}

#tree-2-container:hover #tree-2-logo{
    opacity: 0.9;
}

#tree-3{
    height: 10rem;
    transform: translate(98.4rem, 25.605rem);
    position: absolute;
    z-index: -1001;
}

#tree-3-logo{
    position: absolute;
    transform: translate(95.8rem, 10.5rem);
    height: 8.729rem;
    opacity: 0.8;
}

#tree-3-container:hover #tree-3-logo{
    opacity: 0.9;
}

#grass{
    height: 62.2rem;
    width: 120rem;
    position: absolute;
    z-index: -99;
    margin-top: -52.374rem;
    margin-left: -24rem;
}

/*taken from hackthe6ix 2024 website sorry lol*/
#tree-1-container::after,
#tree-2-container::after,
#tree-3-container::after{
    position: absolute;
    background-image: 
    linear-gradient(to top right, transparent 50%, #ebdd47 0), 
    linear-gradient(to bottom right, #ebdd47 50%, transparent 0);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position: 0, 100%;
    width: calc(24rem - 1rem);
    height: 10rem;
    content: "";
    opacity: .2;
    filter: blur(0.5rem);
}

#tree-1-container::after{
    transform: translate(-2.9rem, 29.5rem);
}

#tree-2-container::after{
    transform: translate(10.1rem, 21.5rem);
}

#tree-3-container::after{
    transform: translate(89.4rem, 15.5rem);
}

#sponsor-mountain-title{
    transform: translate(16rem, 8rem);
}

#sponsor-mountain{
    height: 81.47rem;
}

#faq{
    width: 120rem;
    position: relative;
    z-index: 1000;
}

#faq-card{
    height: min-content;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.18);
    border-radius: 1rem;
    position: sticky;
    top: 4rem;
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px); 
}

#faq-line{
content: "";
width: 0.2rem;
height: inherit;
background-color: rgba(255, 255, 255, 0.2);
margin-right: 1rem;
}

#sign-up:target{
    background-color: rgba(0, 255, 0, 0.2);
}