update

style.css

@@ -6,6 +6,7 @@
 body {
     background-color: #fff;
     color: #000;
+    font-family: 'Courier New', Courier, monospace;
 }
 
 .hidden {
@@ -68,6 +69,11 @@ body {
     max-width: 100%;
 }
 
+.dices-container {
+    margin-top: 1em;
+    font-size: 0.8em;
+}
+
 .dices {
     display: flex;
     justify-content: center;
@@ -95,6 +101,7 @@ body {
     align-items: center;
     margin-top: 0.2em;
     z-index: 2;
+    font-size: 1.3em;
     height: 2em;
 }
 
@@ -121,6 +128,7 @@ body {
     position: relative;
     width: 100%;
     height: 100%;
+    background-color: #000;
     mask-size: contain;
     mask-repeat: no-repeat;
     mask-position: center;
@@ -191,48 +199,98 @@ body {
     mask-image: url(./assets/dices/custom.svg);
 }
 
-.form {
+.form-container {
+    margin-top: 1em;
+    display: grid;
+    align-items: center;
+    row-gap: 1em;
+    grid-template-columns: auto auto;
+}
+
+.form-container .actions {
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.form {
+    font-size: 1.5em;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: start;
     align-items: center;
-    margin-top: 1em;
 }
 
 .form input,
 .form select {
+    font-size: 0.9em;
     width: 5em;
+    height: 2.2em;
+    background-color: #fff;
+    font-family: 'Courier New', Courier, monospace;
+    border: 0.15em solid #000;
+    outline: none;
+    padding: 0.4em;
+    box-sizing: border-box;
+}
+
+.form #inputText {
+    width: 22em;
+    max-width: 99vw;
 }
 
 .history-container {
-    margin-top: 2em;
-    width: 400px;
+    margin: 2em 0;
+    max-width: 99vw;
 }
 
-.history-container .menu {
+.history-container .actions {
     display: flex;
-    justify-content: space-between;
+    flex-wrap: wrap;
+    justify-content: space-around;
     width: 100%;
 }
 
+.history-container .actions button {
+    font-size: 1em;
+    margin: 0 0.5em;
+}
+
 .history {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(4, auto);
     width: 100%;
     margin-top: 2em;
-}
-
-.history .entry {
-    margin: 0.3em 0;
-    display: grid;
-    grid-template-columns: 1fr 1fr 0.5fr 5fr;
+    row-gap: 0.3em;
+    column-gap: 0.3em;
 }
 
 .history hr {
     width: 100%;
+    grid-column: span 4;
+}
+
+.history .label {
+    font-size: 1.2em;
+}
+
+.history .result {
+    text-align: center;
+    font-size: 1.2em;
+    font-weight: bold;
+}
+
+.history .formula {
+    margin: 0 0.5em;
+}
+
+.history .time {
+    text-align: right;
 }
 
 button {
+    font-family: 'Courier New', Courier, monospace;
     cursor: pointer;
     display: flex;
     justify-content: center;
@@ -279,12 +337,33 @@ body.dark button {
     color: #fff;
 }
 
+body.dark .dice .dice-image {
+    background-color: #fff;
+}
+
 body.dark .dice.selected .dice-image-container {
     filter: drop-shadow(0.1em 0.1em 0.1em #efefef) drop-shadow(-0.1em -0.1em 0.1em #efefef);
 }
 
-@media screen and (max-width: 720px) {
+body.dark .form input,
+body.dark .form select {
+    color: #fff;
+    background-color: #000;
+    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;
+    }
 }