Add "randomize" button

index.html

@@ -16,6 +16,9 @@
       <label for="step5">5</label>
     </nav>
     <div id="inputs">
+      <div>
+	<button id="randomize">CHOISIR AU HASARD</button>
+      </div>
       <input type="radio" name="step" id="step1" checked/>
       <div>
 	<h2>Choisissez 2 couleurs</h2>

style.css

@@ -6,6 +6,7 @@ body {
   margin: auto;
   color: #497ed5;
   min-height: 100vh;
+  background-color: #2f5188;
 }
 
 h2 {
@@ -28,9 +29,13 @@ nav > * {
   cursor: pointer;
 }
 
+nav > label:target {
+  background-color: blue;
+}
+
 div#inputs {
   position: absolute;
-  top: 0;
+  top: 10px;
   left: 7vw;
   width: 30vw;
   height: 100%;
@@ -42,37 +47,52 @@ div#inputs > input[type=radio] + div {
   display: none;
 }
 
-#inputs > input[type=radio]:checked + div {
+div#inputs > input[type=radio]:checked + div {
   display: block;
 }
 
+div#inputs > div:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 7vw;
+  border-bottom: 1px solid #dde5f1;
+}
+
+div#inputs > div:first-child > button#randomize {
+  width: 60%;
+}
+
 div.navButtons {
   float: right;
   margin-right: 20px;
 }
 
-div.navButtons > label {
+div.navButtons > label, button {
   display: inline-block;
   cursor: pointer;
   height: 50px;
   line-height: 50px;
   text-align: center;
+  background-color: white;
+  color: inherit;
+  font-size: inherit;
+  border: 1px solid #497ed5;
 }
 
 label.nextButton {
-  color: white;
-  background-color: #497ed5;
+  color: white !important;
+  background-color: #497ed5 !important;
   width: 200px;
 }
 
 label.prevButton {
   width: 50px;
-  border: 1px solid #497ed5;
 }
 
 main {
   position: absolute;
-  top: 0;
+  top: 10px;
   left: 37vw;
   right: 0;
   background-color: #dde5f1;