nav {
    margin-left: auto;
    padding: 1.5rem 3rem;
}
@media (width >= 1200px) {
    body > header {
        display: flex;
        place-items: center;
        place-content: center;
    }
}
body > header hgroup {
    padding: 1.5rem 3rem;
    text-shadow: 3px 3px light-dark(white, black);
}
body > header hgroup * {
    margin: 0;
    line-height: 1;
}
body > header hgroup p {
    font-size: 1rem;
}
body > header > nav ul {
    margin: 0;
    padding: 0;
}
body > header > nav li {
    display: block;
}
body > header nav a {
    color: light-dark(#0000ad, white);
    font-size: 18px;
}
@media (pointer: fine) {
        body > header nav a:not(a:hover) {
            text-decoration-color: transparent;
        }
    }
@media (width < 1200px) {
    body > header > nav {
        background: light-dark(#e3e3e3, #595959);
    }
    body > header > nav ul {
        justify-content: center;
    }
}
@media (width < 640px) {
    body > header > nav ul li {
        text-align: right;
        margin: 8px;
    }
    body > header nav {
        background: url("hancock2.png") no-repeat left, light-dark(#e3e3e3, #595959);
        background-position: left;
        background-size: clamp(2rem, 40vw, 9rem);
    }
}
@media (width >= 640px) {
    body > header nav ul {
        display: flex;
        gap: 40px;
    }
}