Fixed card CSS and hint

static/styles/app-cards.css

@@ -10,6 +10,7 @@
   padding: 1em;
   border-radius: 0.5em;
   font-weight: 700;
+  position: relative;
 
   border: 1px solid
     light-dark(
@@ -48,3 +49,40 @@
 .app-card > span {
   font-size: 4em;
 }
+
+.app-card > span.info {
+  position: absolute;
+  top: 0.25em;
+  right: 0.25em;
+  font-size: 1.5em;
+}
+
+.app-card > span.info::before {
+  font-family: var(--font-family-text);
+  content: attr(data-hint);
+  position: absolute;
+  bottom: 1.5rem;
+  left: 0;
+  z-index: 99999;
+  font-size: 1rem;
+  padding: 1em;
+  color: light-dark(
+    var(--light-foreground),
+    var(--dark-foreground)
+  );
+  background-color: light-dark(
+    var(--light-background-color),
+    var(--dark-background-color)
+  );
+  border: 1px solid
+    light-dark(
+      var(--light-foreground-dimmer),
+      var(--dark-foreground-dimmer)
+    );
+  border-radius: 0.5em;
+  display: none;
+}
+
+.app-card > span.info:hover::before {
+  display: block;
+}

static/styles/app.css

@@ -48,3 +48,10 @@
   transform: scaleY(1);
   transform-origin: top;
 }
+
+@media screen and (max-width: 1024px) {
+  #app {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: none;
+  }
+}

static/styles/main.css

@@ -4,10 +4,12 @@
   --dark-background-color: hsl(250, 50%, 8%);
   --dark-foreground: hsl(250, 10%, 90%);
   --dark-foreground-dim: hsl(250, 10%, 70%);
+  --dark-foreground-dimmer: hsl(250, 10%, 25%);
 
   --light-background-color: hsl(250, 50%, 92%);
   --light-foreground: hsl(250, 10%, 10%);
   --light-foreground-dim: hsl(250, 10%, 30%);
+  --light-foreground-dimmer: hsl(250, 10%, 75%);
 
   --dark-accent-color: hsl(150, 70%, 50%);
   --dark-strong-color: hsl(50, 70%, 50%);
@@ -48,13 +50,9 @@ header {
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid
-    color-mix(
-      in srgb,
-      light-dark(
-        var(--light-foreground-dim),
-        var(--dark-foreground-dim)
-      ) 30%,
-      transparent
+    light-dark(
+      var(--light-foreground-dimmer),
+      var(--dark-foreground-dimmer)
     );
 
   font-weight: 700;