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

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


/* Χρειάζεται για να φανούν οι σημαίες στους φυλλομετρητές 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: rgb(255, 255, 255);
    color: #444;
}

.game-panel {
    display: grid;
    grid-template-areas:
    'h1 h2 h2 h2'
    'h1 h3 h3 h3'
    'h1 h4 h4 h4'
    'h1 h4 h4 h4';
    
    grid-gap:10px;
    padding:10px;
    
    /* ... */
}
.eik {
    font-size: 20px;
    padding: 5px;
}

 .keim {      
        padding: 5px;      
        word-wrap: break-word;      
        font-size: 15px;    
    }        

@media (max-width: 800px) {
.game-panel{
    display:grid;
    grid-template-areas:
    'h1'  
    'h2'  
    'h3'  
    'h4'  ;
}
}

#my-country {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        word-wrap: break-word;
        justify-content:space-between;
        grid-area: h4;
        padding: 5px;
        align-items:center;
    
  }
  
.ds {
  font-size: 10;
}
#sidebar {
    grid-area: h2;
    background-color:rgb(85, 81, 110);
    max-height: 80px;
    color:white;
  }

#score {
    grid-area: h1;
    background-color:rgba(209, 38, 166, 0.959);
    color:white;}

#neighbours-panel {
background-color:tomato;}

.neighbour {
}

.was-clicked.neighbour-is-valid {}

.was-clicked.neighbour-is-invalid {}

.neighbour:not(.was-clicked) {}

#my-country-flag {
    font-size: 50px;
    padding-right: 10px;
}

#my-country-name {
    font: size 30px;
    
}

#next-round-panel {
    display:grid;
    padding: 15px;margin: 20px;
    align-content:center;
    justify-content:space-between;
    align-items:flex-end;
}

#progress {
    grid-area: h3;
    background-color:rgb(225, 231, 231);
    border-radius: 5px;
    max-height: 40px;
    padding-bottom:10px;
}
#pro {
    background-color:blue;
    width:0px;
    padding: 10px;
    
}
table td {
    display: inline-flex;
    padding: 5px;
    margin: 5px;
}
#t{ font-size: 30px}

/* ειδικά για τους φυλλομετρητές που προέρχονται από τον chrome καθώς 
υποστηρίζουν λιγότερο καλά το στοιχείο progress από ότι ο firefox,
όσον αφορά το CSS (που και σε αυτόν έχει προβληματική υποστήριξη)
*/

#progress::-webkit-progress-bar {
    border-radius: 5px;
}