formatting, keyboard event, new icon

style.css

@@ -59,14 +59,19 @@ body {
     margin-right: 0.2em;
 }
 
-.container,
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: start;
+}
+
 .dices-container,
 .history-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    max-width: 100%;
+    min-width: 400px;
 }
 
 .dices-container {
@@ -204,18 +209,17 @@ body {
     display: grid;
     align-items: center;
     row-gap: 1em;
-    grid-template-columns: auto auto;
+    grid-template-columns: auto;
 }
 
 .form-container .actions {
     display: flex;
-    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
 }
 
 .form {
-    font-size: 1.5em;
+    font-size: 1.2em;
     display: flex;
     flex-wrap: wrap;
     justify-content: start;
@@ -254,7 +258,6 @@ body {
 
 .history-container .actions button {
     font-size: 1em;
-    margin: 0 0.5em;
 }
 
 .history {
@@ -273,6 +276,8 @@ body {
 
 .history .label {
     font-size: 1.2em;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .history .result {
@@ -281,7 +286,14 @@ body {
     font-weight: bold;
 }
 
-.history .formula {
+.history .formula-container {
+    display: flex;
+    margin: 0 0.5em;
+}
+
+
+.history .formula-container .formula {
+    display: flex;
     margin: 0 0.5em;
 }
 
@@ -300,6 +312,7 @@ button {
     border: none;
     outline: none;
     font-size: 1.3em;
+    margin: 0.5em;
 }
 
 button:hover {
@@ -352,18 +365,19 @@ body.dark .form select {
     border-color: #fff;
 }
 
-@media screen and (min-width: 768px) {
-    .container {
-        padding: 0 250px;
-    }
-}
-
 @media screen and (max-width: 767px) {
     .dices {
         font-size: 0.65em;
     }
 
-    .form-container {
-        grid-template-columns: auto;
+    .container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .dices-container,
+    .history-container {
+        min-width: auto;
+        width: 100%;
     }
 }