.navmain{
    overflow: visible;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-wrap: wrap;
}

.navmain img {
    margin: 0;
    padding: 0;
    width: clamp(20px, 3vw, 300px);
    height: clamp(20px, 3vh, 300px);
}

.navmain ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navmain li{
    display: inline-flex;
    align-items: center;
}

.navmain a {
    color: var(--text-color-primary);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: clamp(0px, 17px, 25px);
    display: inline-block;
    margin-left: .5em;
    margin-right: .5em;
    padding-bottom: .2em;
    position: relative;

    justify-self: center;
    transform: translateY(0px);
    transition: transform .25s;
}

.navman a:hover{
    transform: translateY(-4px);
}

.navmain a:hover::after,
.navmain a:focus-visible::after {
    transform: scaleX(1);
}
 .navmain a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.05em;

    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s;

    width: 100%;
    height: 4px;

    background-color: var(--text-color-primary);
    border-radius: 999px; /* fully rounded ends */
} 

/* Simply removing the site links when the viewoport is too big */
/* Later i'll add some kind of conditional burger menu */
@media (max-width: 768px) {
    .site-links{
        display: none;
        visibility: hidden;
        width: 0px;
	background-color: brown;

    }
}