:root {
    --header-height:5rem;
}

header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:1rem;
    height:var(--header-height);

    display: flex;
    align-items: center;

    box-shadow: var(--thm-box-shadow);
    border-bottom:0.0625rem solid var(--thm-text);
    background:var(--thm-bg);

    pointer-events: none;
}
header nav,
header .logo {
    pointer-events: all;
}

header nav a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    gap:0.25rem;
    justify-content: center;
}
header nav a .text {
    display: inline-flex;
    align-items: center;
    color:var(--thm-text);
    font-size:1.15em;
    font-weight:400;
    transition:all 0.3s ease;
}
header nav a:hover .text { 
    color:var(--thm-blue);
    text-shadow: var(--glow-text-shadow);
}
header a svg {
    width:1.9rem;
    fill:var(--thm-text);
    filter:drop-shadow(var(--thm-text-shadow));
    -webkit-filter:drop-shadow(var(--thm-text-shadow));
    transition:all 0.3s ease;
}
header a:hover svg {
    fill:var(--thm-blue);
    filter:drop-shadow(var(--glow-text-shadow));
    -webkit-filter:drop-shadow(var(--glow-text-shadow));
}

header .logo svg {
    height:3rem;
    width:auto;
}


header nav {
    margin-inline:auto 0.5rem;
    display:flex;
    gap:1.5rem;
    flex-direction: row-reverse;
}

header .account > svg {
    width:2rem;
}
header .blasts > svg,
header .signups > svg {
    transform:translateY(0.175rem);
}

body > .content {
    position:fixed;
    width:100%;
    top:var(--header-height);
    bottom:0;
    overflow-y:auto;
}

body {
    overflow-y:hidden;
}
@media (max-width: 53rem) {
    header {
        top:0;
        left:0;
        height:100vh;
        height:100svh;
        flex-direction: column;

        box-shadow:none;
        border-bottom:none;
        padding:0;
        background:none;
    }

    header .logo {
        height:var(--header-height);
        display:flex;
        align-items: center;
        justify-content: center;

        box-shadow: var(--thm-box-shadow);
        border-bottom:0.0625rem solid var(--thm-text);
        padding:1rem;
        width:100vw;
        background:var(--thm-bg);
    }

    header nav {
        margin-inline:auto;
        margin-top:auto;
        margin-bottom:0;

        box-shadow: var(--thm-box-shadow);
        border-top:0.0625rem solid var(--thm-text);
        padding:1rem;
        width:100vw;
        background:var(--thm-bg);

        justify-content: center;
        display:grid;
        grid-template-columns: repeat(4, 7rem);
        height:calc(var(--header-height) - 1rem);
    }

    body > .content {
        bottom:calc(var(--header-height) - 1rem);
    }
}
@media (max-width: 36rem) {
    header nav {
        grid-template-columns: repeat(4, 1fr);
        gap:0;
        padding-inline:0;
    }
    header nav a .text {
        display:none;
    }
}