body
{
    display: flex;

    flex-direction: row;
    flex-wrap: wrap;

    background-attachment: fixed;
    background-repeat: repeat-x;
    background-clip: content-box;
    background-size: cover, inherit;

    padding: 0px;
    margin: 0px;

    font-family: Helvetica;

    height: min-content;

    justify-content: center;
}

/* ---------------------------------------------------------------------- */
/* Header */
/* ---------------------------------------------------------------------- */

header
{
    order: 1;
    flex-grow: 1;
    background-color: #000000;
    text-align: right;

    padding: 8px;
    margin: 0px;
    padding-right: 32px;

    flex-basis: 20%;
}

header a
{
    content:url("img/logo_sm.webp");
    max-width: 128px;
    max-height: 128px;
    margin: 0px;
    padding: 0px;
}

/* ---------------------------------------------------------------------- */
/* Navbar */
/* ---------------------------------------------------------------------- */

nav
{
    background-color: black;
    margin: 0px;

    display: flex;
    align-items: center;

    flex-grow: 1;
    flex-basis: 59%;
    order: 2;
}

nav ul
{
    display: inline-block;
    list-style: none;
    padding-left: 0px;
    width: 100%;
}
nav ul li
{
    display: inline-block;
    padding-bottom: 8px;
    padding-top: 8px;
}
nav ul li#rsslink
{
    float: right;
    padding-right: 16px;
}
nav ul li a
{
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    padding: 16px;
    border-radius: 4px;
}

nav ul li a:hover
{
    color: #000000;
    background-color: #FFFFFF;
}

nav h3 {
    display: none;
}

/* ---------------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------------- */

footer
{
    order: 7;
    width: 100%;
    background-color: #000000;
    color: #FFFFFF;

    text-align: center;
    font-size: 75%;
    padding: 32px;

    overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/* Side box thingies */
/* ---------------------------------------------------------------------- */

aside
{
    flex-basis: 10%;
    padding: 16px;
}

aside#recentArticles
{
    order: 6;
}

/* This just hides the "Recent Articles" text at the top of the column. Do we want that? */
/* aside#recentArticles h3
/* { */
/*     display: none; */
/* } */

aside h3
{
    padding: 0px;
    margin: 0px;
}

/* ---------------------------------------------------------------------- */
/* Recent articles section. */
/* ---------------------------------------------------------------------- */

aside#recentArticles dd {
    text-indent: 0em;
    margin-left: 0px;
}

aside#recentArticles dl dd p img {
    width: 100%;
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
}

aside#recentArticles dl dd {
    margin-bottom: 32px;
    margin-top: 0px;
}
aside#recentArticles dl dt {
    margin-bottom: 0px;
    margin-top: 0px;
}

/* ---------------------------------------------------------------------- */
/* Links */
/* ---------------------------------------------------------------------- */

a {
    color: #800080;
    font-weight: bold;
    text-decoration: none;
}

a:hover
{
    color: #000000;
    background-color: #FFFFFF;
}

a h1:hover
{
    color: #000000;
    background-color: #FFFFFF;
}

/* ---------------------------------------------------------------------- */
/* Main section */
/* ---------------------------------------------------------------------- */

main
{
    flex-basis: 50%;
    order: 4;
    padding: 16px;
}

/* Images from articles from the simple Markdown. */
main img
{
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: url("img/transparent_bg.png");
}

main hr
{
    display: none;
}

main h1
{
    margin: 0px;
}

/* ---------------------------------------------------------------------- */
/* Gallery stuff */
/* ---------------------------------------------------------------------- */

main img.gallery-thumbnail
{
    margin-left: 0px;
    margin-right: 0px;
    display: inline;

    max-width: none;
    margin-left: 1px;
    margin-top: 1px;
    background: url("img/transparent_bg.png");
}

main p.gallery-thumbnail-set
{
    margin-left: 0px;
    margin-right: 0px;
    display: block;
    margin-left: auto;
    margin-right: auto;

    line-height: 1px;

    background-color: black;
    padding-bottom: 1px;

    width: 736px;
}

/* ---------------------------------------------------------------------- */
/* Tables (using MD extension) */
/* ---------------------------------------------------------------------- */

table {
    margin: 16px;
}

thead {
    background-color: black;
}

tbody {
    background-color: #FFFFFF10;
}

td {
    padding-left: 8px;
    padding-right: 8px;
}

/* ---------------------------------------------------------------------- */
/* dl/dt in the articles page */
/* ---------------------------------------------------------------------- */

.articlesList {
    display: flex;

    flex-direction: column;
    flex-wrap: wrap;

    justify-content: space-evenly;
    align-items: stretch;
}

.articlesListArticle_text, .articlesListArticle_gallery {
    background-color: #00000080;
    margin-bottom: 16px;
    align-items: left;
    display: flex;
    flex-direction: row;
}

.articlesListBlurbText {
    flex-direction: column;
    align-content: left;
    align-items: top;
    margin-left: 16px;
}

.articlesListArticle_gallery {
    .articlesListArticle;

    /* max-height: 256px; */
    /* max-width: 256px; */
    /* max-width: 1024px; */

    flex-direction: row;
    align-content: left;
    align-items: top;
}

.articlesListArticle_gallery p {
    margin-top: 0px;
    margin-bottom: 8px;
}

.thumbnailArticleLink img {
    max-width: fit-content;
}

.articlesListArticle_gallery h2 {
    /* max-width: 256px; */
    /* flex-shrink: 1; */
    /* max-width: min-content; */

    /* text-overflow: ellipsis; */
    /* word-wrap: break-word; */
    /* overflow: hidden; */
    /* white-space: nowrap; */

    /* text-align: center; */
    margin-bottom: 8px;
    margin-top: 0px;
    /* margin-left: 16px; */
}

/* .articlesListArticle_text h2 { */
/*     text-align: center; */
/*     margin-bottom: 0px; */
/*     margin-top: 0px; */
/* } */

/* .articlesListArticle_text img { */
/*     text-align: center; */
/*     margin-bottom: 0px; */
/*     margin-top: 0px; */
/* } */

/* .articlesListArticle_gallery h2 { */
/*     order: 2; */
/* } */

/* .articlesListArticle_gallery img { */
/*     padding: 0px; */
/*     margin: 0px; */
/*     /\* margin-right: 100px; *\/ */

/*     order: 1; */
/*     width: 256px; */
/*     max-width: 256px; */
/*     /\* max-height: 256px; *\/ */
/*     /\* max-width: 256px; *\/ */
/*     /\* height: 100%; *\/ */
/*     /\* width: auto; *\/ */
/*     /\* height: 256px; *\/ */
/*     /\* width: auto; *\/ */

/*     /\* height: 256px; *\/ */
/*     /\* max-height: 128px; *\/ */
/*     /\* min-height: 128px; *\/ */

/*     /\* max-height: 100%; *\/ */
/*     /\* min-width: 100%; *\/ */
/*     /\* width: 100%; *\/ */
/*     /\* max-height: 100%; *\/ */
/*     /\* object-fit: cover; *\/ */
/*     /\* vertical-align: bottom; *\/ */
/* } */

/* ---------------------------------------------------------------------- */
/* Extremely boring mode */
/* ---------------------------------------------------------------------- */

/* a { */
/*     color: #606060; */
/* } */

/* ---------------------------------------------------------------------- */
/* Edgelord mode */
/* ---------------------------------------------------------------------- */

body {
    background: url("img/bg_splat.png");
    color: white;
    background-size: cover;
    background-attachment: fixed;
}

main
{
    background: #000000c0;
}

a {
    color: #FF8080;
}

aside {
    background: #00000080;
}

/* ---------------------------------------------------------------------- */
/* Synthwave mode */
/* ---------------------------------------------------------------------- */

/* body { */
/*     background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(114,76,170,1) 58%, rgba(152,0,106,1) 100%), black; */
/*     color: white; */
/*     background-size: cover; */
/*     background-attachment: fixed; */
/* } */

/* main */
/* { */
/*     background: #000000c0; */
/* } */

/* a { */
/*     color: #FF80D0; */
/* } */

/* aside { */
/*     background: #00000080; */
/* } */