body {
    font-size: 1.025rem;
    font-family: "Albert Sans Regular";

    background-color: #eaeaea;
    color: #303030;
}

::selection {
    background-color: #8f7cc4;
    color: #ffffff;
}

/* Content: */

.main-container {
    background-color: #e0e0e0;
    
    border: 1px solid #dbdbdb;
    border-radius: 20px;
    
    box-shadow: 0 0 5px #00000035;
}

.main-container > h1:first-of-type {
    font-family: "Encode Sans Semi Bold";
    font-weight: normal;
    font-size: 1.4rem;

    color: #6943a7;
}

.modifier-button {
    cursor: pointer;
    background-color: #e0e0e0d0;

    border: 1px solid #b4b4b4;
    border-radius: 10px;

    box-shadow: 0 0 8px #00000033;

    transition: background-color 300ms ease;
}

@media (pointer: fine) {
    .modifier-button:hover {
        background-color: #cfcfcf;
    }
}

/* ---------- Dark theme: ---------- */

.dark body {
    background-color: #181818;
    color: #d5d5d5;
}

.dark ::selection {
    background-color: #772138;
}

/* Content: */

.dark .main-container {
    background-color: #212121;
    border-color: #343434;

    box-shadow: 0 0 8px #34343490;
}

.dark .main-container > h1:first-of-type {
    color: #d45b8e;
}

.dark .modifier-button {
    background-color: #1c1c1cd5;
    border-color: #343434;

    box-shadow: 0 0 8px #343434c5;
}

@media (pointer: fine) {
    .dark .modifier-button:hover {
        background-color: #343434;
    }
}