* {
     margin: 0;
     padding: 0;
     font-family: "Poppins", sans-serif;
     box-sizing: border-box;
}

/* for fixed background picture */
body::before {
     content: "";
     position: fixed;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     z-index: -1;
     background: #1b1b32;
     background-image: linear-gradient(
               115deg,
               rgba(58, 58, 158, 0.8),
               rgba(136, 136, 206, 0.7)
          ),
          url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
}

body {
     display: flex;
     flex-direction: column;
     /* align-items: center; */
     color: #f3f3f3;
}

header {
     margin: 2.5rem auto 1.8rem;
     text-align: center;
}

#description {
     font-weight: 100;
     font-style: italic;
}

#survey-form {
     width: 40%;
     display: flex;
     flex-direction: column;
     border-radius: 5px;
     padding: 1.5rem;
     margin: auto;
     background-color: rgba(27, 27, 50, 0.8);
}

div {
     padding-inline: 0.3rem;
     margin: 0.5rem;
     display: flex;
     flex-direction: column;
}

label {
     width: 100%;
}

input,
textarea,
select {
     font-family: "Poppins", sans-serif;
     background-color: #f3f3f3;
     font-size: 15px;
     border-radius: 5px;
     margin-block: 0.3rem;
     text-indent: 8px;
     border: none;
     
}

#name,
#email,
#number,
#comment,
select {
     height: 2.5rem;
     width: 100%;
}

#comment {
     height: 100px;
}

input[type="checkbox"] {
     display: inline;
     height: 1.3rem;
     width: 1.3rem;
     padding: 0.3rem;
}

label {
     display: flex;
     align-items: center;
     margin: 0.1rem;
}
label > input {
     margin-inline: 0.3rem;
}

#submit {
     color: #f3f3f3;
     background-color: #37af65;
     margin: 30px auto 50px;
     height: 40px;
     font-size: 20px;
     border-radius: 3px;
     width: 95%;
     text-align: center;
}

#submit:hover {
     background-color: #277c48;
     background-position: 100% 0;
     transition: all 0.4s ease-in-out;
}