swap to ultra-fast APIs on homepage, finish continents

app/components/index-world.css.ts

@@ -1,4 +1,4 @@
-import { style } from "@vanilla-extract/css";
+import { keyframes, style } from "@vanilla-extract/css";
 
 export const container = style({
   background: "#333",
@@ -7,11 +7,11 @@ export const container = style({
 
   "@media": {
     // under 600px
-    "screen and (max-width: 600px)": {
+    "screen and (max-width: 800px)": {
       flexBasis: "100%",
     },
     // between 600px and 1000px
-    "screen and (min-width: 600px) and (max-width: 1000px)": {
+    "screen and (min-width: 800px) and (max-width: 1300px)": {
       flexBasis: "45%",
     },
   },
@@ -79,3 +79,68 @@ export const totalPop = style({
   fontWeight: "bold",
   fontSize: "1.2rem",
 });
+
+export const continent = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-evenly",
+  padding: "1rem",
+  background: "#222",
+  margin: "0.5rem",
+  borderRadius: "0.4rem",
+});
+
+export const contBars = style({
+  flex: 1,
+  paddingLeft: "0.5rem",
+});
+
+export const contBarTitle = style({
+  fontWeight: "bold",
+  fontSize: "0.7rem",
+  padding: "0.2rem 0.5rem",
+});
+
+export const contCircle = style({
+  height: "2rem",
+  width: "2rem",
+  borderRadius: "50%",
+  background: "linear-gradient(45deg, var(--upper-color), var(--lower-color))",
+  boxShadow: "0 0 0.5rem 0.1rem rgb(var(--lower-color) / 15%)",
+});
+
+export const contName = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontWeight: "bold",
+  flexDirection: "column",
+  minWidth: "4rem",
+  paddingTop: "0.5rem",
+});
+
+export const jaegerConts = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  padding: "1rem",
+  justifyContent: "space-evenly",
+  backgroundColor: "#222",
+  borderRadius: "0.4rem",
+  margin: "0.5rem",
+});
+
+const alertFade = keyframes({
+  from: {
+    borderColor: "#ff2d2d",
+  },
+  to: {
+    borderColor: "#222",
+  },
+});
+
+export const alertCont = style({
+  border: "2px solid #ff2d2d",
+  animation: `${alertFade} 1s ease-in-out 4 alternate`,
+});