:root {
    --x-text-color: #EEEEEE;
    --x-theme-color: #FFEEAA;

    font-family: Arial, Helvetica, sans-serif;
}

body {
    color: var(--x-text-color);
    margin: 0px;
    padding: 0px;
    line-height: 1.47em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 5px 0px;
    color: var(--x-theme-color);
}

hr {
    border-color: var(--x-theme-color);
}

nav a {
    padding: 0px 5px;
}

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

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

a:visited {
    color: var(--x-theme-color);
}

header {
    z-index: 1337;
    position: sticky;
    top: 0px;
    border-bottom: 1px solid var(--x-theme-color);

    display: flex;
    align-items: center;
}

main {
    border: 1px solid var(--x-theme-color);
    border-radius: 20px;
    width: 66%;
    margin: 10px auto;
    padding: 10px 20px;
    min-height: 100vh;
}

footer {
    z-index: 1337;
    position: sticky;
    bottom: 0px;
    border-top: 1px solid var(--x-theme-color);

    display: flex;
    align-items: center;
}

.page-block {
    background-color: #000000BF;
}

.header-item {
    padding: 5px 10px;
    flex: 30%;
}

.header-item:nth-of-type(2) {
    text-align: center;
}

.header-item:nth-of-type(3) {
    text-align: right;
}

.footer-item {
    padding: 5px 10px;
    flex: 30%;
}

.footer-item:nth-of-type(2) {
    text-align: center;
}

.footer-item:nth-of-type(3) {
    text-align: right;
}

#background {
    z-index: -1337;
    position: fixed;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#twitter-feed {
    display: inline-block;
    max-height: 666px;
    overflow: auto;
    width: 33%;
}

#discord-widget {
    display: inline;
}

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

    .header-item {
        flex: 100%;
    }

    .footer-item {
        flex: 100%;
    }
}