* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

main {
  font-family: "Poppins", sans-serif;
  background: url("https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg") no-repeat center center/cover;
  background-color: rgba(88, 88, 145, 0.8);
  background-blend-mode: lighten;
  background-attachment: fixed;
  position: relative;
  color: white; }
  main .container {
    padding: 3.125rem 15% 0 15%;
    width: 100%; }
  @media (max-width: 500px) {
    main .container {
      padding: 0; } }
  main header {
    text-align: center;
    margin-bottom: 1.5rem; }
    main header #title {
      margin-bottom: 0.5rem; }
    main header .description {
      font-style: italic; }
  @media (max-width: 500px) {
    main header {
      margin-bottom: 0;
      padding: 1rem 0;
      height: 35vh;
      display: flex;
      flex-direction: column;
      justify-content: center; } }
  main #survey-form {
    background-color: rgba(46, 43, 71, 0.9);
    border-radius: 3px;
    padding: 2rem 3rem; }
    main #survey-form .form-box {
      display: flex;
      flex-direction: column; }
      main #survey-form .form-box label {
        margin-bottom: 0.5rem; }
      main #survey-form .form-box input:not([type="checkbox"]):not([type="radio"]),
      main #survey-form .form-box select {
        height: 2.5rem;
        border-radius: 5px;
        text-indent: 10px; }
    main #survey-form #comments {
      height: 5rem;
      text-indent: 10px; }
    main #survey-form #submit {
      width: 100%;
      height: 2.5rem;
      border-radius: 3px;
      background-color: #37af65;
      color: white;
      font-size: large; }
  @media (max-width: 500px) {
    main #survey-form {
      width: 100%;
      padding: 1rem;
      background-color: #2e2b47; } }
  main #survey-form > div {
    margin: 2rem 0; }
  main .form-box div {
    margin: 0.5rem 0; }