Help with a web page in the responsive form

HTML & CSS
10

Try this…

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Add your CSS here */

/* Use a common font-size for the body */
body {
  font-family : Arial, sans-serif;
  font-size: 16px;
  background: linear-gradient (68.15deg, blue, gray, green);
}

/* Use flexbox to center the heading */
h1 {
  display: flex;
  justify-content: center;
}

/* Use relative units for the form width and margin */
form { 
  margin : auto; 
  max-width: 20em;
}

/* Use relative units for the label margin */
label { 
  display : block; 
  margin-bottom: 0.625em;
}

/* Use relative units for the input and textarea padding and margin */
input[type = "text"],
input[type = "email"], 
textarea { 
  padding: 0.625em; 
  width: 100%; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  box-sizing: border-box; 
  margin-bottom: 1.25em;
}

/* Use relative units for the submit button padding */
submit{ 
  background-color : #4CAF50;
  color : #fff;
  padding : 0.625em 1.25em; 
  border : none; 
  border-radius : 4px; 
  cursor : pointer;
}

/* Use relative units for the button hover effect */
button:hover { 
  background-color : #3e8e41;
}

/* Use a common media query for all elements that need to change on smaller screens */
@media screen and (max-width: 37.5em) {
  
    /* Use relative units for the form width and margin */
    form{
      width:70%;
      margin-left:10%;
      padding-left:5%;
    }

    /* Use relative units for the submit button width and margin */
    .enviar{
      width:70%;
      margin-left:1%;
    }

    /* Use flexbox to make the header menu responsive */
    .header-menu{
      display:flex;
      flex-wrap: wrap;
      gap:2em;
      justify-content:center;
    }

    /* Use relative units for the header menu item font size */
    .header-menu-item{
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-weight:400;
      font-size:1.125em;
    }

    /* Use grid to make the table responsive */
    table {
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:0.5em;
    }

    /* Hide the table caption on smaller screens */
    table caption {
      display:none;
    }
    
    /* Use pseudo-elements to show the table headers on smaller screens */
    table td::before {
      content: attr(data-label);
      float:left;
      font-weight: bold;
      text-transform: uppercase;
    }
}

/* Use a common class for the wrapper elements */
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

/* Use flexbox to make the header responsive */
.header {
  display:flex;
  flex-direction:row;
  padding:24px;
  align-items:center;
  justify-content:space-around;
  background: tomato;
}

/* Use relative units for the footer background */
.footer {
  background: lightgreen;
}

/* Use relative units for the main text alignment and background */
.main {
  text-align: left;
  background: deepskyblue;
}

/* Use relative units for the aside backgrounds */
.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

/* Use a common media query for all elements that need to change on larger screens */
@media all and (min-width: 50em) {

    /* Use flexbox to make the wrapper responsive */
    .wrapper {
      display: flex;  
      flex-flow: row wrap;
      font-weight: bold;
      text-align: center; 
    }

    /* Use relative units for the aside flex-basis */
    .aside { 
      flex-basis: 20%; 
    }
}
</style>
</head>
<body>
<!-- Add your HTML here -->
</body>
</html>