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

body {
  color: white;
  background: linear-gradient(0deg, #474753, #071227);
  font-family: Arial, Helvetica, sans-serif;
}
h1,p{

    margin-bottom: 0.4rem;
}

.container {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
  min-height: 100vh;
  padding: 5rem 0;
}
.survey-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}
#survey-form {
  display: grid;
  gap: 1rem;
  border: 1px solid;
  padding: 1rem;
  border-radius: 0.5rem;
  background: rgba(70, 60, 128, 0.322);
  .form-group {
    display: grid;
    & input:not([type="radio"], [type="checkbox"]),
    select, textarea {
      margin-top:0.4rem;
    }
    & input:not([type="radio"], [type="checkbox"]),
    select, textarea,.submit-button {
      padding: 0.5rem 1rem;
      background: rgb(236, 236, 235);
      outline: none;
      border: none;
      border-radius: 0.25rem;
    }
    & [type="radio"],
    [type="checkbox"] {
      margin-bottom: 0.6rem;
    }
    & [type="radio"] + label {
      display: flex;
      gap: 1rem;
    }
    .submit-button{
      padding: 1rem 2rem ;
      color: white;
      background: rgb(46, 34, 82);
    }
  }
  .form-group-options label {
    display: flex;
    gap: 0.4rem;
  }
}