body {
    background-image: url("./full-bloom.png");
    margin: 0;
}

@font-face {
    font-family: sitelen;
    src: url("./sitelenselikiwenasuki.ttf");
}

/* Head */
header {
    background: linear-gradient(to right, #5252ff00 5%, #5252ffff, #5252ff00 95%);
    opacity: 0.7;
    color: white;
    text-align: center;
    padding: 1em 0;
    margin-bottom: 1em;
}

h1 {
    margin: 0;
}

/* Character */
#character {
    font-size: 15em;
}

/* Buttons, settings and score */
main {
    position: absolute;
    bottom: 1em;
    text-align: end;
    right: 0.75em;
}

button {
    border-radius: 3px;
    margin: 0 0.25em;
}

p button {
    width: 6em;
    height: 4em;
    border: 1px solid grey;
    font-weight: bold;
}

button:disabled {
    font-style: italic;
    opacity: 0.7;
}

button:hover {
    filter: hue-rotate(-10deg);
}

button:active {
    filter: hue-rotate(-20deg);
}

.button_correct {
    background-color: green;
}

.button_incorrect {
    background-color: red;
}

.button_missed {
    background-color: darkorange;
}

/* History */
#history {
    font-size: 2em;
    position: absolute;
    top: 3em;
    left: 0.3em;
}

#history .correct {
    color: darkgreen;
    border-left: 2px solid darkgreen;
}

#history .half_correct {
    color: darkorange;
    border-left: 2px dashed darkorange;
}

#history .wrong {
    color: darkred;
    border-left: 2px dotted darkred;
}

/* Horizontal and vertical text management */
.horizontal {
    font-family: sitelen, sans-serif;
}

#character.horizontal {
    text-align: center;
}

.vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

#character.vertical {
    /* vertical text cannot be horizontaly centered easily. We must use calc. */
    margin-left: calc(50% - 0.5em);
}