/* 
    Header 
*/

.header {
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    margin: 0.875rem 0.5rem;
    transition: 300ms ease;
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .header {
        margin: 0.875rem 2rem;
    }
}

.header-hidden {
    display: none;
    pointer-events: none;
}

.header-title {
    grid-column: 1/-2;
    align-self: end;
}

.header-subtitle {
    grid-column: 1/-1;
    align-self: end;
    width: fit-content;
}

.header-projects {
    grid-column: 1/-2;
}

.header-about {
    grid-column: -2/-1;
    align-self: end;
    justify-self: end;
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .header-hidden {
        display: block;
        pointer-events: all;
    }
    
    .header-title {
        grid-column: 1/4;
    }
    
    .header-subtitle {
        display: block;
        grid-column: 4/-3;
    }

    .header-about {
        grid-column: -3/-1;
    }

    .header-projects {
        display: none;
    }
}

/* Skipper */
.skipper {
    position: absolute;
    left: -100%;
    z-index: 1;
}

.skipper:focus-visible {
    top: 0.5rem;
    left: 0.5rem;
}

.skip-btn {
    display: inline-flex;
    /* padding: 0.5rem 1.5rem; */
    padding: 0.4rem 1rem;
    align-items: center;
    justify-content: center;
    color: white;
    border: 1px solid transparent;
    border-radius: var(--rounded);
    background: black;
}