body {
    overflow-x:hidden;
}

header {
    color:var(--color-sea);
    & .logo svg * {
    fill: var(--color-sea);
    }
}
.hamburger div {
    background:var(--color-sea);
}


.split {
    display:flex;

    & > div {
        width:50%;
        padding:0 60px;
    }

    & h1, & h2, & h3 {
        color:var(--color-sea);
    }
}

.intro-text {
    padding:120px 0;
    padding-bottom:20px;
    transform-origin:top;
    background:var(--color-creme);
    border-top-right-radius:40px;
    border-top-left-radius:40px;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position:relative;
    z-index:2;

    & .blinds-text-wrapper {
        justify-content: center;
    }
    & .button {
        margin-top:24px;
    }
}

.side-scroll {
    position:relative;

    & .draw-me {
        position:absolute;
        pointer-events:none;
        left:0;
        width:100%;
        height:100%;
        z-index:1;
        background:var(--color-creme);
        & svg {
            width:100%;
            height:100%;
        }
    }
    & .progress {
        position: absolute;
        pointer-events: none;
        left: 0;
        width: calc(100% - 6vw);
        height: 32px;
        background: var(--color-orange);
        top: 0;
        bottom: 0;
        left: 6vw;
        margin: auto;
        border-radius: 100px;
        z-index: 3;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;

        & .start {
            color:var(--color-creme);
            position:absolute;
            left:0;
            top:0;
            display: flex;
            align-items: center;
        }
        & .start:before {
            background: #DE8633;
            content: ' ';
            display: block;
            border-radius: 100px;
            height: 32px;
            aspect-ratio: 1 / 1;
        }
        & .start > span {
            padding-left: 10px;
            font-family: 'TayBea';
            margin-bottom: -3px;
        }
    }
    aside.year-trans {
        display: inline-flex;
        height:100dvh;
        align-items:center;
        justify-content: center;
        padding:0 2vw;
        box-sizing:border-box;
        flex-direction:column;
        position: relative;
        z-index: 4;
        color: var(--color-creme);
        font-family: 'TayBea';
        width: 0;
    }
    aside.year-trans.lastone {
        padding-right:200px;
    }
    & .spacer {
        height:700dvh;
        position:relative;
    }
    & .sections {
        height:100dvh;
        width:100vw;
        position:sticky;
        overflow:hidden;
        z-index:5;
        white-space:nowrap;
        top:0;
        
    }

    & .final {
        height:100%;
        width:100%;
        position:sticky;
        top:0;
        left:0;
        z-index:2;
        display:flex;
        align-items: center;
        justify-content: center;

        & .blinds-text-wrapper {
            justify-content: center;
        }

        & h2 {
            position:relative;
            z-index:2;
            padding:0 10vw;
            color:var(--color-creme);
            text-align: center;
            white-space:normal;
        }
        & h4 {
            position:relative;
            z-index:2;
            padding:0 10vw;
            color:var(--color-creme);
            text-align: center;
            margin-bottom:30px;
            font-size:30px;
            white-space:normal;
        }

        & img {
            height:100%;
            width:100%;
            top:0;
            left:0;
            position:absolute;
            object-fit:cover;
        }
    }

    & .inner {
        display:inline-flex;
        width:auto;
    }

    & section {
        display: inline-flex;
        height:100dvh;
        align-items:center;
        justify-content: center;
        padding:0 2vw;
        max-width:800px;
        box-sizing:border-box;
        margin-left:-2px;
        flex-direction:column;
        z-index:2;
        width:30vw;

        & h2 {
            font-size:3vw;
            margin-bottom:16px;
            margin-top:50px;
            margin-top:20px;
            white-space:normal;
        }
        & h4 {

        }
        & > div {
            max-width:100%;
        }
        & hr {
            border:none;
            height:100px;
            width:1px;
            background:black;
        }

        &:nth-of-type(even) {
            & div.text {
                height: 50%;
                align-items: self-start;
                justify-content: flex-start;
                display: flex;
                flex-direction: column;
                align-self: flex-end;
                margin-bottom: auto;
                order: 2;
                text-align:center;
                & div {
                    display:flex;
                    flex-direction:column;
                }
            }
            & hr {
                order:-1;
            }

        }
        &:nth-of-type(odd) {
            & div.text {
                height: 50%;
                align-items: self-start;
                justify-content: flex-end;
                display: flex;
                flex-direction: column;
                margin-top: auto;
                text-align:center;
            }
        }
        
        &:nth-child(even) > div.img {
            height: 50%;
            display: flex;
            align-items: flex-end;
            width: 100%;
            & img {
                margin-bottom:60px;
                border-radius:30px;
                width:100%;
                object-fit:cover;
                max-height:40vh;
            }
        }
        &:nth-child(odd) > div.img {
            height: 50%;
            width: 100%;
            & img {
                margin-top:60px;
                border-radius:30px;
                width:100%;
                object-fit:cover;
                max-height:40vh;
            }
        }
    }



    & p {
        white-space:wrap;
    }
}


.final-split {
    padding-top:120px;

    & img {
        border-radius:30px;
    }
}

.disclaimer {
    padding-bottom:120px;
    padding-top:120px;
    text-align:center;
}

.waitlist {
    min-height:50vh;
    padding:120px 0;
    z-index: 2;
    background:var(--color-creme);
    
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:40px;

    & h2 {
        font-size:38px;
        margin-bottom:16px;
    }
    & .grid div:first-child {
        display:flex;
        align-items: flex-end;
        & img {
            margin-bottom:20%;
        }
    }
    & .grid div:last-child {
        display:flex;
        flex-direction:column;
        align-items: flex-start;
        justify-content: center;
        & .button {
            margin-top:16px;
        }
    }
    
}
.waitlist:before {
    position:absolute;
    top:-40px;
    margin-top:-40px;
    left:0;
    width: 100%;
    border-top-right-radius:40px;
    border-top-left-radius:40px;
    z-index:0;
    height:80px;
    background:var(--color-creme);
    content:' ';
}


@media screen and (max-width:800px){
    .side-scroll {
        & section {
            width:70vw;
        }
    }
}