html {
    background: rgb(37, 40, 49);
}

body, html {
    margin: 0px;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
}

#welcome_box {
    height: 100vh;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    z-index: 1;
    scroll-snap-align: center;
}

#welcome_box_image {
    width: clamp(40vh, 400px, 40vw);
    height: auto;

    margin-left: auto;
    margin-right: auto;
}

#welcome_box_buttons {
    display: flex;
    flex-direction: column;

    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(2vh, 20px, 2vw);

    align-items: center;
}

#blob {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

    width: clamp(40vh, 400px, 40vw);
    height: auto;
    aspect-ratio: 1;
    border-radius: 200px;
    filter: blur(70px);

    z-index: -10;

    background: rgb(61,132,148);
    background: linear-gradient(120deg, rgba(61,132,148,1) 9%, rgba(34,73,139,1) 47%, rgba(37,210,108,1) 91%); 
}

@media (min-width: 1000px) {
    /* Large screens */

    #index_top {
        margin-top: clamp(1vh, 10px, 1vw);
        position: absolute;
        top: 0px;
    
        display: flex;
        flex-direction: row;
    
        justify-content: space-between;
        align-items: center;
        z-index: 5;
    
        width: 100%;
    }
    
    #index_top_image {
        width: clamp(6vh, 60px, 6vw);
        margin-left: clamp(1vh, 10px, 1vw);
        height: auto;
    }
    
    #index_top_links {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    #index_top_account {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: clamp(2vh, 20px, 2vw);
    }

    #index_top_toggle {
        display: none;
    }
}

@media (max-width: 1000px) {
    /* Small Screens */

    #index_top {
        position: absolute;
        top: 0px;
        display: flex;
        flex-direction: column-reverse;

        z-index: 5;
    
        width: 100%;
    }
    
    #index_top_image {
        display: none;
    }
    
    #index_top_links {
        display: flex;
        flex-direction: column;
        justify-content: left;
        margin-left: clamp(3vh, 30px, 3vw);
        margin-top: clamp(1vh, 10px, 1vw);
    }
    
    #index_top_account {
        display: flex;
        flex-direction: column;
        justify-content: left;
    }

    #index_top_toggle {
        margin-top: clamp(1vh, 10px, 1vw);
        margin-bottom: clamp(1vh, 10px, 1vw);
    }
}



@media (min-width: 1000px) {
    /* Large screens */

    #home_card {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row-reverse;
        padding-left: clamp(4vh, 40px, 4vw);
        scroll-snap-align: center;
    }
    
    #home_card_image {
        width: 60vw;
        height: auto;
    }
    
    #home_editor {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        padding-left: clamp(4vh, 40px, 4vw);
        scroll-snap-align: center;
    }
    
    #home_editor_image {
        width: 60vw;
        height: auto;
    }

}

@media (max-width: 1000px) {
    /* Small Screens */

    #home_card {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        scroll-snap-align: center;
    }
    
    #home_card_image {
        width: 90vw;
        height: auto;
    }
    
    #home_editor {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        scroll-snap-align: center;
    }
    
    #home_editor_image {
        width: 90vw;
        height: auto;
    }

    #home_card_text, #home_editor_text {
        margin-left: clamp(2vh, 20px, 2vw);
    }

}