/* color gradings */
:root {
    --bg: white;
    --bg-primary: #000000e0;
    /* --bg-primary: #4e2c00e0; */
    --clr: #3e514f;
    --clr-primary: #ffffff;
    --clr-highlight: white;
    --clr-link: #00b986;
    --primary-layer: #00000042;
}

body {
    letter-spacing: 0.3px;
    background-color: var(--bg);
    color: var(--clr);
}


.font-mono { font-family: monospace; }
.font-system-ui { font-family: monospace; }

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


/* some resets */
img, video, iframe {
    max-width: 100%;
}


input[type=submit] {
    background: var(--bg-primary);
    color: var(--clr-primary);
}

.link {
    color: #03978a;
    font-size: 0.9rem;
    background: #f4f2f2;
    padding: 0.2rem 0.5rem;
    border-radius: 0.2rem;
}

    .link:hover {
        background: #365a60ba;
        color: white;
        transition: background 0.2s;
    }