Implement CSS nesting

src/style.css

@@ -10,30 +10,15 @@
 }
 
 .section-header {
-
   display: flex;
   text-align: left;
 
   justify-content: space-between;
-  /* flex-flow: wrap; */
-  /* flex-wrap: wrap; */
 
-  /* height: 100%; */
-  /* padding: 15px; */
-  /* gap: 5px; */
-
-}
-
-.section-header h1 {
+  h1 {
     font-size: 48pt;
   }
-
-/* .section-header>div { */
-/* background: #ffecb3; */
-/* border: 3px solid #ffcc80; */
-/* border-radius: 5px; */
-/* padding: 8px; */
-/* } */
+}
 
 center:has(> blockquote) {
   margin: 10px auto;
@@ -42,50 +27,51 @@ center:has(> blockquote) {
   border-radius: 5px;
 }
 
-blockquote p {
+blockquote {
+  p {
     text-align: center;
   }
 
-blockquote p::before {
+  p::before {
     content: "\201C";
   }
 
-blockquote p::after {
+  p::after {
     content: "\201D";
   }
 
-blockquote+p {
+  &+p {
     text-align: right;
   }
+}
 
 html {
   color-scheme: dark;
   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 {
+  p,
+  li {
     font-size: 8pt;
   }
+}
 
 .footnotes {
   padding: 0 40;
@@ -97,14 +83,19 @@ html {
   display: flex;
   align-items: center;
   margin: 32px;
-}
 
-.project>div {
+  &>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 {
+  a {
     font-size: 16pt;
   }
+}
 
 .tab-list {
   display: flex;
   justify-content: space-around;
-}
 
-.tab-list a {
+  a {
     background-color: transparent;
     border: solid 3px transparent;
     border-bottom: solid 3px #eee;
     font-size: 16pt;
   }
 
-.tab-list a[aria-selected=true] {
+  a[aria-selected=true] {
     font-weight: bold;
     border-bottom: solid 6px #eee;
   }
+}
 
-.figure>* {
+.figure {
+  &>* {
     width: 80%;
   }
 
-.figure>svg {
+  &>svg {
     height: 80%;
   }
-
-.project-title h1 {
-  font-size: 24pt;
-  margin: 0;
 }
 
 .project-alt {
@@ -224,38 +212,38 @@ a {
   .project {
     flex-direction: column;
     padding: 18px;
-  }
 
-  .project>div {
+    &>div {
       padding-top: 0;
       padding-bottom: 0;
     }
 
-  blockquote {
-    margin: 0px auto;
+    p {
+      font-size: 14pt;
+    }
   }
 
-  .project p {
-    font-size: 14pt;
+  blockquote {
+    margin: 0px auto;
   }
 }
 
 @media only screen and (max-width: 500px) {
   .tab-list {
     flex-direction: column;
-  }
 
-  .tab-list a {
+    a {
       background-color: transparent;
       border: solid 3px #999;
       font-size: 16pt;
       padding: 8px;
     }
 
-  .tab-list a[aria-selected=true] {
+    a[aria-selected=true] {
       background-color: #eee;
       font-weight: bold;
       color: black;
       border: solid 12px #eee;
     }
   }
+}