*, html{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body{
    display: flex;
    flex-direction: column;
    background-color: rgb(114, 114, 114);
    width: 100%;
    margin: 0;
    padding: 0;
}

#game-settings, #game-area{
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    margin: 3rem 0 0 0; 
    padding: 1rem;
    color: white;
}

#game-settings{
    background-color: rgb(53, 51, 51);
    height: 13rem;
}

#game-area{
    background-color: rgb(38, 40, 49);
    margin-bottom: 2rem;
}

#game-settings__header, #game-area__header{
    color: white;
    margin: 1rem;
}

#game-settings__header{
    font-size: 1.5rem;
} 

#game-area__header{
    font-size: 1.4rem;
}

#history-list__header{
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
}

#feedback{
    font-size: 0.8rem;
    color: rgb(245, 245, 98);
    margin: 0.8rem;
}

#game-settings__form{
    display:flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

#game-area__form{
    display:flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.form-top, .form-bottom{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.game-options{
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
}

.game-option{
    font-size: 1rem;
}

.allow-dublicates{
    margin-left: 20px;
    font-size: 1rem;
}

#game-mode{
    width: 9rem;
    height: 2.5rem;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    background-color: rgb(8, 8, 43);
    color: white;
    margin-right: 10px;
}

.btn{
    width: 7rem;
    height: 2.5rem;
    color: white;
    font-size: 1rem;
    font-weight: bold;
}

.btn:disabled {
    opacity: 0.5; 
    cursor: not-allowed;          
}

#play-game-btn, #submit-btn{
    background-color: rgb(42, 104, 185);
}
#play-game-btn:hover, #submit-btn:hover{
    background-color:  rgb(22, 56, 150);
}

#quit-btn{
    background-color: red;
}

#quit-btn:hover{
    background-color: rgb(138, 0, 0);
}

#clear-game-btn{
    background-color: rgba(62, 62, 63, 0.877);
}

#clear-game-btn:hover{
    background-color: rgba(30, 30, 31, 0.877);
}

.hidden{
    display: none !important;
}

.input-text{
    height: 2.5rem;
    width: 8rem;
    padding: 0;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    background-color: rgba(31, 31, 32, 0.877);
    color: white;
}

#history-list{
    margin: 0;
    margin-top: 0.5rem;
    padding-right: 2rem;
    align-self: center;
    list-style-type: disc;
}

.history-list_li{
    font-size: 0.8rem;
}