:root{
    --accent_color: rgb(251,167,0);
}



/* Hero */
#hero h1, #hero h2, #hero p{
    color: var(--light_yellow);
}

#body_container{
    padding-top: 0;
}

#background_container{
    margin-left: calc(-1 * var(--standard_spacing));
    margin-top: calc(-1 * var(--standard_spacing));
    margin-bottom: calc(-1 * var(--standard_spacing));
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
    #background_container video {
        width: 110%;
        height: 110%;
        margin-left: -20px;
        margin-top: -20px;
        object-fit: cover;
        transition: filter 0.5s ease-in-out;
    }

    #kabk_logo_container{
        position: sticky;
        top: 0;
        left: 0;
        height: calc(100vh - 2*(var(--standard_spacing)));
        width: var(--narrow_width);
        margin-top: calc(-1 * 100vh);
        padding-top: var(--standard_spacing);
    }
        #kabk_logo{
            width: 12vw;
            height: 12vw;
        }

#intro_container{
    height: calc(100vh - 2*(var(--standard_spacing)));
    margin-left: var(--standard_spacing);
}
    #introText_container p{
        max-width: none;
    }
    #intro_container .link_box{
        border-color: var(--light_yellow);
    }





header{
    position: sticky;
    margin-left: calc(-1 * var(--standard_spacing));
    gap: var(--xsmall_spacing);
}
    #graduation_btn{
        margin-right: var(--small_spacing);
    }



#graduation_section{
    padding-top: var(--standard_spacing);
    margin-top: 0;
}
    #grad_gif{
        width: 30vw;
    }




.project_container:hover{
    cursor: pointer;
    background-color: var(--accent_color);
}







@media only screen and (max-width:900px) {

    #kabk_logo_container{
        position: static;
    }

    #kabk_logo_container,#kabk_logo{
        height: 30vw;
        width: 30vw;
    }
        #kabk_logo_container{
            margin-left: calc((var(--full_width)-30vw));
        }

    #intro_container{
        margin-left: 0;
    }
        #inside_logo{
            margin-bottom: var(--standard_spacing);
        }





    header{
        margin-top: -15px;
    }
        #graduation_btn{
            margin-right: 0;
        }
    #mobile_menu_toggle{
        left: -50px;
    }


    #graduation_section{
        padding-top: var(--medium_spacing);
        margin-top: 0;
    }
        #grad_gif{
            width: var(--full_width);
            height: auto;
            max-width: none;
            max-height: none;
        }

}