add: css styling

css/blink-cursor.css

@@ -0,0 +1,8 @@
+.blink-cursor {
+    animation: blink-cursor 1s steps(1) infinite;
+}
+
+@keyframes blink-cursor{
+    0%, 50% { opacity: 0.0; } /* invisible 0%..50% */
+    50%, 100% { opacity: 1.0; } /* visible 50%..100% */
+}

css/corrections.css

@@ -0,0 +1,12 @@
+#title {
+    margin-top: 0;
+}
+
+footer ul,
+#bottom-line {
+    margin: 0;
+}
+
+li {
+    margin-bottom: 0.5rem;
+}

css/glitch.css

@@ -0,0 +1,90 @@
+.glitch {
+  position: relative;
+  display: inline-block;
+  isolation: isolate;
+  z-index: 0;
+}
+
+/* Duplicated text layers inherit the element's color */
+.glitch::before,
+.glitch::after {
+  content: attr(data-glitch);
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  color: inherit;
+  pointer-events: none;
+}
+
+/* Horizontal glitch slices */
+.glitch::before {
+  z-index: 1;
+  animation: glitch-cyan 1.5s infinite steps(1);
+}
+
+.glitch::after {
+  z-index: 2;
+  animation: glitch-red 1.2s infinite steps(1);
+}
+
+/* Horizontal slices move left and right */
+@keyframes glitch-cyan {
+  0%,
+  100% {
+    clip-path: inset(0 0 80% 0);
+    transform: translateX(-8px);
+  }
+
+  15% {
+    clip-path: inset(20% 0 55% 0);
+    transform: translateX(10px);
+  }
+
+  30% {
+    clip-path: inset(55% 0 25% 0);
+    transform: translateX(-12px);
+  }
+
+  45%,
+  70% {
+    clip-path: inset(0 0 100% 0);
+    transform: translateX(0);
+  }
+
+  80% {
+    clip-path: inset(35% 0 45% 0);
+    transform: translateX(7px);
+  }
+}
+
+@keyframes glitch-red {
+  0%,
+  100% {
+    clip-path: inset(75% 0 5% 0);
+    transform: translateX(8px);
+  }
+
+  20% {
+    clip-path: inset(10% 0 70% 0);
+    transform: translateX(-11px);
+  }
+
+  35%,
+  60% {
+    clip-path: inset(0 0 100% 0);
+    transform: translateX(0);
+  }
+
+  75% {
+    clip-path: inset(50% 0 30% 0);
+    transform: translateX(-7px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .glitch::before,
+  .glitch::after {
+    animation: none;
+  }
+}

css/style.css

@@ -0,0 +1,31 @@
+* {
+    color: #ebdbb2;
+    font-family: 'Courier New', Courier, monospace;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    background-color: #282828;
+}
+
+.heading,
+.link {
+    color: #d79921;
+}
+
+.quote {
+    border-left: solid 2px #a89984;
+    padding-left: 1rem;
+    font-style: italic;
+    margin-left: 0.5rem;
+}
+
+.card {
+    width: 70%;
+    margin-inline: auto;
+    margin-top: 5rem;
+    background-color: #3c3836;
+    border-radius: 2rem;
+    padding: 2rem;
+}