/* Define variables for your colors */
:root {
    --color-shades-dark: darkgreen;
    --color-highlight: black; }

@media (width >= 48rem) {
    nav {
        width: 100%
        grid-template-areas:
            "button button button"
            "links links links";
        grid-template-columns: 1fr 1fr 1fr 1fr;
        --nav-button-display: none;
        --nav-position: static; }

    nav > ul {
        --nav-list-layout: row;
        --nav-list-position: static;
        --nav-list-padding: 0;
        --nav-list-height: auto;
        --nav-list-width: 100%;
        --nav-list-shadow: none;
        --nav-list-visibility: visible; } }

nav {
    position: var(--nav-position, fixed);
    inset-block-start: 2.5rem;
    inset-inline-end: 3rem; }

/* Remove the default list styling and create a flexible layout for the list */
nav > ul {
    background: #FCFFF0;
    box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 20%));
    display: flex;
    flex-flow: var(--nav-list-layout, column) wrap;
    gap: 0.9rem;
    height: var(--nav-list-height, auto);
    list-style: none;
    margin: 0;
    padding: var(--nav-list-padding, 2rem);
    position: var(--nav-list-position, fixed);
    inset-block-start: 0; /* Logical property.  Equivalent to top: 0, */
    inset-inline-end: 0; /* Logical property.  Equivalent to right: 0, */
    transition: opacity 0.4s linear, visibilty 0.3s linear;
    visibility: var(--nav-list-visibility, visible);
    width: var(--nav-list-width, min(11rem, 100vw)); }

[aria-expanded="false"] + ul {
    visibility: var(--nav-list-visibility, hidden); }

/* Basic link styling */
nav > ul a {
    --text-color: var(--color-shades-dark);

    border-block-end: 3px solid var(--border-color, transparent);
    color: var(--text-color);
    padding: 0.1rem;
    text-decoration: none; }

/* Remove the default :focus outline */
nav *:focus {
    outline: none; }

/* Show a custom outline on :focus-visible */
nav *:focus-visible {
    outline: 2px solid var(--color-shades-dark);
    outline-offset: 4px; }

/* Change the border-color on :hover and :focus */
nav > ul a:where(:hover, :focus) {
    --border-color: var(--text-color); }

/* Change border-color and color for the active page */
[aria-current="page"] {
    --border-color: var(--color-highlight);
    --text-color: var(--color-highlight); }

/* Reset button styling */
nav > button {
    all: unset;
    display: var(--nav-button-display, flex);
    position: relative;
    z-index: 1; }