refactored and restyled

src/public/css/createProfile.css

@@ -0,0 +1,62 @@
+
+@media (max-width: 768px) {.over-background > *:first-child {
+  margin-bottom: 5px;
+}
+
+.over-background > *:last-child {
+  margin-top: 5px;
+}
+
+.over-background > * {
+  margin-bottom: 5px;
+  margin-top: 5px;
+}}
+
+
+@media (min-width: 769px) {.over-background > *:first-child {
+  margin-bottom: 10px;
+}
+
+.over-background > *:last-child {
+  margin-top: 10px;
+}
+
+.over-background > * {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}}
+
+.badges {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+
+.badge {
+  border: 2px solid #e1c300;
+  border-radius: 10px;
+  padding: 2%;
+  margin: 1%;
+}
+
+.badge input {
+  max-width: 80%;
+}
+
+.create-profile-card-section > * {
+  text-align: center;
+  margin-bottom: 10px;
+  margin-right: auto;
+  margin-left: auto;
+  display: block;
+  max-width: 1000px;
+}
+
+.create-profile-card-section .badge img {
+  width: 10%;
+}
+
+h2 {
+  margin-top: 0;
+  margin-bottom: 5px;
+}

src/public/css/seca.css

@@ -43,6 +43,30 @@
   }
 }
 
+body {
+  background-color: #bdd5ea;
+}
+
+h1 {
+  color: #e1c300;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.money-input {
+  text-align: end;
+}
+
+.input-is-valid {
+  border: 1px solid green;
+}
+
+.input-is-invalid {
+  border: 2px solid red;
+}
+
 .max-size-zero {
   max-width: 0;
   max-height: 0;
@@ -81,42 +105,6 @@
   height: 50px;
 }
 
-.badges {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-}
-
-.badge {
-  border: 2px solid #e1c300;
-  border-radius: 10px;
-  padding: 2%;
-  margin: 2%;
-}
-
-body {
-  background-color: #bdd5ea;
-}
-
-h1 {
-  color: #e1c300;
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.money-input {
-  text-align: end;
-}
-
-.input-is-valid {
-  border: 1px solid green;
-}
-
-.input-is-invalid {
-  border: 2px solid red;
-}
 
 .button-group button {
   border: 0;
@@ -160,6 +148,7 @@ h1 {
 .shadowed-round-area {
   border-radius: 20px;
   box-shadow: 0 0 13px #ccc;
+  padding: 20px;
 }
 #login-card > * {
   text-align: center;
@@ -169,17 +158,7 @@ h1 {
   margin-bottom: 1vh;
 }
 
-.create-profile-card-section > * {
-  text-align: center;
-  margin-right: auto;
-  margin-left: auto;
-  display: block;
-  max-width: 1000px;
-}
 
-.create-profile-card-section .badge img {
-  width: 10%;
-}
 
 .text-warning {
   color: red;