Update

styles/style.css

@@ -1,38 +1,57 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+
 body {
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100vh;
 
+    font-family: 'Open Sans', sans-serif;
     background-color: #2c3e50;
     color: #ecf0f1;
 }
 
 .container {
-    text-align: center;
     height: 100%;
-    display: grid;
+    padding: 2.5rem 10rem;
 }
 
-.card {
-    width: 500px;
-    height: 700px;
-
-    margin: auto;
-    padding: 25px;
-
-    background-color: #34495e;
-    border-radius: 10px;
+.resultat {
+    padding: 25px 0;
 }
 
 #password {
-    background-color: #2c3e50;
-    padding: 0 10px;
-    font-size: 2em;
+    
+    font-size: 2rem;
     border-radius: 10px;
-    font-family : consolas
+    font-family: consolas;
+    color: #2ecc71;
 }
 
-fieldset div {
-    text-align: left;
-}
+/* General Range */
+input[type="range"] {
+    -webkit-appearance: none;
+    margin: 18px 0;
+    width: 100%;
+    border-radius: 8px;
+}
+input[type="range"]:focus {
+    outline: none;
+}
+
+/* Chrome Range */
+input[type="range"]::-webkit-slider-runnable-track {
+    height: 8px;
+    cursor: pointer;
+    background-color: #ecf0f1;
+    border-radius: 8px;
+}
+input[type="range"]::-webkit-slider-thumb {
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    background: #ffffff;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: calc( (8px - 30px) / 2);
+}