refactor: use css vars, remove some useless css properties

stylesheet.css

@@ -1,37 +1,45 @@
-body{
+:root {
+    --color: #161616;
+
+    --primary-color: #E04855;
+    --on-primary: black;
+
+    --dark: #161616;
+    --on-dark: #E04855;
+
+
+    --space-xsmall: 5px;
+    --space-medium: 20px;
+}
+
+body {
     background-image: url(img/background.jpg);
     font-family: "Montserrat", sans-serif;
     font-optical-sizing: auto;
     text-align: justify;
     line-height: 25px;
-    color: #161616;
+    color: var(--color);
+}
+
+
+h1{
+    font-family: "Knewave", system-ui;
+    text-transform: uppercase;
+    text-align: center;
+    margin: var(--space-xsmall);
 }
 
 p {
-    margin-bottom: 20px;
+    margin-bottom: var(--space-medium);
-}
-
-h1{
-    text-transform: uppercase;
-    text-align: center;
-    font-family: "Knewave", system-ui;
-    color: #161616;
-    font-size: xx-large;
-    font-weight: 900;
-    padding: 0px;
-    margin: 5px;
 }
 
 
 .content {
-    margin-top: 2em;
+    margin: 2em auto 0 auto;
-    align-self: center;
-    margin-left: auto;
-    margin-right: auto;
     max-width: 1100px;
 }
 
-.separator{
+.separator {
     width: 150px;
     height: 125px;
     display: block;
@@ -39,29 +47,25 @@ h1{
     margin-right: auto;
     background-image: url(img/frog.png);
 }
-.separator:hover{
+
+.separator:hover {
     background-image: url(img/frog-hover.png);
 }
-.separator:active{
+
+.separator:active {
     background-image: url(img/frog-cwak.png);
 }
 
-/* Menu */
-
 fc-menu {
     background-image: url(img/background-black-red.jpg);
     margin-bottom: 1em;
-    -webkit-font-smoothing: antialiased;
     height: 2.4em;
     overflow: hidden;
-    -webkit-transition: height 0.5s;
-    -moz-transition: height 0.5s;
-    -ms-transition: height 0.5s;
     transition: height 0.5s;
 }
 
 fc-menu .pure-menu-heading {
-    color: #DB2937;
+    color: var(--primary-color);
     font-weight: 900;
     font-size: large;
 }
@@ -85,38 +89,26 @@ fc-menu-toggle-button {
 }
 
 fc-menu-toggle-button .bar {
-    background-color: #777;
     display: block;
+    background-color: #777;
     width: 20px;
     height: 2px;
     border-radius: 100px;
     position: absolute;
     top: 18px;
     right: 7px;
-    -webkit-transition: all 0.5s;
-    -moz-transition: all 0.5s;
-    -ms-transition: all 0.5s;
     transition: all 0.5s;
 }
 
 fc-menu-toggle-button .bar:first-child {
-    -webkit-transform: translateY(-6px);
-    -moz-transform: translateY(-6px);
-    -ms-transform: translateY(-6px);
     transform: translateY(-6px);
 }
 
 .open fc-menu-toggle-button .bar {
-    -webkit-transform: rotate(45deg);
-    -moz-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }
 
 .open fc-menu-toggle-button .bar:first-child {
-    -webkit-transform: rotate(-45deg);
-    -moz-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
     transform: rotate(-45deg);
 }
 
@@ -125,7 +117,6 @@ fc-menu-toggle-button .bar:first-child {
 }
 
 @media (max-width: 47.999em) {
-
     .fc-right-menu {
         text-align: left;
     }
@@ -133,5 +124,4 @@ fc-menu-toggle-button .bar:first-child {
     fc-menu-toggle-button {
         display: block;
     }
-
 }