/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section img {
    max-width: 100%;
}

/* page layout */

body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.skip-link {
    position: absolute;
    margin-top: -40px;
}

#first-nav, #second-nav {
    display: grid;
    grid-auto-rows: minmax(50px, auto);
    align-items: center;
}

#first-nav {
    grid-template-columns: 1fr 5fr;
}

#first-nav > nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
}

#second-nav > nav {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: right;
}

header > div {
    border-bottom: 1px solid;
}

header > div > nav > ul {
    display: contents;
}

p, ol, ul, h4 {
    margin-bottom: calc(4px + 3 * ((100vw - 280px) / 680));
}

header > div > nav > ul > li,
footer > nav > ul > li {
    display: inline;
}

p, li, a, button, td {
    font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1600 - 320)));
}

.nav-menu > li > a,
footer > nav > ul > li a {
font-size: calc(12px + 3 * ((100vw - 320px) / 680));
padding: 0.5vw 2vw;
}

.domain-nav a {
    color: #000;
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid transparent;
}

.domain-nav > ul > li > a[aria-current="page"] {
    background-color: #000;
    color: #fff;
}


/* side navigation */

.side-nav {
    display: flex;
    justify-content: flex-start;
    padding-top: 6vw;
    border-right: 1px solid #000;
}

.side-nav > ul > li {
    list-style-type: none;
    padding-bottom: 0.5vw;
}

.side-nav > ul > li > a {
    color: #000;
    text-decoration: none;
}


/* main content & article */

main {
    margin: 4vw 2vw;
    display: grid;
    grid-template-columns: 250px 1fr;
}

#main-content {
    padding-left: 3vw;
}



/* footer */

footer {
    padding-top: 1vw;
    border-top: 1px solid #000;
}