body > header {
    position:fixed;
    padding-top:var(--padding);
    transition: var(--transition);
}
body:not(#index) > header {
    position:sticky;
}
body > header > div {
    padding:calc(var(--padding) * 0.5) calc(var(--padding) * 1.5);
    transition: padding var(--transition);
}

body > header h1 {
    opacity:0;
    transition: var(--transition);
}
body > header h1 a {
    width:40px;
    display:flex;
    align-items: center;
}

body:is(.scrolled, :not(#index)) > header {
    background:var(--color-gray);
    box-shadow: var(--shadow);
    padding-top:0;
}
body:is(.scrolled, :not(#index)) > header > div {
    padding:0 calc(var(--padding) * 1.5);
}
body:is(.scrolled, :not(#index)) > header h1 {
    opacity: 1;
}

@media (max-width: 920px) {

}
@media (max-width: 720px) {

}
@media (max-width: 520px) {
    body > header {
        position:fixed !important;
        top:auto;
        bottom:0;
        padding-top:0;
        margin:0;
        width:100%;
    }
    body > header > div ,
    body:is(.scrolled, :not(#index)) > header > div {
        padding:0 var(--padding);
    }
}