inline css

static/global.css

@@ -1,11 +1,62 @@
+:root {
+  --background: rgb(43, 41, 48);
+  --foreground: rgb(129, 129, 129);
+  --light: #2B2930;
+}
+
+.custom-grid {
+  grid-template-columns: repeat(auto-fit, minmax(37vw, 1fr));
+}
+
+@media(min-width: 640px) {
+  .custom-grid {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+}
+
+/* work-sans-regular - latin */
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/work-sans-v18-latin-regular.woff2') format('woff2');
+  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* work-sans-700 - latin */
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/work-sans-v18-latin-700.woff2') format('woff2');
+  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+body {
+  background: #141218;
+  padding: 0px 20px;
+}
+
+pre {
+  font-family: Work Sans;
+}
+
+a {
+  color: cadetblue;
+  font-family: Work Sans;
+}
+
 .animate-hover {
-	animation: hover 4s infinite;
+  animation: hover 4s infinite;
 }
 
 @keyframes hover {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: translateY(-15%);
   }
+
   50% {
     transform: translateY(0);
   }
@@ -38,7 +89,7 @@ input[type=number] {
   content: "";
   top: 0;
   left: 0;
-  z-index:0;
+  z-index: 0;
   position: absolute;
   height: 100%;
   width: 100%;
@@ -58,6 +109,6 @@ input[type=number] {
   fill: #dcdbdc;
 }
 
-.items-52 > * {
-    height: 52px;
+.items-52>* {
+  height: 52px;
 }