campfire/src/app.css

@import url("../font/inter/inter.css");

:root {
    --bg-1000: #fffcf7;
    --bg-900: #faf4e4;
    --bg-800: #f2e8d7;
    --bg-700: #d9ccad;
    --bg-600: #edf5ba;
    --accent: #92a40a;
    --text: #322e1f;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-1000: #0b090c;
        --bg-900: #120d14;
        --bg-800: #2A202F;
        --bg-700: #443749;
        --bg-600: #513D60;
        --accent: #CDA1EC;
        --text: #E2DFE3;
    }
    .light-only {
        display: none
    }
}

@media screen and (prefers-color-scheme: light) {
    .dark-only {
        display: none
    }
}

body {
    margin: 0;
    padding: 0;

    color: var(--text);
    background-color: var(--bg-1000);

    font-family: "Inter", sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */

    box-sizing: border-box;
}

@supports (font-variation-settings: normal) {
    body {
        font-family: InterVariable, sans-serif;
    }
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#app {
    margin: auto 0;
    padding: 0 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
}

header, #widgets {
    width: 300px;
}

main {
    width: 700px;
}

img.emoji {
    height: 1.2em;
    margin: -.2em 0;
}

hr {
    border-color: color-mix(in srgb, transparent, var(--accent) 50%);
}

.throb {
    animation: .25s throb alternate infinite ease-in;
}

@keyframes throb {
    from {
        opacity: .5;
    }
    to {
        opacity: 1;
    }
}