nav {
    display: grid;
    position: fixed;
    top: var(--body-margin);
    left: var(--body-margin);
    grid-template-columns: repeat(2, 1fr);
    width: calc(100vw - var(--body-margin) * 2);
    z-index: 100;
    gap: 1em;
    font-size: var(--font-size)
}

nav h1 {
    transition: all var(--animation-speed) ease-in-out;
    color: var(--left-color);
    width: fit-content;
}

@media (width < 960px) {
    nav {}

    nav h1:nth-of-type(2) {
        display: none;

    }

}


nav>h1 {
    opacity: 0;
    transform-origin: top left;

    animation: introduction .5s ease-in-out 0s 1 forwards;
}


nav>h1:nth-of-type(2) {}

@keyframes introduction {
    0% {

        opacity: 0;
    }

    100% {

        opacity: 1;
    }

}

@keyframes introductiontext {
    0% {

        transform: scale(33);
    }

    100% {

        transform: scale(1);
    }

}