feat: terminal

index.css

@@ -48,9 +48,36 @@ header,
 footer {
   font-size: 1.5em;
   display: flex;
-  justify-content: flex-end;
-  align-items: center;
   padding: 20px;
+  align-items: center;
+}
+
+header {
+  justify-content: space-between;
+}
+footer {
+  justify-content: flex-end;
+}
+
+.cursor {
+  display: inline-block;
+  width: 10px;
+  height: 1em;
+  background-color: white;
+  border: 1px solid black;
+  vertical-align: text-top;
+  animation: blink 1s step-start infinite;
+}
+
+@keyframes blink {
+  50% {
+    background-color: transparent;
+    border-color: transparent;
+  }
+}
+
+.terminal-prompt {
+  font-family: "Courier New", monospace;
 }
 
 .main {
@@ -59,9 +86,9 @@ footer {
   align-items: center;
 }
 
-header a,
-footer a {
-  margin-left: 20px;
+.header-links a,
+.footer-links a {
+  margin-left: 25px;
 }
 
 ul {
@@ -75,26 +102,18 @@ a {
 
 .topics {
   font-size: 2.5em;
-  flex: 1;
-  justify-content: flex-begin;
-  align-items: center;
 }
 
-.topic {
-  margin-bottom: 25px;
-  transition: color 0.5s ease;
-}
-
-.topic.software:hover {
+.software a:hover {
   color: #0073e6;
 }
-.topic.economics:hover {
+.economics a:hover {
   color: #009975;
 }
-.topic.trading:hover {
+.trading a:hover {
   color: #d50032;
 }
-.topic.interview-problems:hover {
+.interview-problems a:hover {
   color: #6a0dad;
 }
 
@@ -107,6 +126,8 @@ a {
   display: inline-block;
   color: inherit;
   text-decoration: none;
+  margin-bottom: 25px;
+  transition: color 0.5s ease;
 }
 
 .topic a::after {