body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}

.page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    grid-gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "aside"
        "main";
    background-color: var(--s-background);
}

.aside {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    grid-gap: 1rem;
    grid-template-areas:
        "title"
        "subtitle"
        "form"
        "a-nav"
        "a-social";
    grid-area: aside;
    background-color: var(--p-background);
    justify-items: center;
    align-content: start;
    padding: 1rem 0px;
    color: var(--aside-text);
}
.title { grid-area: title; }
.subtitle { grid-area: subtitle; }
.form { grid-area: form; }
.a-nav { grid-area: a-nav; }
.a-social { grid-area: a-social; }
.main {
    grid-area: main;
    color: var(--text);
}

a {
    cursor: pointer;
    color: var(--link);
    text-decoration: none;
}

a:visited {
    color: var(--link-visited);
}

a:hover {
    color: var(--link-hover);
}

input[type="search"] {
    background: var(--p-background);
    color: var(--search-text);
    width: 100%;
    border-bottom: 1px solid var(--border);
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-radius: 0px;
    padding: 0.4rem 0.4rem;
    outline: none;
    box-shadow: none;
}

.search-box {
    text-align: center;
}

.aside h1 {
    margin: 1rem 0 0.5rem;
}

.aside > nav > ul {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-gap: 1rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
    justify-items: center;
    align-items: center;
}

.aside p {
    margin: 0px 0px 1rem;
    font-size: 0.95rem;
}

.main nav {
    text-align: center;
    text-transform: uppercase;
    padding: 1rem 0px;
    border-bottom: 1px solid var(--border);
}

.main nav a {
    font-size: 0.8rem;
    padding: 0 0.2rem;
}

.main article {
    margin: 0 8% 2%;
}

.main footer.credits {
    display: grid;
    justify-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.main footer.credits p {
    display: block;
    text-align: center;
    margin: 0;
    padding: 0;
}

hr {
    border: 1px solid var(--border);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .page {
        display: block;
    }
    .aside {
        width: 25vw;
        height: 100vh;
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
    }
    .main {
        min-height: 100vh;
        position: relative;
        padding-left: 25vw;
    }
    .main article {
        max-width: 760px;
    }
}