body {

  font-family: Arial, sans-serif;

  background-color: #f3f3f9;

  margin: 0;

  padding: 0;

}



.container {

  width: 50%;

  margin: 50px auto;

  background-color:white;

  padding: 20px;

  color: #000;

  box-shadow: white;

  border: 1px solid #4caf50;

  border-radius: 5px;

}



h2 {

  text-align: center;

  margin-bottom: 30px;

}



.form-group {

  margin-bottom: 15px;

}



.form-group label {

  display: block;

  margin-bottom: 5px;

  font-weight: 550;

}



.form-group input{

  width: 97%;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 4px;

}

.form-group select{

  width: 100%;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 4px;

}

.form-group textarea {

  width: 90%;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 4px;

}



.form-group button {

  width: 100%;

  padding: 10px;

  background:red;

  border: none;

  color: yellow;

  font-size: 16px;

  cursor: pointer;

  border-radius: 4px;

}



.form-group button:hover {

  background: #000;

}



@media (max-width: 768px) {

  .container {

    width: 80%;

    margin: 10px auto;

  }





  .form-group input,

  .form-group select,

  .form-group textarea {

    padding: 8px;

  }



  .form-group button {

    font-size: 14px;

    padding: 10px;

  }

}



@media (max-width: 480px) {

  .container {

    width: 95%;

    margin: 5px auto;

  }







  .form-group input,

  .form-group select,

  .form-group textarea {

    padding: 6px;

  }



  .form-group button {

    font-size: 12px;

    padding: 8px;

  }

}