:root {
    --guess-color: #dbd8c5;
    --blue-color: #aedfee;
    --hi-color: #fbcb2c40;
    --span-color: #facd12;
    --hint-color: #c4c1af;
    --correct-color: #0f7ea0;
    --font-med: 'FG Med', 'Franklin Gothic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-book: 'FG Book', 'Franklin Gothic Book', 'Franklin Gothic', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@font-face {
    font-family: 'FG Med';
    src: url(../other/fg-med.ttf) format("truetype");
}
@font-face {
    font-family: 'FG Book';
    src: url(../other/fg-book.ttf) format("truetype");
}

body {
    color: black;
    background-color: #fff;
    font-family: var(--font-med);
    font-size: medium;
}

p, li {
    font-family: var(--font-book) !important;
}

#mainArea {
    margin-top: 7vh;
    width: 90vw;
    max-width: 900px;
}

hi {
    background-color: var(--hi-color);
}

img {
    border-radius: 15px;
}

.blue {
    color: var(--correct-color);
}
.span {
    color: var(--span-color);
}