@import url(keyboard.css);
@import url(text-display.css);
@import url(text-input.css);
@import url(stats.css);
@import url(toolbar.css);
@import url(settings.css);

:root { /*  Default light mode colors: */
    --background-color: rgb(255, 255, 255);
    --text-color: rgb(0, 0, 0);
    --subtext-color: rgb(140, 140, 140);
    --icon-color: rgb(0, 0, 0);
    --border-color: rgb(215, 215, 215);
    --key-color: rgb(200, 200, 200);
    --key-active-color: rgb(230, 230, 230);
    --key-shadow-color: rgb(180, 180, 180);
    
}   .dark-mode { /* Dark mode colors: */
    --background-color: rgb(20, 20, 20);
    --text-color: rgb(255, 255, 255);
    --subtext-color: rgb(150, 150, 150);
    --icon-color: rgb(255, 255, 255);
    --border-color: rgb(60, 60, 60);
    --key-color: rgb(50, 50, 50);
    --key-active-color: rgb(70, 70, 70);
    --key-shadow-color: rgb(35, 35, 35);
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 100vh;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    background-color: var(--background-color);

    margin: 0;
    padding: 0;
}

#container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.char {
    position: relative;

    color: var(--text-color);

    top: 0rem;
    transition: top .1s;
}

.char.correct {
    color: var(--text-color);
}
.char.incorrect {
    color: rgb(255, 100, 100);
    background-color: rgba(255, 0, 0, .15);
}

.char.current:not(:first-of-type) { /* Adds marker for which letter you're currently on */
    content: "";

    width: 100%;
    height: 100%;

    background-color: rgba(255, 255, 255, .3);
}

.icon {
    color: var(--icon-color);
}