/*
:root {
    --bg: #ede1d1;
    --text: #212120;
    --extra: #679c69;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #212120;
        --text: #ede1d1;
    }
}
*/

:root {
    --bg: #f7f5f5;
    --text: #121212;
    --extra: #4b5135;
    --external-link: url("/external-link-light.svg")
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121212;
        --text: #f7f5f5;
        --extra: #949c68;
        --external-link: url("/external-link-dark.svg")
    }
}

html {
    background-color: var(--bg);
    color: var(--text);
    font-family: sans;
}

body {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

body>* {
    width: min(800px, 95%);
}

h1 {
    font-size: xx-large;
}

h2 {
    font-size: x-large;
}

h3 {
    font-size: large;
}

a {
    color: var(--extra);
}

a:hover {
    color: var(--text);
}

a.external {
    background-image: var(--external-link);
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 1rem;

}

.external-link {
    transform: rotate(90deg);
    display: inline-block;
    margin: 0;
    position: relative;
    bottom: -0.2rem;
    user-select: none;
}

img,
.gallery {
    width: min(700px, 85vw);
    display: block;
    margin: 0 auto;
}

.gallery {
    display: flex;
    flex-flow: row wrap;
}

.gallery>a {
    width: 33%;
}

.gallery>a>img {
    margin: 0;
    width: 100%;
}

.buttons>img {
    width: 88px;
    height: 31px;
    display: inline-block;
}

ul {
    list-style-type: square;
    padding-left: 20px;
}

hr {
    border: 2px solid var(--extra);
}

dt {
    font-weight: bolder;
}

dd {
    line-height: 1.5rem;
}