<div id="container">
  <header>
    <h1 id="title"><span id="freecodecamp-logo">freeCodeCamp</span> Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>
  </header>

  <form action="" id="survey-form">
    <div>

      <div id="name-container" class="container">
        <label for="name" id="name-label">Name</label>
        <input type="text" id="name" placeholder="Enter your name" required>
      </div>

      <br>

      <div id="email-container" class="container">
        <label for="email" id="email-label">Email</label>
        <input type="email" id="email" placeholder="Enter you email" required>
      </div>

      <br>

      <div id="age-container" class="container">
        <label for="age" id="number-label">Age <span class="optional">(optional)</span></label>
        <input type="number" id="number" min="10" max="99" placeholder="Age">
      </div>
    </div>

    <div class="container">
      <label for="current-role">Which option best describes your current role?</label>
      <br>
      <select id="dropdown">
        <option value="" disabled selected>Select current role</option>
        <option value="student">Student</option>
        <option value="full-time-job">Full Time Job</option>
        <option value="full-time-learner">Full Time Learner</option>
        <option value="prefer-not-to-say">Prefer not to say</option>
        <option value="other">Other</option>
      </select>
    </div>

    <div class="container">Would you recommend freeCodeCamp to a friend?
      <br>
      <br>
      <input type="radio" id="definitely" name="recommend-to-friend" value="definitely">
      <label for="definitely">Definitely</label>
      <br>
      <input type="radio" id="maybe" name="recommend-to-friend" value="maybe">
      <label for="maybe">Maybe</label>
      <br>
      <input type="radio" id="not-sure" name="recommend-to-friend" value="not sure">
      <label for="not-sure">Not sure</label>
    </div>

    <div>What would you like to see improved? <span class="optional">(Check all that apply)</span>
      <br>
      <br>
      <input type="checkbox" id="front-end-projects" value="Front-end Projects">
      <label for="front-end-projects">Front-end Projects</label>
      <br>
      <input type="checkbox" id="back-end-projects" value="Back-end Projects">
      <label for="back-end-projects">Back-end Projects</label>
      <br>
      <input type="checkbox" id="data-visualization" value="Data Visualization">
      <label for="data-visualization">Data Visualization</label>
      <br>
      <input type="checkbox" id="challenges" value="Challanges">
      <label for="challanges">Challanges</label>
      <br>
      <input type="checkbox" id="open-source-community" value="Open Source Community">
      <label for="open-source-community">Open Source Community</label>
      <br>
      <input type="checkbox" id="gitter-help-rooms" value="Gitter help rooms">
      <label for="gitter-help-rooms">Gitter help rooms</label>
      <br>
      <input type="checkbox" id="videos" value="videos">
      <label for="videos">Videos</label>
      <br>
      <input type="checkbox" id="city-meetups" value="City Meetups">
      <label for="city-meetups">City Meetups</label>
      <br>
      <input type="checkbox" id="wiki" value="Wiki">
      <label for="wiki">Wiki</label>
      <br>
      <input type="checkbox" id="forum" value="Forum">
      <label for="forum">Forum</label>
      <br>
      <input type="checkbox" id="additional-courses" value="Additional Courses">
      <label for="additional-courses">Additional Courses</label>
    </div>

    <div class="container">
      <p>Any comments or suggestions?</p>
      <textarea placeholder="Enter your comments here..."></textarea>
    </div>

    <input type="submit" id="submit">
  </form>
</div>

html {
  background: url(https://www.freecodecamp.org/news/content/images/2020/01/freecodecamp.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.container {
  margin-bottom: 1rem;
}

h1 {
  font-size: 6vw;
  text-align: center;
  color: rgb(10, 10, 35);
}
span#freecodecamp-logo {
  font-family: "Courier New", monospace;
  font-size: 7vw;
  font-weight: 900;
}
p#description {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  color: rgba(10, 10, 35);
  font-size: 2vh;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 0.3rem;
  padding: 0.3rem;
}

div {
  font-family: "Trebuchet MS", monospace;
  font-weight: 600;
  font-size: 1.2rem;
}
form {
  background: rgb(10, 10, 35, 0.8);
  color: white;
  width: 50%;
  margin: 0 auto;
  border-radius: 0.4rem;
  padding: 2rem;
}
span.optional {
  font-weight: 100;
  font-size: 1rem;
}
input#name,
input#email,
input#number,
select {
  width: 100%;
}
label {
  font-family: "Trebuchet MS", monospace;
  font-size: 1.2rem;
}

input,
select {
  font-size: 1rem;
  padding: 0.2rem;
}
textarea,
input,
select {
  border-radius: 0.3rem;
  font-family: "Courier New", monospace;
}

textarea {
  width: 40vw;
  height: 20vh;
  font-size: 1rem;
  padding: 0.3rem;
}
input#submit {
  background-color: rgb(59, 59, 79);
  color: white;
  font-size: 2rem;
  font-weight: 900;
  border-radius: 0.3rem;
  padding: 0.5rem;
}
input#submit:hover {
  background: #fff;
  color: rgb(59, 59, 79);
}