Improve css code

static/style.css

+/* General */
+
 html {
   box-sizing: border-box;
 }
@@ -72,45 +74,6 @@ html[lang="fr"] #frButton {
   cursor: default;
 }
 
-@media (min-width: 992px) {
-  nav {
-    flex-direction: column;
-    width: 7vw;
-    min-height: 100vh;
-    font-size: 3vw;
-  }
-
-  nav > * {
-    width: 7vw;
-    height: 7vw;
-    border-bottom: 1px solid #3b68b0;
-    border-left: initial !important;
-  }
-
-  nav > :nth-child(1) > img {
-    height: initial;
-  }
-
-  nav > *:not(:nth-child(1)) {
-    padding-top: 2vw;
-  }
-
-  #inputs {
-    width: 50%;
-    margin-left: 7vw;
-  }
-
-  #inputs > * {
-    padding-left: 10%;
-    padding-right: 10%;
-  }
-}
-
-@media (max-width: 991px) {
-  #langPicker {
-    display: none;
-  }
-}
 
 nav > .active-tab {
   background-color: #3b68b0;
@@ -187,38 +150,6 @@ a {
   border: 3px solid transparent;
 }
 
-@media (max-width: 991px) {
-  .colorpicker, .iconpicker {
-    flex-wrap: nowrap !important;
-    overflow-x: auto;
-  }
-
-  .colorpicker label, .iconpicker label {
-    flex-shrink: 0;
-  }
-
-  .iconpicker {
-    height: 110px;
-    overflow-y: hidden !important;
-  }
-
-  #inputs > div > h2 {
-    margin-left: 10px;
-  }
-}
-
-@media (max-width: 600px) {
-  .iconpicker {
-    height: 60px;
-
-  }
-
-  .iconpicker > label {
-    width: 50px !important;
-    height: 50px !important;
-  }
-}
-
 div[id^="step"] {
   display: none;
 }
@@ -247,84 +178,6 @@ body, form {
   flex-direction: row;
 }
 
-@media (max-width: 991px) {
-  #credits {
-    display: none;
-  }
-
-  body, form {
-    flex-direction: column;
-  }
-
-  #inputs {
-    margin-top: 16.66vw;
-    padding-bottom: 20px;
-  }
-
-  .randomize-button-container {
-    display: none !important;
-  }
-
-  .navButtons {
-    display: none;
-  }
-
-  textarea, input[type="text"] {
-    width: 90% !important;
-    margin-left: 5% !important;
-  }
-
-  textarea {
-    height: 3.5em;
-  }
-
-  main > div:nth-child(2) {
-    margin: auto;
-  }
-
-  h2.title-big {
-    display: none;
-  }
-
-  div#step3 > .fontpicker {
-    max-height: 150px;
-    overflow-x: auto;
-  }
-}
-
-
-@media (max-width: 600px) {
-  main > div:nth-child(2) > a {
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-  }
-
-  main > div:nth-child(2) button > .text {
-    display: none;
-  }
-
-  .colorpicker > label {
-    width: 60px !important;
-    height: 60px !important;
-    padding: .5em !important;
-  }
-}
-
-@media (min-width: 992px) {
-  main {
-    min-height: 100vh;
-    padding-left: 40px;
-  }
-
-  input#step2value {
-    height: 200px;
-  }
-
-  h2.title-small, main .randomize {
-    display: none;
-  }
-}
-
 main > div:nth-child(2) {
   text-align: right;
   width: 600px;
@@ -339,12 +192,6 @@ main > #credits {
   margin-top: 50px;
 }
 
-@media (min-width: 992px) {
-  a#save-image {
-    margin-top: 2em;
-  }
-}
-
 .iconpicker {
   max-height: 500px;
   overflow-y: auto;
@@ -394,6 +241,138 @@ textarea, input[type="text"] {
   resize: none;
 }
 
+/* big devices >= 992px */
+@media (min-width: 992px) {
+  nav {
+    flex-direction: column;
+    width: 7vw;
+    min-height: 100vh;
+    font-size: 3vw;
+  }
+
+  nav > * {
+    width: 7vw;
+    height: 7vw;
+    border-bottom: 1px solid #3b68b0;
+    border-left: initial !important;
+  }
+
+  nav > :nth-child(1) > img {
+    height: initial;
+  }
+
+  nav > *:not(:nth-child(1)) {
+    padding-top: 2vw;
+  }
+
+  #inputs {
+    width: 50%;
+    margin-left: 7vw;
+  }
+
+  #inputs > * {
+    padding-left: 10%;
+    padding-right: 10%;
+  }
+
+  main {
+    min-height: 100vh;
+    padding-left: 40px;
+  }
+
+  input#step2value {
+    height: 200px;
+  }
+
+  h2.title-small, main .randomize {
+    display: none;
+  }
+}
+
+/* small/medium devices < 991px */
+@media (max-width: 991px) {
+  #langPicker, #credits, .randomize-button-container, .navButtons, h2.title-big {
+    display: none !important;
+  }
+
+  a#save-image {
+    margin-top: 2em;
+  }
+
+  body, form {
+    flex-direction: column;
+  }
+
+  #inputs {
+    margin-top: 16.66vw;
+    padding-bottom: 20px;
+  }
+
+  textarea, input[type="text"] {
+    width: 90% !important;
+    margin-left: 5% !important;
+  }
+
+  textarea {
+    height: 3.5em;
+  }
+
+  main > div:nth-child(2) {
+    margin: auto;
+  }
+
+  div#step3 > .fontpicker {
+    max-height: 150px;
+    overflow-x: auto;
+  }
+
+  .colorpicker, .iconpicker {
+    flex-wrap: nowrap !important;
+    overflow-x: auto;
+  }
+
+  .colorpicker label, .iconpicker label {
+    flex-shrink: 0;
+  }
+
+  .iconpicker {
+    height: 110px;
+    overflow-y: hidden !important;
+  }
+
+  #inputs > div > h2 {
+    margin-left: 10px;
+  }
+}
+
+/* very small devices < 600px */
+@media (max-width: 600px) {
+  main > div:nth-child(2) > a {
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+  }
+
+  main > div:nth-child(2) button > .text {
+    display: none;
+  }
+
+  .colorpicker > label {
+    width: 60px !important;
+    height: 60px !important;
+    padding: .5em !important;
+  }
+
+  .iconpicker {
+    height: 60px;
+  }
+
+  .iconpicker > label {
+    width: 50px !important;
+    height: 50px !important;
+  }
+}
+
+/* Fonts */
 @font-face {
   font-family: 'FiraSans';
   src: url('https://fonts.lqdn.fr/collections/Fira_Sans/FiraSans-Regular.woff2') format('woff2');