/*
@font-face {
    font-family: "Sansita Swashed";
    src: url(assets/fonts/sansita-swashed.woff2);
}
*/
@font-face {
    font-family: "Josefin Sans";
    src: url(assets/fonts/josefin-sans.woff2);
}
@font-face {
    font-family: "Azaret Mono";
    src: url(assets/fonts/azaret-mono.woff2);
}

:root {
    --bg0: #24244f;
    --bg1: #5050b1;
    --button: ;
}

body {
    margin: 0px;
    background-color: #24244f;
    background-image: url(assets/images/clouds.webp);
    background-repeat: repeat;
    background-position: 0 0;
    background-attachment: fixed;
}

article {
    max-width: 960px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

section {
    background-color: #373780c5;
    backdrop-filter: blur(5px);
    padding: 2em;
    margin: 2em;
    border-radius: 1em;
}

@media (width <= 500px) {
    section {
        margin-left: 1em;
        margin-right: 1em;
    }
}

h2 {
    color: white;
    font-family: "Josefin Sans", sans-serif;
    font-size: 32px;
    font-weight: bold;
    margin-top: 0px;
    text-align: center;
}

p,
details,
li,
td,
th,
img {
    font-family: "Josefin Sans", sans-serif;
    color: white;
    font-size: 18px;
}

a {
    color: #e38242;
    text-decoration: underline;
}

table {
    padding: 4px;
    column-gap: 0px;
    border-spacing: 0px;
    width: 100%;
}
td {
    padding: 0px;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

ul {
    padding-left: 0px;
    list-style: none;
}
li {
    padding: 4px;
}

th {
    font-weight: bold;
}

video {
    width: min(100%, 500px);
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2em;
}

.leftright {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2em;
}
.leftright:nth-child(2n) {
    flex-direction: row;
}
.leftright:nth-child(2n+1) {
    flex-direction: row-reverse;
}
.leftright p {
    flex: 1;
    min-width: 300px;
}
.leftright img {
    flex: 1;
    min-width: 300px;
    height: unset;
    box-sizing: border-box;
}

.cols {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2em;
}
.cols > div {
    min-width: 200px;
    flex: 1;
}
.cols img {
    width: 100%;
    height: unset;
}

details {
    padding: 0.3em;
    width: 100%;
    box-sizing: border-box;
    margin: 0.3em;
    background-color: #0003;
}
summary {
    padding-left: 0.5em;
    user-select: none;
    cursor: pointer;
}
summary h3 {
    display: inline-block;
    margin: 0px;
}

.centerbox {
    width: min(500px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.dlbutton {
    padding: 4px;
    background-color: #0003;
    height: 24px;
    display: block;
    text-align: center;
}
.dlbutton:hover {
    background-color: #fff3;
}

.linkbutton {
    padding: 4px;
    color: white;
    text-decoration: none;
    background-color: #0003;
    display: block;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
}
.linkbutton:hover {
    background-color: #fff3;
}
.linkbutton span {
    vertical-align: sub;
}
.linkbutton img {
    float: right;
}

.marked-row {
    background-color: #3f33;
}

img.cover {
    width: 100%;
    height: unset;
}

pre {
    display: inline;
    font-size: 10pt;
    font-family: "Azaret Mono", monospace;
}

footer {
    backdrop-filter: blur(5px);
    background-color: #373780c5;
    border-radius: 1em 1em 0px 0px;
    color: rgb(202, 202, 202);
    margin: 2em 2em 0px 2em;
    padding: 1em;
    text-align: center;
}
footer p {
    margin: 0px;
}