header {
    margin-block-start: -96px;
    display:grid;
    grid-template-columns: 0px 64px fit-content(128ch) auto 0px 0px 64px;
    height: 96px;
    position: fixed;
    border-bottom: 2px solid rgba(0, 0, 0, 0.02);
    background-color: rgba(256, 256, 256, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    width: 100%;
    z-index: 1;
    transition: height 0.3s;
    align-items: center;
}

header.index {
    grid-template-columns: 0px 64px 75ch auto 0px 0px 0px;
}

header.sticky {
    height: 64px;
    border-bottom: 0px solid rgba(0, 0, 0, 0.02);
    box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.05);
    grid-template-columns: 0px 64px 0px auto 0px 0px 64px;
}

header.index_sticky {
    height: 64px;
    border-bottom: 0px solid rgba(0, 0, 0, 0.02);
    box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.05);
    grid-template-columns: 0px 64px 0px auto 0px 0px 0px;
}

header img {
    max-width: calc(100% - 45%);
    justify-self: center;
    overflow: hidden;
}

header h1::after {
    content: " Frantiichuk │ 3D Generalist";
}

header a {
    max-width: 38px;
    justify-self: center;
    cursor: pointer;
}

canvas {
    padding-inline: 12px 0px;
    transform: scale(0.5) translateX(-64px) translateY(-32px);
    transition: transform 0.3s;
}

@media (pointer:none), (pointer:coarse) {

    #home{
        display:none;
    }
    
    header {
        width: 100vw;
        grid-template-columns: 64px 0px 0ch auto 64px 64px 0px;
        height: 64px;
    }

    header.index {
        grid-template-columns: 64px 0px 32ch auto 0px 0px 0px;
    }

    header.sticky {
        grid-template-columns: 64px 0px 0px auto 64px 64px 0px;
    }

    header.index_sticky {
        grid-template-columns: 64px 0px 0px auto 0px 0px 0px;
    }
    
    header h1 {
        font-size: 1.75rem;
        padding-block: 2px 0px;
        padding-inline: 8px 0px;
    }
    
    header h1::after {
        content: " | 3D";
    }

    header img {
        max-width: calc(100% - 30%);
    }
    
    canvas {
        display: none;
    }

}