* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Helvetica, Monospace, Arial;
}

body {
    --character-yellow: #f7ba0b;
    --character-orange: #d4652f;
    --character-red:    #a02128;
    --character-violet: #904684;
    --character-blue:   #154889;
    --character-green:  #317f43;
    --character-grey:   #9b9b9b;
    --character-brown:  #7b5141;
    --character-white:  #f4f4f4;
    --character-black:  #282828;

    --color-background: #282828;
    --color-title: #555555;
    --color-surface: #424449;
    --color-surface-border: grey;
    --color-primary-text: #faf7ff;

    --list-item-correct: #005a34;
    --list-item-correct-border: #00814b;
    --list-item-incorrect: #660000;
    --list-item-incorrect-border: #930101;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #202324;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #454a4d;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #373b3e;
}