@media screen and (min-width: 768px) {
    html {
        font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    }
    .nav {
    max-width: 1024px;
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}
.nav > .nav-logo > img {
    width: 100px;
}
.nav > nav {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
}
.nav > nav > a {
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
}
.link-red:hover {
    background-color: rgb(255, 60, 60);
    color: #222;
    transition: 0.5s;
    font-weight: 600;
}
.link-blue:hover {
    background-color: rgb(60, 89, 255);
    color: #222;
    transition: 0.5s;
    font-weight: 600;
}
.link-green:hover {
    background-color: rgb(0, 128, 21);
    color: #222;
    transition: 0.5s;
    font-weight: 600;
}
.link-yellow:hover {
    background-color: rgb(242, 255, 60);
    color: #222;
    transition: 0.5s;
    font-weight: 600;
}
.link-orange:hover {
    background-color: rgb(255, 170, 60);
    color: #222;
    transition: 0.5s;
    font-weight: 600;
}
.banner {
    height: 800px;
}
}