New Style

static/style.css

@@ -1,18 +1,50 @@
+@font-face {
+    font-display: swap;
+    font-family: 'Rubik';
+    font-style: normal;
+    font-weight: 400;
+    src: url('./fonts/rubik-v28-latin-regular.woff2') format('woff2');
+}
+
 :root {
-    --primary-color: rgb(230, 210, 255);
-    --text-color: rgb(230, 230, 255);
-    --background-color: rgb(50, 35, 75);
+    --primary-color: rgb(205, 188, 255);
+    --text-color: rgb(255, 255, 255);
+    --background-color: rgb(20, 23, 50);
     --second-bg-color: black;
 }
 
+@media screen and (min-width: 650px) {
+    .grid-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 10px;
+        width: 80%;
+        margin: auto;
+    }
+
+    .grid-child {
+        width: 100%;
+        margin: auto;
+        align-content: center;
+        /* border: 2px white solid; */
+    }
+
+    select {
+        width: 70%;
+        max-width: 200px;
+    }
+}
+
+
 * {
     text-align: center;
     color: var(--text-color);
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-family: "Rubik", Verdana, Geneva, Tahoma, sans-serif;
 }
 
 h1,
 h1>* {
+    font-size: 3rem;
     color: var(--primary-color);
     font-weight: 100;
 }
@@ -22,34 +54,60 @@ hr {
 }
 
 p,
-select,
-input,
 li {
-    font-size: 1.3rem;
+    font-size: 1.1rem;
+    line-height: 1.75rem;
 }
 
 p {
     margin: 5px;
 }
 
-body,
-html {
+body {
     background-color: var(--background-color);
+    padding: 0 3%;
+    max-width: 700px;
+    margin: auto;
+    /* outline: 3px blue solid; */
+
+    margin: auto;
+
+    display: flex;
+    align-items: center;
 }
 
-body {
-    padding: 10px;
+.mainDiv {
+    width: 100%;
+    /* outline: 2px white solid; */
+    
+}
+
+@media screen and (min-height: 500px) {
+    html,
+    body {
+        height: 100%;
+    }
 }
 
 select,
 input {
-    background-color: var(--second-bg-color);
+    font-size: 1.3rem;
+    background-color: rgba(0, 0, 20, 0.5);
     color: var(--text-color);
     margin: 5px auto;
-    border: 2px var(--primary-color) solid;
+    border: 2px rgb(150, 135, 165) solid;
     border-radius: 5px;
     padding: 7px;
     display: inline;
+
+    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+input[type="url"] {
+    border: none;
+    border-bottom: 2px white solid;
+    width: 80%;
+    font-size: 1.15remd;
 }
 
 a {
@@ -65,6 +123,10 @@ input:hover {
     border-color: var(--text-color)
 }
 
+option {
+    background-color: rgba(0, 0, 20);
+}
+
 #adv {
     accent-color: var(--primary-color);
     width: 1.15rem;