/* fonts */
@font-face {
    font-family: "JetBrainsMono";
    src: url("/assets/fonts/JetBrainsMono-VariableFont_wght.ttf") format
        ("truetype");
    font-weight: 100 900;
}

@font-face {
    font-family: "YoungSerif";
    src: url("/assets/fonts/YoungSerif-Regular.ttf") format ("truetype");
}

body {
    font-family: YoungSerif, serif;
}

/* colors */
:root {
    --color-light: #ebe0d8;
    --color-dark: #202020;
    --color-blue: #586f86;
    --color-orange: #ba5c12;
    --color-red: #ad2831;
    --color-olive: #778472;
    --color-overlay: #414141;
    --color-overlay2: #c4b3a9;
}

/* dark mode */
body {
    background-color: var(--color-dark);
    color: var(--color-light);
}

.overlay {
    background-color: var(--color-overlay);
}

#dm-toggle {
    color: var(--color-light);
}

/* light mode */
body.light {
    background-color: var(--color-light);
    color: var(--color-dark);
}

body.light .overlay {
    background-color: var(--color-overlay2);
}

body.light #dm-toggle {
    color: var(--color-dark);
}

/* constant colors */
a:link,
a:visited,
a:active,
a:hover {
    color: var(--color-blue);
}

/* css classes */
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

p {
    margin: 2px;
}

.content {
    font-family: JetBrainsMono, monospace;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay {
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
}

#dm-toggle {
    padding: 0;
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    border: none;
    background-color: transparent;
}