added my calculator and snake projects.

src/main.css

@@ -491,17 +491,15 @@ p {
 /**PDF Viewer**/
 .pdf-container {
   margin: 0 auto;
-  width: max-content;
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: 90% 10%;
+
+  border: 1px solid red;
 }
 
 .pdf-document {
   overflow: hidden;
-  height: 100%;
-  width: 50%;
-  width: max-content;
   object-fit: scale-down;
 }
 
@@ -569,19 +567,21 @@ p {
   height: 70vh;
   width: 90%;
   display: grid;
-  grid-template-columns: 10% 80%;
+  grid-template-columns: 10% 90%;
   grid-template-rows: 100%;
 
   margin: 50px auto;
+
+  border: 1px solid white;
 }
 
 #course-view-selector {
   display: grid;
-  grid-template-rows: repeat(7, 10%);
+  grid-template-rows: repeat(13, 7.15%);
 }
 
 .course-nav-selector {
-  border: 2px solid #4a245e;
+  border-bottom: 1px solid #4a245e;
   background-color: #ebd2ff;
   color: #4a245e;
   height: 100%;
@@ -594,6 +594,12 @@ p {
   background-color: #4a245e;
 }
 
+#course-view {
+  height: max-content;
+  width: 100%;
+  border: 1px solid white;
+}
+
 .course-header {
   margin-left: 2vw;
 }
@@ -604,9 +610,11 @@ p {
   display: grid;
   grid-template-columns: 47.5% 47.5%;
   column-gap: 5%;
+  border: 1px solid white;
 }
 
 .course-section-text {
+  border: 1px solid white;
   width: 100%;
 }
 
@@ -709,16 +717,17 @@ p {
   #slcc-splash {
     width: 100%;
     display: grid;
-    grid-template-rows: 50% 50%;
+    grid-template-rows: 40% 40% 5%;
     grid-template-columns: 100%;
   }
 
   .header {
+    height: 100%;
     width: 100%;
 
     display: grid;
     grid-template-columns: 100%;
-    grid-template-rows: 50% 50%;
+    grid-template-rows: 35% 65%;
   }
 
   .header .header-image {
@@ -811,6 +820,9 @@ p {
   .button {
     border-radius: 10px;
   }
+
+  .down-indicator {
+  }
 }
 
 @media (max-width: 485px) {