:root {

    /* Main */
    --background-color: #222;
    --text-color: #fff;

    --page-width-target: 50vw;
    --page-width-min: 400px;
    --page-margin: 10px;

    /* Top bar styling */
    --pfp-size: 4rem;

    --top-bar-color: #fff;
    --top-bar-line-size: 3px;

    --top-bar-gap: 20px;
    --top-bar-text-size: 12pt;

    /* Bottom bar styling */
    --bottom-bar-color: #555;
    --bottom-bar-line-size: 1px;

    /* Link styling */
    --link-color-plain: #08f;
    --link-color-visited: #aaf;
    --link-color-hovered: #0dd;

    /* Footer styling */
    --footer-height: 40px;
    --footer-gap: 20px;

    /* Calculated values; do not change */
    --pfp-border-radius: calc( ( var(--pfp-size) + 2 * var(--top-bar-line-size) ) / 2 );
    --top-bar-height: calc(var(--pfp-size) + var(--top-bar-line-size));
    --main-content-height: calc(100vh - var(--top-bar-height) - var(--footer-height) - 2 * var(--page-margin));

}

body {

    /* make the content go from top to bottom and have a static layout.
    The children will take care of the scrolling stuff */
    display: flex;
    flex-direction: column;
    
    height: 100vh;
    overflow-y: hidden;

    /* Sets the colors, duh */
    background-color: var(--background-color);
    color: var(--text-color);

    /* Sets the page width */
    min-width: var(--page-width-min);
    width: var(--page-width-target);

    /* Causes page content to be centered and have a nice margin at the top/bottom */
    margin: var(--page-margin) auto;
    padding: 0 var(--page-margin);

}

header {

    /* Makes the border connect seamlessly with the pfp */
    border-bottom-left-radius: var(--pfp-border-radius);
    border-top-left-radius: var(--pfp-border-radius);

    /* Makes a little rounding at the end of the title bar line */
    border-bottom-right-radius: calc(var(--top-bar-line-size)/2);

    /* General border styling */
    border-bottom-width: var(--top-bar-line-size);
    border-bottom-color: var(--text-color);
    border-bottom-style: solid;

    border-left-width: var(--top-bar-line-size);
    border-left-color: var(--text-color);
    border-left-style: solid;

    /* Orders items from left to right */
    display: flex;
    flex-direction: row;
    gap: var(--top-bar-gap);
    align-items: center;

    /* Sets the title's font size */
    font-size: var(--top-bar-text-size);

    /* Makes sure that items in the header don't change the header's size and mess up the pfp border alignment */
    height: var(--top-bar-height);

}

header img {

    /* Set pfp size */
    width: var(--pfp-size);
    height: var(--pfp-size);

    /* Creates a border around the pfp */
    border-radius: var(--pfp-border-radius);
    border-width: var(--top-bar-line-size);
    border-color: var(--top-bar-color);
    border-style: solid;

    /* This will make the pfp's border be inline with the header's bottom border */
    margin-bottom: calc(-1 * var(--top-bar-line-size));
    margin-left: calc(-1 * var(--top-bar-line-size));

}

header a:has(img) {

    /* If the header pfp is wrapped in a clickable link, center the bad boy */
    display: flex;
    align-items: center;
    justify-content: center;

}

main {

    margin: 0 calc(var(--pfp-size)/2);
    height: var(--main-content-height);
    overflow: scroll;
    scrollbar-width: none;

}

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

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

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

footer {

    /* Sets the footer height */
    height: var(--footer-height);
    overflow-y: hidden;

    /* Surrounds the footer and make it look nice :) */
    border-top: var(--bottom-bar-line-size) var(--bottom-bar-color) solid;
    border-bottom: var(--bottom-bar-line-size) var(--bottom-bar-color) solid;

    /* Makes content go left-right in the footer */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--footer-gap);

    /* This tomfoolery, as well as the footer>*:last-child shit is just so
    that the items are centered, but once there is too much and it would
    overflow, just start left and let the user scroll towards the right */
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
    white-space: nowrap;

}

footer>*:first-child {
    margin-left: auto;
}

footer>*:last-child {
    margin-right: auto;
}