Errorpage + RAPLA-Styling

static/cal.scss

@@ -6,12 +6,12 @@
   --timeHeight: 60px;
   --halfTimeHeight: 30px;
   --quartTimeHeight: 15px;
-  --calBgColor: #fff1f8;
-  --eventBorderColor: #f2d3d8;
-  --eventColor1: #ffd6d1;
+  --calBgColor: #3f2d2d;
+  --eventBorderColor: #000000;
+  --eventColor1: #b82424;
   --eventColor2: #fafaa3;
-  --eventColor3: #e2f8ff;
-  --eventColor4: #d1ffe6;
+  --eventColor3: #1894bb;
+  --eventColor4: rgba(184, 36, 36, 0.65);
 }
 
 .calendar {
@@ -22,11 +22,12 @@
 }
 
 select {
-  width: 300px;
+  width: 100%;
   height: 40px;
   border-radius: 5px;
+  color: white;
   border-color: transparent;
-  background-color: var(--eventColor4);
+  background-color: var(--calBgColor);
   text-align: center;
 }
 
@@ -39,15 +40,15 @@ select {
 
 .changeweek {
   font-size: 2.5em;
-  color: black;
   text-decoration: none;
   font-weight: 600;
+  color: white;
 }
 
 .changeweek:hover {
   color: transparent;
   -webkit-text-fill-color: transparent;
-  -webkit-text-stroke: 2px black;
+  -webkit-text-stroke: 3px white;
 }
 
 h2 {
@@ -69,7 +70,8 @@ h2 {
 
 button {
   border-radius: 5px;
-  border-color: black;
+  border-color: white;
+  color: white;
   border-style: solid;
   background: transparent;
   font-weight: 600;
@@ -111,6 +113,7 @@ option {
   display: grid;
   grid-template-rows: repeat(var(--numQuartHours), var(--quartTimeHeight));
   border-radius: 5px;
+  color: black;
   background: var(--calBgColor);
 }
 
@@ -140,7 +143,8 @@ option {
   border-radius: 5px;
   padding: 0.5rem;
   margin: 0 0.5rem;
-  background: white;
+  color: white;
+  background: var(--eventColor4);
   position: relative;
 }
 
@@ -152,7 +156,9 @@ option {
 // Global / Etc
 
 body {
-  font-family: system-ui, sans-serif;
+  font-family: "Asap", "Calibri", "Arial", sans-serif;
+  color: white;
+  background-color: black;
 }
 
 .date {
@@ -191,6 +197,7 @@ nav ul {
     left: 0;
     height: 100%;
     overflow-y: auto;
+    font-size: 150%;
 }
 
 nav li {
@@ -215,19 +222,15 @@ nav li.start a {
     padding-top: 30px;
 }
 
-nav a.top.selected {
+nav a.selected {
     color: red;
-  background-color: black
+    background-color: black
 }
 
 nav li.top.selected {
     border-color: red;
 }
 
-nav li a.selected {
-    background-color: white;
-    color: black
-}
 
 nav li a {
     display: block;
@@ -243,7 +246,7 @@ nav li a:hover {
 nav li .bottom {
     position: absolute;
     bottom: 0;
-    width: 100%;
+    width: 200px;
 }