/* SPECIAL */
:root {
    --x-text-color: #EEEEEE;
    --x-accent-color: #BAB1E5;
}

::selection {
    background-color: var(--x-accent-color);
    color: #691337;
}

/* ELEMENTS */
body {
    margin: 0px;
    padding: 0px;
    color: var(--x-text-color);
    background-color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    word-spacing: 1pt;
    line-height: 1.47em;
}

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

a:hover,
a:active,
a:focus {
    text-decoration: underline;
}

header {
    display: flex;
    border-bottom: 1px solid var(--x-accent-color);
}

nav {
    text-align: right;
    padding: 15px;
}

nav a {
    padding: 10px;
}

main {
    padding-bottom: 20px;
}

footer {
    display: flex;
    border-top: 1px solid var(--x-accent-color);
}

/* CLASSES */
.header-area {
    flex: 1;
}

.footer-area {
    flex: 1;
}

/* INDIVIDUAL */
#content {
    max-width: 50%;
    margin: 0px auto;
    word-break: break-word;
}

#header-right {
    align-self: flex-end;
}

#footer-right {
    align-self: flex-end;
}

@media (max-width: 720px) {
    #content {
        max-width: 90%;
    }

    footer {
        display: block;
    }
}