@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

::-webkit-scrollbar {
    width: 0;
}

* {
    color: #e2b714; 
    user-select: none;
    font-family: 'Roboto Mono';
}

a {
    text-decoration: none;
}

body {
    background-color: #323437;
}

#header-div {
    width: 80vw;
    display: flex;
    justify-content: left;
}

header {
    padding: 20px;
    display: flex;
    justify-content: center;
}

#name-div {
    color: white;
    font-size: 30px;
}

#text-div, .word-div {
    display: flex;
    justify-content: center;
}

#text-div {
    letter-spacing: 1px;
    font-size: 30px;
    word-spacing: 10px;
    line-height: 50px;
    margin-top: 200px;
    width: 80vw;
    justify-content: left;
    flex-wrap: wrap;
    padding: 20px;
}

#nav-div {
    padding: 10px;
    display: flex;
    width: 20vw;
    background-color: #2c2e31;
    border-radius: 10px;
}

.spacer {
    background-color: #323437;
    width: 5px;
    border-radius: 3px;
}

.char-div {
    color: rgba(220, 220, 220, 0.477);
}

.option {
    color: #646669;
}

.option:hover {
    color: white;
    cursor: pointer;
}

#results-div {
    display: flex;
    width: 40vw;
    margin: 20px;
}

#main-stats {
    display: flex;
    flex-wrap: wrap;

    margin: 10px;
    padding: 10px;
    width: 10vw;
    font-size: 60px;
}

#chart-div {
    width: 30vw;
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    padding: 5px;
}

#chart {
    width: 500px;
    height: 100px;
    margin: 10px;
}

#other-stats {
    width: 30vw;
    display: flex;
}

#main-stats > div {
    width: 7vw;
}

.holder {
    width: 20vw;
}


.small {
    font-size: 25px;
    color: rgba(220, 220, 220, 0.477);
    width: 5vw;
}

.correct {
    color: #d1d0c5;
}

.incorrect {
    color: #ca4754;
}

.extra {
    color: #7e2a33;
}

#raw, #characters, #time {
    font-size: 40px;
}

#filler {
    height: 100px;
}

.selected {
    font-size: 20px;
    color: #e2b714;
}

#nav-div > div {
    font-size: 15px;
    margin-left: 30px;
}

i {
    color: #646669;
}

i:hover {
    color: white;
    cursor: pointer;
}