/* Settings for all visible content. */

body {
    font-family: mono;
    color: #ffffff;
    background-image: url('stars.jpg');
}

a {
    color: inherit;
}

a:hover {
    text-decoration: none;
}

/*
    Top-Level Content Container.

    Everything that isn't background. Composed of...
    - Nav-Bar (aside with nav links).
    - Main (readable content).

    Controls how these bigger elements look together.
*/

.content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

/* Navigation Bar */
.navbar {
    width: 200px;
    height: auto;
    padding: 10px;

    background: #222222;
}

.navbar > * {
    margin: 0; /* Compactify children. */
}

/*
    Main Content.

    For this page, share/showcase interesting stuff!
*/

.main {
    width: 800px;
    padding: 10px;

    background: #222222;

    display: flex;
    flex-direction: column;
    gap: 1em;
}

.main > * {
    margin: 0; /* Compacts everything. */
}

.main-card {
    border: 1px solid black;
    padding: 1em;
}