t-header{
    position: sticky;
    top: 0;
    z-index: 100;
}

header {
    background: rgba(240,246,255,0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #c2daf8;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    & .logo {
        font-family: 'Space Mono', monospace;
        font-size: 1.5rem;
        color: #022E5B;
        letter-spacing: -1px;
        text-decoration: none;
        & span { 
            color: #499BED; 
        }
    }

    & nav { 
        display: flex; gap: 1.5rem; align-items: center; 
        & a{
            color: #022E5B;
            text-decoration: none;
            font-size: 1rem;
            opacity: 0.6;
            transition: opacity 0.2s, color 0.2s;
            &:hover { opacity: 1; color: var(--blue); }
        }

    }
}

@media(orientation: portrait){
    header {padding: 0 0.5rem;}
}
@media(orientation: landscape){
    header {padding: 0 2rem;}
}