Gameplay

assets/css/main.css

@@ -10,6 +10,41 @@ h1 {
     text-align: center;
 }
 
+h2 {
+    font-family: "FormulaOne";
+    color: #fff;
+    font-size: 2em;
+    text-align: center;
+    margin: 0;
+}
+
+h3 {
+    font-family: "FormulaOne";
+    color: #fff;
+    font-size: 1.75em;
+    text-align: center;
+    margin: 0;
+    display: inline-block;
+}
+
+h4 {
+    font-family: "FormulaOne";
+    color: #fff;
+    font-size: 1.5em;
+    text-align: center;
+    margin: 0;
+    display: inline-block;
+}
+
+h5 {
+    font-family: "FormulaOne";
+    color: #fff;
+    font-size: 1.25em;
+    text-align: center;
+    margin: 0;
+    display: inline-block;
+}
+
 body {
     font: 16px Arial;
     background-color: #171717;
@@ -78,12 +113,23 @@ input[type=text] {
     color: #ffffff;
 }
 
+.gg .p {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 0.4em
+}
+
+.timer {
+    margin-top: 1.4em;
+}
+
 .board {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    transform: translateY(-50px);
+    transform: translateY(-55px);
 }
 
 .header {
@@ -100,10 +146,10 @@ input[type=text] {
 }
 
 .text {
-    line-height: 50px;
+    line-height: 55px;
     vertical-align: middle;
     position: absolute;
-    width: 50px;
+    width: 55px;
     margin-left: auto;
     margin-right: auto;
     color: white;
@@ -117,12 +163,37 @@ input[type=text] {
 
 .frame {
     background-color: #171717;
-    height: 50px;
-    width: 50px;
+    height: 55px;
+    width: 55px;
     outline: 2px solid #3a3a3c;
     margin: 4px;
     text-align: center;
     position: relative;
+    transition: all 1s;
+}
+
+#time {
+    font-variant-numeric: tabular-nums;
+}
+
+.incorrect {
+    background-color: #eb4b48;
+    border-radius: 10px;
+}
+
+.correct {
+    background-color: #508b53;
+    border-radius: 10px;
+}
+
+.down {
+    background-color: #4d81e4;
+    border-radius: 0px 0px 20px 20px;
+}
+
+.up {
+    background-color: #e78f3a;
+    border-radius: 20px 20px 0px 0px;
 }
 
 .flag {
@@ -130,7 +201,7 @@ input[type=text] {
 }
 
 .team {
-    width: 50px;
+    width: 55px;
     padding: 5px;
     position: absolute;
     top: 50%;