:root {
    --background: #c7d5de;
    --onBackground: #04052e;
    --surface: #b1c6d1;
    --surfaceBorder: #AEAFA6;
    --meter-filling-default: #21d996;
    --meter-filling-danger: #ff0032;
}

body {
    background: var(--background);
    color: var(--onBackground);
    font-family: 'Roboto Mono', monospace;
}

/* #main-container {
    background: var(--surface);
} */

button {
    background-color: var(--meter-filling-default);
    color: var(--onBackground);
    padding: 4px 16px;
}
button:disabled {
    background-color: var(--surface);
    color: var(--surfaceBorder);
}


#how-to-play span {
    color: var(--meter-filling-danger);       
}

.error-message {
    color: var(--onBackground);
    background-color: var(--meter-filling-default);
}
#word-input {
    background-color: var(--background);
    border-radius: 0.25rem;
    border: 1px solid var(--onBackground);
}

h1, h2, h3, h4, p, input, span {
    color: var(--onBackground);
}

#boss-hunger-meter-label {
    background-color: var(--meter-filling-default);
}
#boss-hunger-meter-container {
    /* background-color: var(--surface); */
    border: 1px dashed var(--surfaceBorder);
}
#boss-hunger-meter-container.danger {
    border: 1px dashed var(--meter-filling-danger);
}
#boss-hunger-meter-filling {
    background-color: var(--meter-filling-default);
}
.danger #boss-hunger-meter-filling {
    background-color: var(--meter-filling-danger);
}

@media (max-width: 600px) {
    #ref-word-container {
        font-size: 1.75rem !important;
    }
}