@keyframes slideDown {
    from {
        transform: translateY(-20vh);
    }
    to {
        transform: none;
    }
}
header {
    height: 10vh;
    padding: 1.5vmax 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideDown 1s ease-out;
}
header h3 {
    color: var(--colorSecondary);
    font-family: 'Chau Philomene One';
    font-size: max(2.2vh, 1.9vw);
    letter-spacing: 0.2ch;
}
header nav {
    display: flex;
    align-items: center;
    gap: max(1.5vh, 3.5vw);
}
header nav a {
    font-size: max(1.5vh, 1.2vw);
    color: var(--colorSecondary);
    text-decoration: none;
    transition: all 0.3s;
}
header nav a.current {
    font-weight: 700;
}
header nav a:hover {
    cursor: pointer;
    opacity: 0.6;
    text-decoration: underline;
}
header nav a.current:hover {
    opacity: 1;
    text-decoration: none;
}

@media only screen and (max-width:450px) {
    header {
        height: 20vh;
        flex-direction: column;
        justify-content: center;
        gap: 5vmax;
    }
    main {
        min-height: 80vh !important;
    }
}