body {
  color: #555;
  font-family: -apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  font-size: 14px;
  margin: 0
}

h1 {
  color: #283593;
  margin-left: 1.5em;
  margin-top: 2em
}

h2 {
  display: inline-block;
  font-family: Roboto;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1em;
  margin-bottom: 0;
  min-width: 50px
}

.top-section {
  background-color: #fbfbfb;
  margin-bottom: 70px;
  padding-bottom: 2em
}

.landing p,.landing section {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px
}

.landing h2 {
  margin: 40px auto
}

.landing h3 {
  margin: 20px auto;
  text-align: left
}

.landing img {
  margin-top: 60px
}

.landing h2,.landing h3,.landing ul {
  max-width: 900px
}

.landing ul {
  margin: 20px auto;
  padding-left: 30px
}

.landing li {
  font-size: 1.1em;
  padding: 4px
}

.section-header {
  color: #334357;
  display: block;
  font-size: 36px;
  margin: 60px 0;
  max-width: 100%;
  text-align: center;
  width: 100%
}

@media(max-width: 600px) {
  .section-header {
      padding:0 10px
  }
}

h1.section-header {
  margin-bottom: 10px;
  margin-top: 0;
  padding-top: 40px
}

p.paragraph {
  font-size: 16px;
  margin-bottom: 75px;
  margin-top: 0;
  max-width: 800px;
  text-align: center
}

.wrapper {
  max-width: 800px;
  padding: 0
}

.questions {
  background: #fff;
  border: 2px solid #006C51;
  border-radius: 6px;
  margin: 32px 0;
  padding: 20px
}

@media(max-width: 816px) {
  .questions {
      margin:32px 8px
  }
}

.questions h3 {
  margin: 36px 0 0;
  text-align: center
}

.question {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.question+.question {
  margin-top: 20px
}

.question h3 {
  align-items: center;
  display: flex;
  gap: 8px;
  margin: 0
}

.question .question-marker {
  align-items: center;
  background: #dce3f1;
  border-radius: 50%;
  color: #5e5e71;
  display: block;
  display: flex;
  font-family: Manrope,sans-serif;
  font-size: 14px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px
}

.question .question-options-container {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between
}

@media(max-width: 600px) {
  .question .question-options-container {
      flex-direction:column;
      gap: 8px
  }
}

.question p {
  color: #555;
  font-size: 16px;
  margin: 0
}

.question .choices {
  display: flex;
  gap: 8px;
  justify-content: center
}

@media(max-width: 600px) {
  .question .choices {
      flex-wrap:wrap
  }
}

.question .choice {
  background: transparent;
  border: 1px solid #006C51;
  border-radius: 18px;
  color: #006C51;
  font-size: 16px;
  margin: 0;
  padding: 4px 12px;
  transition: all .15s
}

.question .choice.selected {
  background: #006C51;
  color: #fff
}

.finish-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 40px
}

.finish-actions .easy-button {
  align-items: center;
  font-size: 16px;
  height: 52px;
  margin: 0 0 0 auto;
  padding: 12px 24px
}

.finish-actions .easy-button-clear {
  align-items: center;
  font-size: 16px;
  height: 52px;
  padding: 12px 24px
}

.finish-actions h3 {
  font-weight: 700;
  margin: 0;
  text-align: left
}

.finish-actions h3 span {
  font-size: .85em;
  font-weight: 500
}

@media(max-width: 470px) {
  .finish-actions {
      align-items:center;
      flex-direction: column-reverse;
      gap: 24px
  }

  .finish-actions .easy-button {
      margin-left: 0
  }

  .finish-actions h3 {
      text-align: center
  }
}

.button,button {
  background: #006C51;
  border: 0;
  border-bottom: 2px solid #006C51;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  font-family: Roboto,sans-serif;
  margin-left: 10px;
  padding: 5px 8px;
  transition: background .2s,border .2s;
  width: auto
}

.button:disabled,button:disabled {
  cursor: not-allowed;
  opacity: .65
}

.easy-button {
  background-color: #006C51;
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  color: #fff;
  display: inline-flex;
  font-family: Manrope,sans-serif;
  font-weight: 700;
  padding: 16px 40px;
  -webkit-text-decoration: none;
  text-decoration: none
}

.easy-button:focus,.easy-button:hover {
  background-color: #006C51
}

.easy-button:active {
  background-color: #006C51
}

.easy-button-clear {
  background-color: #BA1A1A;
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  color: #fff;
  display: inline-flex;
  font-family: Manrope,sans-serif;
  font-weight: 700;
  padding: 16px 40px;
  -webkit-text-decoration: none;
  text-decoration: none
}

.easy-button-clear:focus,.easy-button-clear:hover {
  background-color: #BA1A1A
}

.easy-button-clear:active {
  background-color: #BA1A1A
}