High Contrast Button

assets/css/main.css

@@ -131,10 +131,15 @@ input[type=text] {
 .info {
     color: #fff;
     font-size: 2em;
-    position: absolute;
-    right: 1em;
-    top: 1.3em;
     transition: all 0.2s;
+    text-align: right;
+    align-self: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 20px;
+    margin: 0.5em;
+    flex: 1;
 }
 
 .info:hover {
@@ -250,7 +255,18 @@ p a:hover {
 
 .title {
     background-color: #171717;
-    padding: 0.3em;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.title h1 {
+    flex: 1;
+}
+
+.left {
+    flex: 1;
+    margin: 0.5em;
 }
 
 .tutorial {
@@ -529,9 +545,9 @@ p a:hover {
     }
 }
 
-@media(max-width:640px) {
+@media(max-width:820px) {
     h1 {
-        font-size: 3em;
+        font-size: 2.5em;
     }
 
     h2 {
@@ -546,10 +562,6 @@ p a:hover {
         font-size: 1em;
     }
 
-    .info {
-        display: none;
-    }
-
     .frame {
         height: 45px;
         width: 45px;
@@ -586,11 +598,26 @@ p a:hover {
     .tutorial .row {
         flex-direction: column;
     }
+
+    .title h1 {
+        text-align: left;
+    }
+
+    .info {
+        font-size: 1.5em;
+        gap: 10px;
+    }
 }
 
-@media(max-width:400px) {
+@media(max-width:540px) {
+    .left {
+        display: none;
+    }
+}
+
+@media(max-width:430px) {
     h1 {
-        font-size: 2.5em;
+        font-size: 2em;
     }
 
     h2 {
@@ -629,6 +656,10 @@ p a:hover {
     .input {
         width: 280px;
     }
+
+    .info {
+        font-size: 1.25em;
+    }
 }
 
 @media(max-height:720px) {