update countries repo commit

game.js

@@ -47,13 +47,13 @@ const getMasterQuestionList = () => {
 };
 
 const getQuestionByCountryName = (name) => {
-  c = getMasterQuestionList().filter((c) => c.countryname === name);
+  var c = getMasterQuestionList().filter((c) => c.countryname === name);
   if (c.length > 0) return c[0];
   return null;
 };
 
 const getQuestionByCapital = (capital) => {
-  c = getMasterQuestionList().filter((c) => c.capital === capital);
+  var c = getMasterQuestionList().filter((c) => c.capital === capital);
   if (c.length > 0) return c[0];
   return null;
 };

game_styles.css

@@ -3,7 +3,7 @@
   --b-color: var(--yellow);
   --c-color: var(--green);
   --d-color: var(--blue);
-  --question-country-color: var(--teal);
+  --question-country-color: var(--base16-teal);
   --question-capital-color: var(--blue);
 }
 
@@ -21,25 +21,25 @@ input {
 
 @keyframes correct {
   0% {
-    background: var(--default-bg);
+    background: var(--bg);
   }
   50% {
     background: var(--green);
   }
   100% {
-    background: var(--default-bg);
+    background: var(--bg);
   }
 }
 
 @keyframes incorrect {
   0% {
-    background: var(--default-bg);
+    background: var(--bg);
   }
   50% {
     background: var(--red);
   }
   100% {
-    background: var(--default-bg);
+    background: var(--bg);
   }
 }
 
@@ -74,10 +74,12 @@ input {
   --okay: var(--yellow);
   --bad: var(--red);
   background: var(--good);
+  color: var(--dark);
 }
 
 #time {
   background: var(--blue);
+  color: var(--dark);
 }
 
 #gameinfo {
@@ -90,6 +92,7 @@ input {
 
 #previousQuestionAnswer {
   background: var(--green);
+  color: var(--dark);
 }
 
 #game .answer {
@@ -113,29 +116,35 @@ input {
 #a {
   background-color: var(--a-color);
   border-color: var(--a-color);
+  color: var(--dark);
 }
 
 #b {
   background-color: var(--b-color);
   border-color: var(--b-color);
+  color: var(--dark);
 }
 
 #c {
   background-color: var(--c-color);
   border-color: var(--c-color);
+  color: var(--dark);
 }
 
 #d {
   background-color: var(--d-color);
   border-color: var(--d-color);
+  color: var(--dark);
 }
 
 span#questionCountry {
   background-color: var(--question-country-color);
+  color: var(--dark);
 }
 
 span#questionCapital {
   background-color: var(--question-capital-color);
+  color: var(--dark);
 }
 
 #settings {
@@ -154,8 +163,8 @@ span#questionCapital {
 }
 
 #settings .regionListItem:hover {
-  background: #d9d9d9;
+  background: var(--light);
-  color: black;
+  color: var(--dark);
 }
 
 /* toggle switches */
@@ -242,6 +251,7 @@ input[type="radio"] + label {
 }
 input[type="radio"]:checked + label {
   background-color: var(--yellow);
+  color: var(--dark);
 }
 
 #previousQuestionAnswer {

index.html

@@ -90,7 +90,7 @@
     </div>
     <p>
       built with ❤ and adequate amounts of care by
-      <a href="https://alra.uk">alv</a>
+      <a href="https://alv.cx">alv</a>
     </p>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script type="text/javascript" src="countries.js"></script>

styles.css

@@ -1,30 +1,14 @@
-@import url("https://alv.cx/styles.css");
+@import url("https://styles.alv.cx/colors/base16-default.css");
-
+@import url("https://styles.alv.cx/base.css");
-:root {
+@import url("https://styles.alv.cx/modules/darkmode.css");
-  --default-bg: #fefefe;
-  --dark-bg: #b8b8b8;
-  --selected-bg: #383838;
-  --default-fg: #454545;
-  --red: #ab4642;
-  --orange: #dc9656;
-  --yellow: #f7ca88;
-  --green: #a1b56c;
-  --teal: #86c1b9;
-  --blue: #7cafc2;
-  --purple: #ba8baf;
-  --brown: #a16946;
-}
 
 body {
   font-family: monospace;
-  color: var(--default-fg);
   font-size: 16px;
   margin: 0 auto;
   max-width: 800px;
   padding: 2em;
   line-height: 1.1;
-  text-align: justify;
-  background-color: var(--default-bg);
 }
 
 @media only screen and (max-width: 600px) {