html {
    scroll-behavior: smooth;
    scroll-padding-top: 8rem;
}

body {
    background-color: snow;
    text-align: center;
    margin: 1rem;
    margin-top: 0rem;
}

header {
    margin: inherit;
    position: sticky;
    top: 0rem;
    background-color: inherit;
    border-top: 2rem solid snow;
    font-family: 'IBM Plex Serif', 'serif';
}

header > nav {
    border-top: 3px double skyblue;
    border-bottom: 3px double skyblue;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-auto-rows: minmax(50px, auto);
    column-gap: 10px;
    place-items: stretch stretch;
}

.nav-logo {
    align-content: center;
}

.nav-menu {
    display: flex;
    gap: 10px;
}

.nav-menu > span {
    flex: auto;
    align-content: center;
    transition: 0.3s;
}

.nav-menu > span:hover {
    background-color: lightblue;
}

a {
    color: inherit;
    text-decoration: none;
}

.nav-search {
    align-content: center;
}

.nav-side-menu {
    display: none;
}

main {
    margin: inherit;
    font-family: 'IBM Plex Serif', 'serif';
}

main > section {
    margin: 2rem;
}

section > p {
    font-style: italic;
}

#mobileMenu {
    interest-delay: 0.3s;
}

:popover-open {
    margin: 0;
    margin-top: 1rem;
    inset: auto;
    position-area: bottom;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 3px double skyblue;
    border-top-color: snow;
}

:popover-open > span {
    align-content: center;
    transition: 0.3s;
}

:popover-open > span:hover {
    background-color: lightblue;
}

footer {
    margin: inherit;
    padding: 2.5rem;
    border-top: 1px solid skyblue;
    font-family: 'Courier New', 'Courier', 'monospace';
}

@media all and (width <= 850px) {
    .nav-menu { display: none; }
    .nav-search { display: none; }
    .nav-side-menu { display: block; align-content: center; grid-column: 3; }
    html { font-size: 14px; }
}