:root {
    --background: #13092b;
    --background-2: #090f2b;
    --foreground: #ddd;
    --accent: #f9027a;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background);
    background-attachment: fixed;
    background-position: center;
    color: var(--foreground);
    margin: 0;
}

.page-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: 100vw;
    min-height: 100vh;
}

.content {
    margin: 16px;
    padding: 8px 16px;
    width: calc(100vw - 32px);
    max-width: 720px;
    /* flex: 1; */
    background-color: var(--background-2);
    border: 1px solid var(--accent);
    border-radius: 4px;
}

.file-content {
    background-color: white;
    width: 100%;
}

iframe.file-content {
    resize: vertical;
}

a {
    color: inherit;
}

.nav-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
}

.nav-button {
    flex: 1;
    display: grid;
    place-content: center;
    padding: 8px 0;
    text-decoration: none;
}

.nav-button:hover {
    text-decoration: underline;
}

.footer {
    margin-bottom: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.icon-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.icon-row > * {
    margin-right: 16px;
}
.icon-row svg {
    transition: fill 200ms ease;
    fill: white;
}
.hover-email:hover {
    fill: var(--accent);
}
.hover-discord:hover {
    fill: #5865F2;
}
.hover-github:hover {
    fill: #24292f;
}
.hover-mastodon:hover {
    fill: #3c99dc;
}
.hover-reddit:hover {
    fill: #ff4500;
}
.hover-twitch:hover {
    fill: #6441a5;
}
.hover-twitter:hover {
    fill: #00acee;
}
.hover-code:hover {
    fill: #3a86ff;
}
.icon {
    height: 1.2em;
    fill: var(--foreground-dim);
    vertical-align: sub;
}