Changed several px to em.

style.css

@@ -1,6 +1,6 @@
 html {
   scroll-behavior: smooth;
-  max-width: 800px;
+  max-width: 50em;
   margin: auto;
 }
 
@@ -8,21 +8,21 @@ body {
   font-family: "Palatino", "Georgia", Times, serif;
   background-color: rgb(255, 255, 250);
   line-height: 1.4;
-  padding-bottom: 200px;
+  padding-bottom: 12.5em;
   text-size-adjust: none;
   -webkit-text-size-adjust: none;
 }
 
 img {
-  border-radius: 15px;
+  border-radius: 1em;
 }
 
 h1,
 h2,
 h3,
 h4 {
-  padding-top: 0px;
-  padding-bottom: 10px;
+  padding-top: 0em;
+  padding-bottom: 0.5em;
   text-align: center;
 }
 
@@ -31,16 +31,16 @@ th {
 }
 
 p {
-  padding-bottom: 10px;
+  padding-bottom: 0.5em;
 }
 
 #topbar {
   display: inline-block;
-  padding: 0 5px;
+  padding: 0 0.25em;
 }
 
 div#annoucement {
-  width: 750px;
+  width: 45em;
 }
 
 table#table1 {
@@ -76,7 +76,7 @@ ul#course {
   display: inline-block;
   color: #f2f2f2;
   text-align: center;
-  padding: 10px 16px;
+  padding: 0.625em 1em;
   text-decoration: none;
 }
 
@@ -88,12 +88,12 @@ ul#course {
 
 /* Main content */
 .main {
-  margin-top: 5px;
+  margin-top: 0.3em;
   /* Add a top margin to avoid content overlay */
 }
 
 hr {
-  border-top: dashed 1px;
+  border-top: dashed 0.1em;
 }
 
 .notATable {
@@ -124,9 +124,9 @@ hr {
 
 #shadowbox {
   border: 0px solid;
-  border-radius: 15px;
-  padding: 10px;
-  box-shadow: 5px 5px 18px #999999;
+  border-radius: 1em;
+  padding: 0.6em;
+  box-shadow: 0.3em 0.3em 1em #999999;
 }
 
 hr.style-one {