:root {
    --crust: rgb(17, 17, 27);
    --mantle: rgb(24, 24, 37);
    --base: rgb(30, 30, 46);
    --surface-0: rgb(49, 50, 68);
    --surface-1: rgb(69, 71, 90);
    --overlay-0: rgb(108, 112, 134);
    --overlay-1: rgb(127, 132, 156);
    --subtext-0: rgb(166, 173, 200);
    --subtext-1: rgb(186, 194, 222);
    --text: rgb(205, 214, 244);

    --accent-sapphire: rgb(125, 196, 228);
    --accent-mauve: rgb(203, 166, 247);
    --accent-red: rgb(237, 135, 150);
    --accent-yellow: rgb(238, 212, 159);
    --accent-green: rgb(166, 218, 149);
}

@media (prefers-color-scheme: light) {
    :root {
        --crust: rgb(220, 224, 232);
        --mantle: rgb(230, 233, 239);
        --base: rgb(239, 241, 245);
        --surface-0: rgb(204, 208, 218);
        --surface-1: rgb(188, 192, 204);
        --overlay-0: rgb(156, 160, 176);
        --overlay-1: rgb(140, 143, 161);
        --subtext-0: rgb(108, 111, 133);
        --subtext-1: rgb(92, 95, 119);
        --text: rgb(76, 79, 105);

        --accent-sapphire: rgb(32, 159, 181);
        --accent-mauve: rgb(136, 57, 239);
        --accent-red: rgb(210, 15, 57);
        --accent-yellow: rgb(223, 142, 29);
        --accent-green: rgb(64, 160, 43);
    }
}

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    background-color: var(--crust);
    color: var(--text);
    font-family: "JetBrains Mono", monospace;
    display: grid;
    place-items: center;
    min-height: 100vh;
}

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

h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

p {
    color: var(--subtext-0);
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

img {
    display: block;
}

.container {
    background-color: var(--mantle);
    width: 90%;
    max-width: 400px;
    padding: 2rem;
    text-align: center;
    border: 1px solid var(--surface-0);
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}