*, *:before, *after {
    box-sizing: border-box;
}

body {
    background-color: rgb(16, 16, 16);
    color: rgb(160, 160, 160);
    margin: 0; 
    font-family: sans-serif;
}

.wrapper {
    width: 100%;
    height: 100vh;

    display: grid;
    grid-template-rows: 1fr auto;
}

.center-within {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer {
    margin: 0.5em;
}

div.links .link a {
    text-decoration: none;
    color: inherit;
}  

/*
 * Links listed horizontally (except on narrow screens; see later)
 */
div.links {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/*
 * Separate links with '|' (except on narrow screens; see later)
 */
div.links .link:first-child::before {
    /* No separator before first link */
    content: none;
}

div.links .link::before {
    /* Separator before all other links */
    content: '|';
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/* 
 * On narrow screens: list links vertically instead of horizontally; no separator between links
 */
@media (max-width: 600px) {
    div.links {
        flex-direction: column;
    }

    div.links .link::before {
        content: none;
        padding-left: inherit;
        padding-right: inherit;
    }
}