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

body {
    margin: 0;
}

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        display: flex;
        flex-direction: column;
        align-items: center;
    }

    a {
        padding-inline: 2rem;
        padding-block: 1rem;
        display: inline-block;
        color: inherit;
        text-decoration: none;
        transition: color .2s ease-in-out, background-color .2s ease-in-out;

        &:hover,
        &:focus-visible {
            color: var(--primary);
        }
    }

    li:first-child {
        a {
            background-color: var(--hf);
            font-weight: bolder;
            font-size: var(--logo);
        }
    }
}

img {
    height: 30rem;
    width: auto;
    margin-top: 1rem;
}

header {
    background-color: var(--hf);
    color: var(--bg);
}

pre {
    padding: 0;
    margin: 0;
    background-color: var(--secondary);
    color: #ffffff;

    code {
        padding: 0;
        margin: 0;
    }
}


footer {
    background-color: var(--hf);
    color: var(--bg);
    margin-top: 6rem;

    a {
        text-decoration: none;
        color: var(--bg);
    }
}

.link {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}

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