Reformat the css code.

style.css

@@ -15,13 +15,16 @@ img {
   border-radius: 15px;
 }
 
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
   padding-top: 0px;
   padding-bottom: 10px;
   text-align: center;
 }
 
-th{
+th {
   font-weight: normal;
 }
 
@@ -29,7 +32,7 @@ p {
   padding-bottom: 10px;
 }
 
-#topbar{
+#topbar {
   display: inline-block;
   padding: 0 5px;
 }
@@ -39,9 +42,9 @@ div#annoucement {
 }
 
 table#table1 {
-    text-align:left; 
+  text-align: left;
-    margin-left:35; 
+  margin-left: 35;
-    margin-right:auto; 
+  margin-right: auto;
 }
 
 ul#course {
@@ -54,10 +57,13 @@ ul#course {
   opacity: 0.8;
   overflow: hidden;
   background-color: #333;
-    position: fixed; /* Set the navbar to fixed position */
+  position: fixed;
-    top: 0; /* Position the navbar at the top of the page */
+  /* Set the navbar to fixed position */
+  top: 0;
+  /* Position the navbar at the top of the page */
   left: 0;
-    width: 100%; /* Full width */
+  width: 100%;
+  /* Full width */
   text-align: center;
   font-weight: bold;
 }
@@ -80,7 +86,8 @@ ul#course {
 
 /* Main content */
 .main {
-    margin-top: 5px; /* Add a top margin to avoid content overlay */
+  margin-top: 5px;
+  /* Add a top margin to avoid content overlay */
 }
 
 hr {
@@ -88,27 +95,25 @@ hr {
 }
 
 .notATable {
-  display:table;
+  display: table;
-  list-style:none;
+  list-style: none;
-  padding-left:5;
+  padding-left: 5;
   /* font-size:16px; */
 }
 
-.notATable > li 
+.notATable>li {
-{
+  display: table-row;
- display:table-row;
 }
 
-.notATable > li > *
+.notATable>li>* {
-{
+  display: table-cell;
- display:table-cell;
+  padding: 2px;
- padding:2px;
 }
 
 
 .notATable label {
- font-weight:bold;
+  font-weight: bold;
- text-align:right;
+  text-align: right;
 }
 
 .notATable label:after {
@@ -123,46 +128,46 @@ hr {
 }
 
 hr.style-one {
-border: 0;
+  border: 0;
-height: 1px;
+  height: 1px;
-background: #333;
+  background: #333;
-background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
-background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
-background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
-background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
 }
 
 hr.style-zero {
-border: 0;
+  border: 0;
-height: 0px;
+  height: 0px;
-background: #333;
+  background: #333;
-background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
-background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
-background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
-background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
+  background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
 }
 
 hr.curve {
-border: 0;
+  border: 0;
-height: 15px;
+  height: 15px;
-background-image: url(curve.png);
+  background-image: url(curve.png);
-background-size: 100% 100%;
+  background-size: 100% 100%;
-background-repeat: no-repeat;
+  background-repeat: no-repeat;
 }
 
 .box {
-	width:100%;
+  width: 100%;
-	height:280px;
+  height: 280px;
-	background:rgb(220, 220, 220);
+  background: rgb(220, 220, 220);
-	margin:40px auto;
+  margin: 40px auto;
 }
 
-.effect2
+.effect2 {
-{
   position: relative;
 }
-.effect2:before, .effect2:after
+
-{
+.effect2:before,
+.effect2:after {
   z-index: -1;
   position: absolute;
   content: "";
@@ -170,7 +175,7 @@ background-repeat: no-repeat;
   left: 10px;
   width: 50%;
   top: 80%;
-  max-width:300px;
+  max-width: 300px;
   background: #777;
   -webkit-box-shadow: 0 15px 10px #777;
   -moz-box-shadow: 0 15px 10px #777;
@@ -181,8 +186,8 @@ background-repeat: no-repeat;
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
 }
-.effect2:after
+
-{
+.effect2:after {
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
   -o-transform: rotate(3deg);
@@ -272,9 +277,11 @@ background-repeat: no-repeat;
   0% {
     -webkit-transform: translate(-15px);
   }
+
   50% {
     -webkit-transform: translate(15px);
   }
+
   100% {
     -webkit-transform: translate(-15px);
   }
@@ -284,9 +291,11 @@ background-repeat: no-repeat;
   0% {
     -webkit-transform: translate(15px);
   }
+
   50% {
     -webkit-transform: translate(-15px);
   }
+
   100% {
     -webkit-transform: translate(15px);
   }
@@ -296,9 +305,11 @@ background-repeat: no-repeat;
   0% {
     -moz-transform: translate(-15px);
   }
+
   50% {
     -moz-transform: translate(15px);
   }
+
   100% {
     -moz-transform: translate(-15px);
   }
@@ -308,9 +319,11 @@ background-repeat: no-repeat;
   0% {
     -moz-transform: translate(15px);
   }
+
   50% {
     -moz-transform: translate(-15px);
   }
+
   100% {
     -moz-transform: translate(15px);
   }
@@ -320,9 +333,11 @@ background-repeat: no-repeat;
   0% {
     transform: translate(-15px);
   }
+
   50% {
     transform: translate(15px);
   }
+
   100% {
     transform: translate(-15px);
   }
@@ -332,9 +347,11 @@ background-repeat: no-repeat;
   0% {
     transform: translate(15px);
   }
+
   50% {
     transform: translate(-15px);
   }
+
   100% {
     transform: translate(15px);
   }