/* if you're reading this out of curiosity, sorry for what you're going to find */
/* as is extremely apparent, i am a systems programmer not a webdev */

@import url("/iosevka.css");
@import url("/code.css");
@import url("/gallery.css");
@import url("/music.css");
@import url("/commission.css");

:root {
    --primary-color: #ED881D;
    --secondary-color: #A55F14;
    --background-color: #0E0013;
    --background-light-color: #280534;
    --background-highlight-color: #4d1561;
    --foreground-color: #FFFFFF;
    --foreground-faded-color: #BBBBBB;
    --writing-font: 'Iosevka Etoile', monospace;
    --mono-font: 'Iosevka Curly Slab', monospace;
}

body {
    background-color: var(--background-color);
    color: var(--foreground-color);
    font-family: var(--writing-font);
    padding: 0 25vw;
}

@media (width < 65em) {
    body {
        padding: 0 2em;
    }
}

a:link {
    color: var(--primary-color);
}

a:visited {
    color: var(--secondary-color);
}

.crumbs {
    border-bottom: 1px solid white;
}

.crumbs ol {
    list-style-type: none;
    padding-left: 0;
}

.crumb {
    display: inline-block;
}

.crumb a::after {
    display: inline-block;
    color: var(--foreground-color);
    content: '>';
    font-size: 80%;
    font-weight: bold;
    padding-left: 5px;
}

footer {
    font-size: 0.8em;
    margin-top: 2em;
}

.link-url {
    font-family: var(--mono-font);
    font-size: 0.9em;
    color: var(--foreground-faded-color);
}

main p {
    line-height: 1.5;
}

main ul li,
main ol li {
    line-height: 1.5;
}

#button_wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.p-center {
    text-align: center;
}