/* SETTINGS */
:root {
    /* Background Colors: */
    --bkgd-color: #f3e3d7;

    /* Text Colors: */
    --text-color: #ba7878;
    --sidebar-text-color: #936da2;
    --link-color: #EA7B81;
    --link-color-hover: #F09B93;

    /* Dark Mode Colors: */
    --bkgd-color-dark: #251C18;
    --text-color-dark: #FBF1E9;
    --sidebar-text-color-dark: #FDDAD8;
    --link-color-dark: #FAABA7;
    --link-color-hover-dark: #F8918B;
    --border-color-dark: #E5CFB7;

    /* Other Settings: */
    --font-size: 16px;
    --font-weight: 400;
    --margin: 16px;
    --padding: 24px;
    --border: 4px solid #ac8f96;
    --round-borders: 0px;
    --sidebar-width: 256px;
}

@font-face {
    font-family: 'heading-font';
    src: url(https://trollz-bottega.neocities.org/fonts/Pixelfy.ttf), sans-serif;
}

@font-face {
    font-family: 'heading-font-2';
    src: url(https://trollz-bottega.neocities.org/fonts/computer_pixel-7.ttf), sans-serif;
}

@font-face {
    font-family: 'text-font';
    src: url(https://trollz-bottega.neocities.org/fonts/rainyhearts.ttf), sans-serif;
}

@font-face {
    font-family: 'text-font-2';
    src: url(https://trollz-bottega.neocities.org/fonts/bold_dot_digital-7.ttf), sans-serif;
}

@font-face {
    font-family: 'sidebar-title';
    src: url(https://trollz-bottega.neocities.org/fonts/ci-gamedev.ttf), sans-serif;
}

/* -------------------------------------------------------- */
/* BASICS */

body {
    background-color: var(--bkgd-color);
    background-image: url("https://sadhost.neocities.org/images/tiles/ruututausta.gif");
    font-size: var(--font-size);
    margin: 0 16px;
    padding: 0;
    color: var(--text-color);
    font-family: text-font;
    line-height: 1.2;
    align-items: baseline;
}

::selection {
    background: rgba(0, 0, 0, 0.2);
}

a {
    text-decoration: underline;
}

a,
a:visited {
    color: var(--link-color);
}

a:hover,
a:focus {
    color: var(--link-color-hover);
    text-decoration: none;
}

li {
  list-style: none;
}

/* -------------------------------------------------------- */
/* LAYOUT */

.container {
    font-family: sans-serif;
    display: grid;
    grid-template-columns: auto;
    gap: 16px;
    grid-template-areas:
        "header header"auto 
        "aside content"auto 
        "footer footer";
}

header,
footer {
    border-radius: 5px;
    background-color: var(--bkgd-color-dark);
    color: var(--text-color);
    text-align: center;
    font-size: 1.6em;
    max-height: 32px;
}

header {
    grid-area: header;
}

aside {
    grid-area: aside;
    text-align: end;
    justify-content: right;
}

footer {
    grid-area: footer;
}

main {
    grid-area: content;
    display: grid;
    grid-template-rows: auto;
    gap: inherit;
    justify-content: left;
}

article {
    background-color: var(--bkgd-color);
    border-radius: 5px;
    max-width: 128px;
}