@import url('/fonts/montserrat/stylesheet.css');
@import url('/fonts/norse/stylesheet.css');

:root {
    --color-obsidian-black: #0b0b0d;
    --color-charcoal-slate: #1a1a1f;
    --color-ash-grey: #2b2b33;

    --color-ethereal-violet: #6c4fa3;
    --color-arcane-teal: #4fb6b5;
    --color-moonlit-silver: #cfcfd4;

    --color-runic-gold: #c6a450;
    --color-blood-garnet: #b23a48;
    --color-dark-blood-garnet: #632028;
    --color-phantom-indigo: #2f1e4c;
}
body {
    margin: 0;
    padding: 1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    background-color: var(--color-phantom-indigo);
    color: var(--color-moonlit-silver);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Norse';
    font-weight: 800;
    color: var(--color-ethereal-violet);
}
h1 {
    font-size: 4em;
}
h2 {
    font-size: 3em;
}
h3 {
    font-size: 2em;
}
a.link {
    color: var(--color-arcane-teal);
    text-decoration: none;
}

a.file {
    color: var(--color-runic-gold);
    text-decoration: none;
}
a.text {
    color: var(--color-blood-garnet);
    text-decoration: none;
}
.error {
    background-color: var(--color-blood-garnet);
    border: 2px solid var(--color-dark-blood-garnet);
    border-radius: 0.5em;
    padding: 1em;
    width: 50%;
}

label {
    display: block;
    margin-top: 1em;
    font-size: 1.2em;
    vertical-align: top;
}

input,
textarea,
button {
    padding: 0.5em;
    margin-top: 0.5em;
    border: 2px solid var(--color-ash-grey);
    border-radius: 0.3em;
    background-color: var(--color-charcoal-slate);
    color: var(--color-runic-gold);
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
}
button {
    color: var(--color-arcane-teal);
}
textarea {
    height: 200px;
}

.obelisk input,
.obelisk textarea,
.obelisk button {
    width: 800px !important;
}

.tag {
    background-color: var(--color-blood-garnet);
    color: var(--color-moonlit-silver);
    text-decoration: none;
    font-size: 0.75em;
    margin: 0.5em;
    border-radius: 0.25em;
    padding: 0.125em;
    cursor: pointer;
}

a.obelisk {
    color: var(--color-arcane-teal);
}

@media (pointer: coarse) {
    html {
        font-size: 1.5em;
    }
    li {
        padding: 0.5em;
    }
}