survey.css

@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');
body {
  font-family: 'Poppins', sans-serif;
  margin:0;
  line-height:1.4;
  color:#f3f3f3;
}
label {
  display: flex;
  align-items:center;
  margin-bottom:0.5rem;
  padding-top:15px;
}
input,
button,
select,
textarea {
  margin:0;
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
}
button {
  border:none;
}
#main {
  width:100%;
  margin:auto;
}
#formbox {
  width:40rem;
  margin:auto;
  border-radius:5px;
  padding:30px 40px 30px 40px;
  background:rgba(27, 27, 50, 0.8);
}
@media (max-width:600px) {
  #formbox {
    min-width:540;
    width:100%;
  }
}
@media (max-width:600px){
  #main {
    min-width:540px;
    width:10%;
  }
}
.center {
  text-align:center;
}
#name,
#email,
#number,
#dropdown,
#most-like,
#submit{
  width:100%;
  height:35px;
}
#textarea {
  width:100%;
  height:120px;
}
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;
}
h1 {
  font-weight:400;
  line-height:1.2;
}
p {
  font-size:1.125rem;
}
.italic {
  font-style:italic;
}
#submit {
  background-color:#37af65;
  color:#f3f3f3;
}