main {
    --width: 400px;
    --height: 250px;
}

#countries {
    width: 300px;
}

#game .row {
    width: var(--width);
    margin-bottom: 1.5em;
}

#flag {
    width: var(--width);
    height: var(--height);
    background-size: var(--width) var(--height);
    background-repeat: no-repeat;
    position: relative;
}

#choices {
    width: 100%;
}

#choices tr {
    border-bottom: 2px solid var(--bs-body-bg);
}

#choices td {
    text-align: center;
    color: var(--bs-body-bg);
    font-weight: bold;
    padding: 5px;
}

#p1,
#p2,
#p3,
#p4,
#p5,
#p6 {
    position: absolute;
    height: 50%;
}

#p1 {
    top: 0;
    left: 0;
    width: 33%;
}

#p2 {
    top: 0;
    left: 33%;
    width: 33%;
}

#p3 {
    top: 0;
    left: 66%;
    width: 35%;
}

#p4 {
    top: 50%;
    left: 0;
    width: 33%;
}

#p5 {
    top: 50%;
    left: 33%;
    width: 33%;
}

#p6 {
    top: 50%;
    left: 66%;
    width: 35%;
}

#flag div[data-animation="pop"] {
    animation-name: PopIn;
    animation-duration: 800ms;
    animation-timing-function: ease-in;
}

@keyframes PopIn {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (max-width: 400px) {
    main {
        --width: 300px;
        --height: 150px;
    }

    #countries {
        width: 200px;
    }
}