body {
    background-color: #5e0032;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

button, input, body {
    font-family: "Roboto Slab", et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}

.container {
    text-align: center;
    background-color: #ebc3af;
    padding: 40px 20px;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.04);
}

.digit-row {
    display: flex;
    justify-content: center;
}

.digit, .key {
    padding: 10px 12px 10px;
    margin: 4px;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.04);
}

.digit-0 {
    background-color: #88c636;
}

.digit-1 {
    background-color: #98b314;
}

.digit-2 {
    background-color: #a49f00;
}

.digit-3 {
    background-color: #ac8c00;
}

.digit-4 {
    background-color: #b07700;
}

.digit-5 {
    background-color: #b16300;
}

.digit-6 {
    background-color: #af4e09;
}

.digit-7 {
    background-color: #a93818;
}

.digit-8 {
    background-color: #a12123;
}

.digit-9 {
    background-color: #95002b;
}

.digit, input {
    font-family: "Ubuntu Mono", "Courier New", Courier, monospace;
}

.key {
    background-color: #6b0024;
    padding-bottom: 6px;
}

.key:hover, .digit:hover:not(.disabled) {
    filter: brightness(0.9);
}

.disabled {
    background-color: #393939;
    color: #c2c2c2;
    cursor: not-allowed;
}

.key-space {
    background-color: #001f2d;
    padding-left: 60px;
    padding-right: 60px;
}

input, button {
    margin: 10px 3px;
    padding: 10px;
    border: none;
    border-radius: 2px;
    font-size: 16px;
}

input {
    width: 200px;
}

button {
    background-color: #1a344b;
    color: #fff;
    cursor: pointer;
    padding-left: 20px;
    padding-right: 20px;
}

button:hover {
    background-color: #15456a;
}

button:disabled {
    background-color: #688fb2;
    color: #fff;
    cursor: not-allowed;
}

#score {
    margin-top: 20px;
}

.predicted {
    color: #337400;
    font-weight: bold;
}

.not-predicted {
    color: #920000;
    font-weight: bold;
}

.partially-predicted {
    color: #a46800;
    font-weight: bold;
}

.predict-from, .score-neg {
    color: #920000;
}

.predict-to, .score-pos {
    color: #337400;
}