html {
    font-size: 3.538vw;
}

html:has(body > header > nav.show) {
    overflow: hidden;
}

body > header > h1 {
    font-size: 1.8em;
}

body > header > nav {
    visibility: hidden;
    display: block;
    height: 0;
    width: 0;
    transition: width .2s ease-in-out;
}

body > header > nav::before {
    position: absolute;
    top: 0;
    right: 2rem;
    display: flex;
    align-items: center;
    height: 6.6rem;
    visibility: visible;
    content: '\f0c9';
    font: var(--fa-font-solid);
    font-size: 2rem;
    cursor: pointer;
}

body > header > nav.show {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    visibility: visible;
    width: 100%;
    height: 100vh;
    padding: 5rem 0 0;
    background: rgba(255, 255, 255, 0.95);
    transition: width .2s ease-in-out;
}

body > header > nav.show::before {
    content: '\f00d';
}

body > header > nav > a {
    width: 100%;
    padding: 1.3rem 1.4rem;
}

body > main {
    margin: 0;
    padding: 0 0.5rem;
    width: calc(100% - 1rem);
}

body > main > figure {
    margin: 0 -0.5rem;
}