Implement CSS nesting

src/style.css

@@ -10,31 +10,16 @@
 }
 
 .section-header {
-
   display: flex;
   text-align: left;
 
   justify-content: space-between;
-  /* flex-flow: wrap; */
-  /* flex-wrap: wrap; */
-
-  /* height: 100%; */
-  /* padding: 15px; */
-  /* gap: 5px; */
 
+  h1 {
+    font-size: 48pt;
+  }
 }
 
-.section-header h1 {
-  font-size: 48pt;
-}
-
-/* .section-header>div { */
-/* background: #ffecb3; */
-/* border: 3px solid #ffcc80; */
-/* border-radius: 5px; */
-/* padding: 8px; */
-/* } */
-
 center:has(> blockquote) {
   margin: 10px auto;
   font-size: min(5vw, 22pt);
@@ -42,20 +27,22 @@ center:has(> blockquote) {
   border-radius: 5px;
 }
 
-blockquote p {
-  text-align: center;
-}
+blockquote {
+  p {
+    text-align: center;
+  }
 
-blockquote p::before {
-  content: "\201C";
-}
+  p::before {
+    content: "\201C";
+  }
 
-blockquote p::after {
-  content: "\201D";
-}
+  p::after {
+    content: "\201D";
+  }
 
-blockquote+p {
-  text-align: right;
+  &+p {
+    text-align: right;
+  }
 }
 
 html {
@@ -63,28 +50,27 @@ html {
   font-family: system-ui;
 }
 
-
 #page-content {
   background-image: linear-gradient(to bottom, #000000, #636363 1024px);
+
+  &,
+  &>* {
+    position: relative;
+    z-index: 1;
+  }
 }
 
 #page-content-content {
   width: var(--page-width);
 }
 
-#page-content,
-#page-content>* {
-  position: relative;
-  z-index: 1;
-}
-
 #footer {
   background-color: #484848;
-}
 
-#footer p,
-#footer li {
-  font-size: 8pt;
+  p,
+  li {
+    font-size: 8pt;
+  }
 }
 
 .footnotes {
@@ -97,14 +83,19 @@ html {
   display: flex;
   align-items: center;
   margin: 32px;
-}
 
-.project>div {
-  padding: 16px;
+  &>div {
+    padding: 16px;
+  }
 }
 
 .project-title {
   min-width: 275px;
+
+  h1 {
+    font-size: 24pt;
+    margin: 0;
+  }
 }
 
 .description {
@@ -115,40 +106,37 @@ html {
   display: flex;
   justify-content: space-evenly;
   margin: 20px 0;
-}
 
-.links a {
-  font-size: 16pt;
+  a {
+    font-size: 16pt;
+  }
 }
 
 .tab-list {
   display: flex;
   justify-content: space-around;
+
+  a {
+    background-color: transparent;
+    border: solid 3px transparent;
+    border-bottom: solid 3px #eee;
+    font-size: 16pt;
+  }
+
+  a[aria-selected=true] {
+    font-weight: bold;
+    border-bottom: solid 6px #eee;
+  }
 }
 
-.tab-list a {
-  background-color: transparent;
-  border: solid 3px transparent;
-  border-bottom: solid 3px #eee;
-  font-size: 16pt;
-}
+.figure {
+  &>* {
+    width: 80%;
+  }
 
-.tab-list a[aria-selected=true] {
-  font-weight: bold;
-  border-bottom: solid 6px #eee;
-}
-
-.figure>* {
-  width: 80%;
-}
-
-.figure>svg {
-  height: 80%;
-}
-
-.project-title h1 {
-  font-size: 24pt;
-  margin: 0;
+  &>svg {
+    height: 80%;
+  }
 }
 
 .project-alt {
@@ -224,38 +212,38 @@ a {
   .project {
     flex-direction: column;
     padding: 18px;
-  }
 
-  .project>div {
-    padding-top: 0;
-    padding-bottom: 0;
+    &>div {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    p {
+      font-size: 14pt;
+    }
   }
 
   blockquote {
     margin: 0px auto;
   }
-
-  .project p {
-    font-size: 14pt;
-  }
 }
 
 @media only screen and (max-width: 500px) {
   .tab-list {
     flex-direction: column;
-  }
 
-  .tab-list a {
-    background-color: transparent;
-    border: solid 3px #999;
-    font-size: 16pt;
-    padding: 8px;
-  }
+    a {
+      background-color: transparent;
+      border: solid 3px #999;
+      font-size: 16pt;
+      padding: 8px;
+    }
 
-  .tab-list a[aria-selected=true] {
-    background-color: #eee;
-    font-weight: bold;
-    color: black;
-    border: solid 12px #eee;
+    a[aria-selected=true] {
+      background-color: #eee;
+      font-weight: bold;
+      color: black;
+      border: solid 12px #eee;
+    }
   }
 }