html {
    background-color: #0E141B;
}

.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.centered-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#difficulty-select {
    background-color: #1E1F20;
    color: #FFFFFF;
    font-family: 'Verdana', sans-serif;
    max-width: fit-content;
    margin-inline: auto;
    padding: 2%;
    display: grid;
    grid-template-columns: 2fr 2fr;
    grid-template-areas:
        "flags-title japanese-title"
        "flags-easy japanese-easy"
        "flags-medium japanese-medium"
        "flags-hard japanese-hard"
        "flags-insane flags-insane";
    gap: 3px 10px;
}

#difficulty-select button {
    padding: 15px 80px;
    background-color: lightblue;
    color: #000000;
    border: none;
    cursor: pointer;
    width: 100%;
}

#flags-title {
    grid-area: flags-title;
    color: #FFFFFF;
    font-family: 'Verdana', sans-serif;
    text-align: center;
}
#japanese-title {
    grid-area: japanese-title;
    color: #FFFFFF;
    font-family: 'Verdana', sans-serif;
    text-align: center;
}
#flags-easy {
    grid-area: flags-easy;
}
#flags-medium {
    grid-area: flags-medium;
}
#flags-hard {
    grid-area: flags-hard;
}
#japanese-easy {
    grid-area: japanese-easy;
}
#japanese-medium {
    grid-area: japanese-medium;
}
#japanese-hard {
    grid-area: japanese-hard;
}
#flags-insane {
    grid-area: flags-insane;
    width: 100%;
}

.game-category {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.game-category h2 {
    grid-area: flags-title;
    color: #FFFFFF;
    font-family: 'Verdana', sans-serif;
    text-align: center;
}

div#difficulty-select #flags-easy:hover, div#difficulty-select #japanese-easy:hover {
    background-color: lightgreen;
}
div#difficulty-select #flags-medium:hover, div#difficulty-select #japanese-medium:hover {
    background-color: #fcf342;
}
div#difficulty-select #flags-hard:hover, div#difficulty-select #japanese-hard:hover {
    background-color: lightcoral;
}
div#difficulty-select #flags-insane:hover, div#difficulty-select #japanese-insane:hover {
    background-color: red;
}

/*/ div#flag-input a:link, div#flag-input a:hover, div#flag-input a:visited, div#flag-input a:active { /*/
.flagGame-title {
    display: block;
    font-weight: bolder;
    text-decoration: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 2rem;
    font-family: 'Verdana', sans-serif;
    margin-top: 10px;
    margin-bottom: 10px;
}

.game-container {
    background-color: #0e141b;
    color: #FFFFFF;
    font-family: 'Verdana', sans-serif;
}

.game-container button {
    padding: 15px 80px;
    margin: 10px;
    background-color: lightblue;
    color: #000000;
    border: none;
    cursor: pointer;
    width: 40%;
}

.game-container button:hover{
    background-color: #fcf342;
}

#flag-next {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#flag-next button {
    background-color: aliceblue;
}

#flag-next button:hover {
    background-color: #8848ff;
    color: white;
}

#flag-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#flag-input {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

#country-dropdown {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: lightblue;
    color: #000000;
    border: none;
    cursor: pointer;
    width: 20%;
}

#flag-answer {
    text-align: center;
}

@media (max-width: 768px) {
    #difficulty-select {
        grid-template-columns: 1fr;
        grid-template-areas:
            "flags-title"
            "flags-easy"
            "flags-medium"
            "flags-hard"
            "japanese-title"
            "japanese-easy"
            "japanese-medium"
            "japanese-hard"
            "flags-insane";
    }

    #flags-insane {
        grid-column: 1;
    }
    .game-container button {
        width: 100%;
    }
}


@media (max-width: 480px) {
    .difficulty-select button {
        padding: 10px;
        font-size: 14px;
    }
}