@font-face {
    font-family: 'Selectric';
    src: 
        url('/fonts/Selectric.ttf') format('truetype'),
        url('/fonts/SLC_.woff') format('woff'),
    }
    
@font-face {
    font-family: 'IBM Plex Sans';
    src: 
        url('/fonts/IBMPlexSans.ttf');
}

:root {
    --container-padding: 24px;
    --sidebar-width: 5rem;
    --sidebar-height: 5rem;
    --sidebar-padding: 0.5rem;

    --background-color: #101410;
    --container-color: #252924;
    --header-color: #9ed49d;
    --text-color: white;
    --link-color: #9ed49d;
    --pure-color: #1f4d53;
}

body {
    background-color: var(--background-color);
    margin: 0;
    height: 100vh;
    overflow: auto;
    color: var(--text-color);
    font-family: Selectric;
    font-size: medium;
    font-weight: 400;
    letter-spacing: -0.025rem;
    transition: all 1s;
}

h1 {
    color: var(--header-color);
    font-weight: 800;
}

h1.big {
    font-size: 400%; 
    margin: -0.25rem; 
    margin-bottom: 1rem;
}

p + p {
    margin-top: 1rem;
}

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

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

br {
    margin: 0px 4px;
}

section.container {
    background-color: var(--container-color);
    padding: 24px;
    box-shadow: 8px 8px var(--pure-color);
}

section.characterSheet {
    width: 40%;
}

@media only screen and (max-width: 40rem) {
    :root {
        --container-padding: 12px;
        --sidebar-width: 100vw;
        --sidebar-height: 64px;
        --sidebar-padding: 4px;
    }

    body {
        padding-top: 12px;
    }

    section.container {
        padding: 12px;
    }

    section.characterSheet {
        width: calc(100% - (2 * var(--container-padding)));
    }
}