/*
Ενδεικτικοί επιλογείς για τη διαμόρφωση του στυλ

Μπορείτε να προσθέσετε τις δηλώσεις στους παρακάτω κανόνες και να εμπλουτίσετε με δικούς σας κανόνες.
*/


/* Χρειάζεται για να φανούν οι σημαίες στους φυλλομετρητές chrome-based από Windows 10 */

@font-face {
    font-family: 'TwemojiMozilla';
    src: url('TwemojiMozilla.ttf');
}

body {
    margin: 40px;
    font-family: 'Open Sans', 'TwemojiMozilla';
    /* Η γραμματοσειρά open sans φορτώνεται στο αρχείο html*/
    background-color: #fff;
    color: #444;
}

.game-panel {
    display: grid;
    /* ... */
    grid-gap: 5px;
    grid-template-columns: 1fr 4fr;
    height: auto;
}

@media (max-width: 800px) {
    /* ενδεικτικά */
    /*  ... */
    body {
        /* background-color: yellow; */
        background-color: #fff;
    }
    .game-panel {
        grid-template-columns: auto;
    }
    #country,
    #ipeiros {
        flex-direction: row;
        justify-items: center;
        width: 100%;
        flex-grow: 1;
        font-size: 1em;
    }
    #my-country {
        display: flex;
        flex-direction: column;
    }
    #btn-on-map {
        width: 100%;
        padding: 5px 5px 5px 5px;
        margin: 5px 15px 5px 15px;
        justify-self: center;
    }
    .flexBoxC {
        display: flex;
        flex: 1 0 100%;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }
    .flexBtn {
        flex-direction: row;
        justify-items: center;
        width: 100%;
        flex-grow: 1;
        /* background-color: cornsilk; */
    }
}

#my-country {
    display: flex;
    background-color: #708090;
    flex-direction: column;
    color: white;
    justify-content: flex-start;
    align-items: stretch;
}

.sidebar {
    width: 100%;
    height: 30px;
    background-color: #ddd;
    position: sticky;
    top: 5px;
    z-index: 100;
    /* display: block; */
}

.score {
    display: flex;
    flex-direction: column;
    background-color: #ff3399;
    color: white;
    grid-row: 1/span 4;
    justify-items: center;
    align-content: center;
}

#stackingPanel {
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 0;
}

#neighbours-panel {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
    color: white;
    /* justify-content: flex-start; */
    justify-items: stretch;
    align-items: flex-start;
    background-color: white;
    z-index: 0;
}

.neighbour {
    display: flex;
    flex: auto;
    align-items: baseline;
    height: auto;
    color: black;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: white;
    margin: 1px;
    padding: 1px;
    text-justify: inter-word;
}

#my-country-flag {
    font-size: 4em;
    padding-left: 10px;
    position: relative;
}

#my-country-name {
    font-size: 1.5em;
    padding-left: 10px;
    text-justify: inter-word;
    position: relative;
}

#my-neighbor-flag {
    font-size: 2em;
    padding-left: 10px;
    position: relative;
}

#progress {
    width: 100%;
    height: 30px;
    color: white;
    background-color: blue;
    border-radius: 5px;
}

#country,
#ipeiros {
    width: 200px;
    font-size: 1em;
}

button {
    font-size: 1.1em;
    width: 90%;
    height: 50px;
    line-height: 1.1em;
    margin: 20px;
}

.flexBoxR {
    font-size: 1.5em;
    display: inline-block;
    margin: 0px 20px 20px 20px;
    flex-direction: row;
    justify-content: space-around;
}

.flexBoxC {
    display: flex;
    /* flex-wrap: wrap;
            flex-flow: column; */
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
    /* background-color: chartreuse; */
}

#country-dd {
    font-size: 0.7em;
}

#sel-country {
    font-size: 1em;
}

.flexBtn {
    display: flex;
    width: 100%;
}