Optimizacion formulario

Practicas/Practicas HTML/Repaso 2/css/style.css

@@ -16,6 +16,7 @@ body {
   background-size: cover;
 }
 
+/* Estilos para la cabecera con menu */
 #main_header {
   width: 100%;
   height: 120px;
@@ -34,13 +35,11 @@ body {
 #main_header > img {
   height: 100px;
 }
-
 .menu {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
-
 .menu li {
   float: left;
   margin: 0 5px;
@@ -54,13 +53,17 @@ body {
   text-shadow: 1px 1px 1px black;
 }
 
+
+/* Ajustes para el posicionamento en las anclas del menu*/
 #inicio,
 #equipo,
 #contacto {
   scroll-margin-top: 150px;
 }
 
-main {
+
+/* Ajustes generales para contenedor general de la web*/
+.main_container {
   background-color: rgba(0, 0, 0, 0.2);
   width: 70%;
   margin: auto;
@@ -71,21 +74,20 @@ main {
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
 }
-
-h1 {
+.main_container  h1 {
   font-size: 4em;
   font-style: italic;
   font-weight: lighter;
   text-shadow: 1px 1px 2px black;
 }
-
-h2 {
+.main_container  h2 {
   font-size: 2em;
   font-style: italic;
   font-weight: lighter;
   text-shadow: 1px 1px 2px black;
 }
 
+/* Ajustes generales para todas las secciones de la web */
 section {
   margin-top: 2em;
   display: flex;
@@ -98,6 +100,7 @@ section p {
   text-align: left;
 }
 
+/* Ajuste especifico para la seccion equipo */
 .equipo-content {
   display: flex;
   flex-wrap: wrap;
@@ -105,17 +108,16 @@ section p {
   gap: 2em;
 }
 
+/* Estilos para las tarjetas de la seccion equipo*/
 .card {
-  width: 320px;
   padding: 0.5em;
   border: 4px solid #2795de;
   color: #2795de;
 }
 .card > img {
   margin-top: 1em;
-  max-height: 320px;
+  max-height: 300px;
 }
-
 .card-details {
   display: flex;
   align-items: center;
@@ -129,12 +131,14 @@ section p {
   color: white;
   font-size: 0.9em;
 }
-
 .card-details span {
   color: #2795de;
   font-weight: bold;
 }
 
+
+
+/* Estilos del footer */
 footer {
   width: 70%;
   margin: auto;
@@ -146,7 +150,6 @@ footer {
   padding: 1em;
   box-sizing: border-box;
 }
-
 footer img {
   width: 80%;
   max-width: 200px;
@@ -165,32 +168,48 @@ footer p {
   height: 48px;
 }
 
+
+
+
+/*Estilos para el Formulario*/
 .form_main {
   width: 100%;
   border: 4px solid #2795de;
   color: #2795de;
   box-sizing: border-box;
-  padding: 0.3em;
+  padding: 1em;
   display: flex;
   flex-direction: column;
   gap: 0.5em;
 }
-
-.form_main > fieldset {
+.form_main fieldset {
   text-align: start;
   border: 4px solid #2795de;
+  background-color: rgb(0, 0, 0, 0.3);
   box-sizing: border-box;
   padding: 0.5em;
   display: flex;
   flex-direction: column;
-  gap: 0.6em;
+  gap: 1em;
 }
-
-label {
+.form_main fieldset label {
   display: inline-block;
   font-weight: bold;
   width: 6em;
 }
+.form_btn {
+  color: #fff;  
+  cursor: pointer;
+  border: 2px solid #2795de;
+  border-radius: 0.4em;
+  font-size: 16px;
+  padding: 0.4em;  
+  height: 100%;
+}
+.form_btn:hover {
+  background-color: #1769aa;
+}
+
 
 .flex_responsive {
   display: flex;
@@ -208,6 +227,10 @@ textarea {
   padding: 0 0.2em;
   vertical-align: middle;
 }
+input[type="radio"] + label {
+  color: white;
+}
+
 
 textarea {
   width: 98%;
@@ -220,10 +243,23 @@ textarea {
   position: fixed;
   right: 10px;
   bottom: 10px;
+  opacity: 0.7;
+  transition: opacity 0.3s ease-in-out;
+}
+#subircaja:hover {
+  opacity: 1;
 }
 #subirimg {
   width: 64px;
   height: 64px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background-color: #2795de;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
+}
+#subirimg:hover {
+  background-color: #1769aa;
 }
 /*********************************************/
 
@@ -239,18 +275,12 @@ textarea {
     font-size: 1em;
   }
 
-  main {
+  .main_container {
     width: 90%;
   }
-
-  .card {
-    width: 230px;
-  }
-
   footer {
     width: 90%;
   }
-
   .flex_responsive {
     display: flex;
     align-items: normal;