:root {
    --white: #FFFFFF;
    --light-gray: #989898;
    --black: #000000;
    --red: #CD1818;
    --purple: #6A00A3;

    --font-semibold: 600;

    --text: var(--light-gray);
    --back: var(--black);
    --fore: var(--red);

    --top-pad: 15dvh;
    --sub-h-size: 1.25rem;
    --sub-li-size: 1.25rem;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    color: var(--text);
    background-color: var(--back);
}

.container {
    width: 80%;
    min-width: 280px;

    margin-left: auto;
    margin-right: auto;

    padding-top: var(--top-pad);
}

main nav {
    margin-top: 1rem;
}

main nav section {
    margin-bottom: 2rem;
}

main nav section h2 {
    margin-bottom: 0.75rem;

    font-size: var(--sub-h-size);
    text-align: center;
}

#professional h2::after {
    content: '';
    border-radius: 50%;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5em;
    background-color: var(--red);
}

#personal h2::before {
    content: '';
    border-radius: 50%;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5em;
    background-color: var(--purple);
}

h1.title {
    font-weight: var(--font-semibold);
    font-size: 2.5rem;
}

@media (min-width: 640px) {
    :root {
        --sub-h-size: 1.5rem;
        --sub-li-size: 1.5rem;
        --top-pad: 20dvh;
    }

    .container {
        display: flex;
    }

    h1.title {
        font-size: 3.75rem;
    }

    aside {
        width: 20%;
    }

    aside h1 {
        font-size: 2rem;
    }
}

@media (min-width: 768px) {
    h1.title {
        font-size: 4.5rem;
    }
}

main .links {
    display: flex;
    justify-content: center;

    font-family: 'Ubuntu Mono', monospace;
    font-size: var(--sub-li-size);
}

.links li + li {
    margin-left: 0.75rem;
}

.links li a {
    border-radius: 0.25rem;
    transition: background-color 0.333s, padding 0.333s;
}

.links li a:hover {
    padding: 0.25em;
    color: white;
    transition: background-color 0.333s, padding 0.333s;
}

#professional .links li a:hover {
    background-color: var(--purple);
}

#personal .links li a:hover {
    background-color: var(--red);
}

aside h1 {
    text-align: center;
    font-size: 1.75rem;
}

aside ul {
    margin-top: 1rem;
}

aside ul li {
    font-size: 1.25rem;
    text-align: center;
}

aside ul li + li {
    margin-top: 0.5rem;
}

aside ul li a {
    text-decoration: underline;
    color: var(--red);
}