Upload styles.css

styles.css

@@ -0,0 +1,214 @@
+@font-face {
+    font-family: 'TwemojiMozilla';
+    src: url('TwemojiMozilla.ttf');
+} /* Required in order to display the flag icons on chrome-based browsers and Windows 10 */
+
+body {
+    margin: 25px;
+    font-family: 'Open Sans', 'TwemojiMozilla';
+    /* The 'Open Sans' font is loaded on the head section of the html file */
+    background-color: #fff;
+    color: #444;
+}
+
+.game-panel {
+    margin: 0 auto;
+    justify-self: center;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr;
+    min-width: 480px;
+    max-width: 1600px;
+    gap: 10px;
+}
+
+#sidebar {
+    display: flex;
+    flex-direction: column;
+    width: 220px;
+    background-color: #ff7000; /* Dark orange color */
+    color: white;
+    border-radius: 5px;
+    padding: 20px;
+}
+
+#countries {
+    display:flex;
+    flex-direction: column;
+}
+
+#my-country {
+    display: flex;
+    background-color: #6f7f91;
+    color: white;
+    border-radius: 5px;
+    padding: 0 20px;
+    align-items: center;
+}
+
+#round, #score {
+    display: flex;
+    justify-content: space-between;
+    font-size: 1.5em;
+    padding: 3px 0;
+}
+
+#neighbours-panel {
+    position: relative;
+    width: auto;
+    height: max-content;
+    display: flex;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-evenly;
+    background-color: white;
+}
+
+.neighbour-is-valid, .neighbour-is-invalid {
+    width: 120px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: center;
+    margin: 8px;
+    padding: 10px;
+    border: 2px solid white;
+}
+
+.neighbour-is-valid, .neighbour-is-invalid:hover {
+    cursor: pointer;
+}
+
+#flag {
+    font-size: 5.5em;
+    text-shadow: 0px 0px 4px black;
+}
+
+#name {
+    font-size: 0.9em;
+    text-align: center;
+    margin-bottom: auto;
+}
+
+.was-clicked.neighbour-is-valid {
+    background-color: #dddddd;
+    border: 2px solid #96b2a1;
+    border-radius: 10px;
+}
+
+.was-clicked.neighbour-is-invalid {
+    background-color: #dddddd;
+    border: 2px solid #b0354e;
+    border-radius: 10px;
+}
+
+#game-title {
+    padding-bottom: 25px;
+    font-size: 30px;
+    font-weight: bold;
+    text-shadow: 3px 3px 4px black;
+}
+
+#sidebar hr {
+    width: 100%;
+    height: 1px;
+    color: orange;
+    background-color: white;
+}
+
+#next-round-panel {
+    display: none;
+    position: absolute;
+    z-index: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(128, 128, 128, 0.8);
+    border-radius: 5px;
+    font-size: 3.5em;
+    font-weight: bold;
+    align-items: center;
+    justify-content:center;
+    text-align: center;
+}
+
+#my-country-flag {
+    font-size: 4em;
+    padding: 0 20px 0 0;
+    text-shadow: 0px 0px 4px white;
+}
+
+#my-country-name {
+    font-size: 1.5em;
+}
+
+#buttons {
+    display: flex;
+    flex-direction: column;
+    padding-top: 20px;
+    margin-top: auto; /* Align at the bottom of the flexbox */
+}
+
+#buttons button {
+    width: auto;
+    padding: 18px;
+    border: none;
+    border-radius: 5px;
+    font-size: 1em;
+    cursor: pointer;
+    box-shadow: 7px 6px 18px 1px rgba(0, 0, 0, 0.24);
+    transition: 0.2s all;
+}
+
+#btn-next-round {
+    margin: 0 0 20px 0;
+    font-weight: 900;
+}
+
+#buttons button:active {
+    transform: scale(0.95);
+    box-shadow: 3px 2px 15px 1px rgba(0, 0, 0, 0.24);
+}
+
+#progress {
+    width: 100%;
+    height: 25px;
+    margin: 10px 0;
+    background-color: #e7e6e8;
+    border: 1px solid #c9c8c9;
+    border-radius: 5px;
+    position: sticky;
+    inset-block-start: 0px;
+    z-index: 2;
+}
+
+#bar {
+    background-color: #005fba;
+    height: 25px;
+    width: 0%;
+    border-radius: 5px;
+}
+
+#progress::-webkit-progress-bar {
+    border-radius: 5px;
+} /* Especialy for chrome-based browsers that don't support CSS progress bars very well */
+
+@media (max-width: 660px) {
+    html, body {
+        margin: 3px;
+    }
+
+    .game-panel {
+        /*transform: scale(0.95);*/
+        width: auto;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr ;
+        min-width: 300px;
+    }
+
+    #sidebar {
+        width: auto;
+        height: fit-content; 
+    }
+}