fixed flex box

static/css/styles.css

@@ -9,12 +9,17 @@
 }
 
 body {
-  margin-block-start: 15px;
   font-family: Montserrat;
   background-color: var(--background-color);
   color: var(--color);
   text-align: center;
-  overflow: scroll;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100vh;
 }
 
 header {
@@ -24,12 +29,14 @@ header {
   flex-direction: row;
   align-items: center;
   gap: 1rem;
+  height: 4rem;
+  padding: 0.5rem 1rem;
 }
 
 main {
-  max-width: 500px;
-  width: 100%;
+  max-width: 600px;
   margin-inline: auto;
+  padding: 1rem;
 }
 
 * {
@@ -37,13 +44,13 @@ main {
 }
 
 @media (min-width: 768px) {
-  body {
+  body > * {
     zoom: 1.4;
   }
 }
 
 @media (min-width: 2000px) {
-  body {
+  body > * {
     zoom: 1.6;
   }
 }
@@ -143,7 +150,7 @@ a {
 
 /* Display a checkmark when the checkbox is checked */
 .checkbox input[type="checkbox"]:checked + .checkbox-shape::before {
-  content: "✔";
+  content: "✓";
   color: #a012c7;
   font-size: 20px;
   text-align: center;
@@ -182,6 +189,13 @@ a {
 
 .setup-header > h2 {
   margin-block-start: 20px;
+  padding: 0 24px;
+}
+
+@media (max-width: 768px) {
+  .setup-header > h2 {
+    font-size: 24px;
+  }
 }
 
 .setup-header .header-title {
@@ -224,7 +238,9 @@ footer {
   max-width: 500px;
   width: 100%;
   margin-inline: auto;
-  margin-top: 18px;
+  padding-top: 18px;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 footer .footer-text {
@@ -241,4 +257,4 @@ footer .footer-text {
 
 .hidden-button {
   visibility: hidden;
-}
+}