:root {
    --text-color: #f0f0f0;
    --element-accent-color: #ea6154;
    --element-hover-color: #1f58a1;
    --card-color: #0f0f0f;
    --card-color-light: #1f1f1f;
    --background-color: #0f0f0f;
}

@font-face {
    font-family: 'Terminess';
    src: url(/content/font/TerminessNerdFont-Regular.ttf);
}

html * {font-family: Terminess; color: var(--text-color);}
img    {max-width:100%; border-radius: 16px; margin: 0 auto;}
button {border: 0;}
footer {margin-top: auto}

body

{
    user-select: none;
    background-attachment: fixed;
    background-color: var(--background-color);
    background-image: url("background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 16px;
    line-height: 1.4;
    padding: 32px;
}

h1

{
    color: var(--element-accent-color);
    text-align: center;
    text-anchor: middle;
}

a

{
    color: var(--element-accent-color);
    font-weight: bold;
    text-decoration: none;
}

.icon {border-radius: 50%; border: 5px solid var(--element-accent-color);}

.link {float: right; border-radius: 8px; padding-right: 4px; padding-left: 4px;}
.link:hover {background-color: #000000;}

.spacer-horizontal

{
    align-content: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.card, .button, .page-function, .downloads-card, .feedback-comment, .feedback-form

{
    border-radius: 16px;
    color: var(--text-color);
    font-size:     20px;
    margin-bottom: 8px;
    margin-top:    8px;
    padding:       24px;
}

.button, .page-function, .comment

{
    flex: 1;
    font-weight: bold;
    margin-right: 8px;
    margin-left:  8px;
    text-align: center;
    text-decoration: none;
}

.card                {background-color: var(--card-color);}
.button              {background-color: var(--element-accent-color);}
.page-function       {background-color: var(--card-color);}
.button:hover        {background-color: var(--text-color); color: var(--element-hover-color);}
.page-function:hover {background-color: var(--text-color); color: var(--card-color);}

.downloads-card

{
    background-color: var(--card-color-light);
    margin: 4px 4px 4px 4px;
}

.feedback-form

{
    color: var(--card-color);
    resize: none;
    width: 100%;
    box-sizing: border-box;
}

.feedback-comment

{
    margin: 0px;
    background-color: var(--card-color-light);
    text-align: left;
    user-select: text;
}