/* fonts */
@import url("https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&family=Nunito:wght@400;700&display=swap");

body {
    font-family: Nunito, sans-serif;
    background-color: #fbf6ed;
}

h1 {
    font-family: Alegreya, serif;
}

header {
    background: url("../images/head.webp") center/cover no-repeat;
    color: #402104;
    font-weight: 900;
}

/* footer with same background as header */
#site-footer {
    background: url("../images/head.webp") center/cover no-repeat;
    color: #402104;
}

body > footer {
    background-color: #f8f9fa;
    padding: 1rem 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
}

/* buttons */

.input-group-text {
    background-color: #402104;
    color: #ead5a8;
    border: 2px solid #402104;
}

#difficulty {
    width: auto;
    max-width: 200px;
    background-color: #FCFBF4;
}

#difficulty:focus {
    background-color: #FCFBF4;
    outline: none;
}

#sample-text {
    background-color: #FCFBF4;
}

#user-input {
    background-color: #FCFBF4;
}

#instructions-btn {
    background-color: #402104;
    color: #ead5a8;
    border: 2px solid #402104;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#instructions-btn:hover {
    background-color: #ead5a8;
    color: #402104;
}

#next-word-btn {
    background-color: #402104;
    color: #ead5a8;
    border: 2px solid #402104;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#next-word-btn:hover {
    background-color: #ead5a8;
    color: #402104;
}

.btn-outline-orange {
    border: 2px solid #402104;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    margin: 5px;
}


/* Modal styling */
.modal-content {
    background-color: #FCFBF4;
    border: 2px solid #b6b2a5;
}

.modal-header {
    background-color: #FCFBF4;
    border: 2px solid #b6b2a5;
}

.modal-title {
    color: #402104;
    font-weight: bold;
}

.modal-footer {
    background-color: #FCFBF4;
    border: 2px solid #b6b2a5;
}

#modal-close-btn {
    background-color: #402104;
    color: #ead5a8;
    border: 2px solid #402104;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#modal-close-btn:hover {
    background-color: #ead5a8;
    color: #402104;
}

.modal-body {
    color: #402104;
}

#results-area {
    box-shadow: 0 0 10px #402104;
    border-radius: 10px;
    padding: 20px;
}

#results-area p {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

/* typing feedback */

.correct {
    color: #402104;
}

.incorrect {
    color: maroon;
}