update the css to sucks less.

Author: Klaven

frontend_api/assets/css/alert.css

@@ -1,23 +1,24 @@
 :root {
-  --font-size: 1.5vw;
+    --font-size: 4vh;
 }
 
 div.wrapper {
-    border-radius: 1vw;
+    border-radius: 1vh;
     background-color: #2d3140;
     align-items: center;
     display: flex;
     flex-direction: column;
-    background-image: url('../img/background.png');
+    background-image: url("../img/background.png");
     background-size: cover;
-    width: 30vw;
-    height: 30vw;
+    width: 99vh;
+    height: 99vh;
+    margin: 1vh;
 }
 
 p {
     color: #e8e8e8;
     font-size: var(--font-size);
-    padding: 1.5vw;
+    padding: 1.5vh;
     width: 95%;
     height: 90%;
     text-align: center;
@@ -30,16 +31,16 @@ p.message {
     text-align: center;
     margin: 0;
     font-size: var(--font-size);
-    padding: 1vw;
+    padding: 1vh;
 }
 
 p.event {
     text-align: center;
-    margin-bottom: 0vw;
-    margin-top: .7vw;
+    margin-bottom: 0vh;
+    margin-top: 1.5vh;
     font-size: var(--font-size);
     height: fit-content;
-    padding: 1vw;
+    padding: 4.75vh;
     font-weight: bold;
 }
 
@@ -57,13 +58,11 @@ p.raid {
 
 p.resubscribe {
     color: rgb(32, 117, 42);
-
 }
 
-
 h2.message {
-    margin-bottom: .4vw;
-    padding: 0vw;
+    margin-bottom: 2vh;
+    padding: 0vh;
     text-align: center;
     font-size: var(--font-size);
 }
@@ -72,7 +71,7 @@ div#message {
     width: 100%;
     height: 100%;
     display: flex;
-    padding: 1.5vw;
+    padding: 2vh;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
@@ -82,19 +81,18 @@ div#footer {
     width: 100%;
     height: 100%;
     display: flex;
-    padding: 1.5vw;
+    padding: 1.5vh;
     flex-direction: row;
     justify-content: space-around;
     align-items: center;
 }
 
 span#sub {
     color: #9e2b25;
-    font-size: 2vw;
-    padding: 1.5vw;
+    font-size: 6vh;
+    padding: 1.5vh;
     width: 95%;
     height: 90%;
     text-align: center;
     margin: 0;
 }
-

frontend_api/assets/css/main.css

@@ -1,6 +1,15 @@
 /** write some css to display two divs side by side that contain lists of elements */
 /* Path: main.css */
 
+html, mody {
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  background-color: #333;
+  color: #fff;
+}
+
 div {
   display: grid;
   grid-template-columns: repeat(2, 1fr);