Update the design of entire website

style.css

@@ -1,14 +1,34 @@
+:root {
+  --font-weight-normal: 500;
+  --font-weight-medium: 600;
+  --font-weight-bold: 800;
+}
+
 * {
   box-sizing: border-box;
 }
 
 @font-face {
-  font-family: "Bookerly";
+  font-family: "JetBrains Mono Regular";
   font-style: normal;
-  font-weight: normal;
-  src: url("/font/Bookerly.ttf") format("woff2");
+  font-weight: var(--font-weight-normal);
+  src: url("/font/JetBrainsMono-Medium.woff2") format("woff2");
 }
-    
+
+@font-face {
+  font-family: "JetBrains Mono Medium";
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  src: url("/font/JetBrainsMono-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono Bold";
+  font-style: normal;
+  font-weight: var(--font-weight-bold);
+  src: url("/font/JetBrainsMono-ExtraBold.woff2") format("woff2");
+}
+
 html,
 body {
   margin: 0;
@@ -16,29 +36,29 @@ body {
 }
 
 body {
-  font-family: "Bookerly", Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  font-family: "JetBrains Mono Regular", monospace;
   font-feature-settings: "tnum";
   font-variant-numeric: tabular-nums;
-  font-size: 20px;
+  font-size: 16px;
+  font-weight: var(--font-weight-normal);
   line-height: 1.5;
-  font-weight: 400;
   text-decoration: none;
-  color: #444;
-  width: 670px;
+  color: #000;
+  width: 600px;
   margin: 1em auto;
 }
 
 a {
   display: inline-block;
-  color: #0060FF;
-  text-decoration: none;
-  padding-bottom: 0px;
-  border-bottom: 2px solid #0060FF;
+  color: #000;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
 }
 
-a:hover {
-  color: black;
-  border-bottom: 2px solid black;
+p {
+  word-break: break-word;
+  word-wrap: break-word;
+  hyphens: auto;
 }
 
 .header {
@@ -54,7 +74,8 @@ a:hover {
 
 .header p {
   font-size: 20px;
-  color: #0061FF;
+  font-family: "JetBrains Mono Bold", monospace;
+  color: #000;
   margin-left: 10px;
 }
 
@@ -64,17 +85,14 @@ a:hover {
   width: 75px;
 }
 
-.logo > img {
+.logo>img {
   border-radius: 50%;
 }
 
-.header p {
-  color: #444;
-}
-
 nav {
   display: block;
   margin: 2em 0;
+  text-transform: uppercase;
 }
 
 nav a {
@@ -89,12 +107,29 @@ nav a:last-child {
   width: 100%;
 }
 
-.content-wrapper h3 span,
+ul li {
+  list-style: none;
+  list-style-type: square;
+  text-transform: uppercase;
+}
+
+.content-wrapper .title {
+  font-size: 1.2rem;
+  text-transform: uppercase;
+  font-family: "JetBrains Mono Bold", monospace;
+}
+
+.content-wrapper .title span,
 main ul li span {
-  font-size: 17px;
+  font-size: 14px;
+  color: #555;
   font-weight: normal;
 }
 
+.content-wrapper .title span {
+  display: block;
+}
+
 @media only screen and (max-width: 700px) {
   body {
     width: 100%;