.fg-white {
  color: white; }

.fg-black {
  color: #2d2d2d; }

.fg-grey {
  color: #4c4c4e; }

.fg-blue {
  color: #659bc5; }

.fg-orange {
  color: #e0a638; }

.fg-green {
  color: #92d050; }

.fg-red {
  color: #c00000; }

.bg-white {
  background-color: white; }

.bg-black {
  background-color: #2d2d2d; }

.bg-grey {
  background-color: #4c4c4e; }

.bg-blue {
  background-color: #659bc5; }

.bg-orange {
  background-color: #e0a638; }

.bg-orange-dark {
  background-color: #b87e24; }

.bg-green {
  background-color: #92d050; }

.bg-red {
  background-color: #c00000; }

html, body {
  position: relative;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0; }

#app {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0 0 100px; }

img {
  display: block; }

.hidden {
  display: none; }

.loading section {
  display: none; }

p {
  margin: 0; }

ul.unstyled {
  margin: 0;
  padding: 0;
  list-style: none; }

li.unstyled {
  list-style-type: none; }

.row {
  position: relative; }

.m-0 {
  margin: 0; }

.mt-0 {
  margin-top: 0; }

.mt-05 {
  margin-top: 0.5em; }

.mt-1 {
  margin-top: 1em; }

.mt-2 {
  margin-top: 2em; }

.mb-0 {
  margin-bottom: 0; }

.mb-05 {
  margin-bottom: 0.5em; }

.mb-1 {
  margin-bottom: 1em; }

.mb-25 {
  margin-bottom: 2.5em; }

@font-face {
  font-family: "Gotham Book";
  src: url("../fonts/Gotham-Book.otf") format("opentype");
  font-weight: normal; }

@font-face {
  font-family: "Gotham Bold";
  src: url("../fonts/Gotham-Bold.otf") format("opentype");
  font-weight: normal; }

body {
  font-family: "Gotham Book", sans-serif;
  font-size: 100%; }

.font-normal {
  font-family: "Gotham Book", sans-serif; }

.font-bold {
  font-family: "Gotham Bold", sans-serif; }

em {
  font-style: italic; }

strong {
  font-family: "Gotham Bold", sans-serif; }

.button {
  font-size: 1.5rem;
  line-height: 1.2em; }

.text-smaller {
  font-size: 1rem;
  line-height: 1.2em; }

.text-small {
  font-size: 1.2rem;
  line-height: 1.2em; }

.text-normal {
  font-size: 1.5rem;
  line-height: 1.3em; }

.text-large {
  font-size: 2.2rem;
  line-height: 1.3em; }

.text-larger {
  font-size: 3.2rem;
  line-height: 1.2em; }

.text-largest {
  font-size: 5.5rem;
  line-height: 1em; }

.text-left {
  text-align: left; }

.text-centered {
  text-align: center; }

h1 {
  font-family: "Gotham Bold", sans-serif; }

.button {
  cursor: pointer;
}

.button.start {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
  border: 25px solid #e0a638;
  border-radius: 50%;
  line-height: 0; }

.button.restart {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  border: 20px solid #e0a638;
  border-radius: 50%;
  line-height: 1em; }

.button.next {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  width: 140px;
  height: 120px;
  -webkit-transform: translate(150%, -50%);
  -moz-transform: translate(150%, -50%);
  -ms-transform: translate(150%, -50%);
  -o-transform: translate(150%, -50%);
  transform: translate(150%, -50%); }
  .button.next::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 85px;
    height: 113px;
    background: transparent url(../images/arrow.png) 0 0 no-repeat;
    background-size: 85px 113px; }

.button.back {
  box-sizing: border-box;
  display: flex;
  justify-content: right;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 75px;
  width: 140px;
  height: 120px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  .button.back::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 85px;
    height: 113px;
    background: transparent url(../images/arrow.png) 0 0 no-repeat;
    background-size: 85px 113px;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1); }

#app {
  overflow-x: hidden; }

#app::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent url(../images/hexagon.png) 40% top no-repeat;
  background-size: cover;
  z-index: -2; }

#app::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100px;
  width: 431px;
  height: 334px;
  background: transparent url(../images/cov.png) 0 0 no-repeat;
  background-size: 431px 334px;
  z-index: -1; }

.logo {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  max-width: 60%;
  margin: 2rem 0 0; }

.logo p {
  margin-bottom: 0; }

.footnote {
  position: absolute;
  bottom: 6rem;
  right: 1rem;
  text-align: right; }

.bg {
  position: absolute;
  top: 0;
  left: 0; }

section {
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 5em;
  padding: 1em 0 7em; }

.visual {
  width: 600px;
  margin: 0 auto; }

.homepage {
  margin-bottom: 0; }
  .homepage h1 {
    position: relative;
    width: 80%;
    max-width: 820px;
    margin: 2em auto;
    font-size: 3rem;
    font-weight: bold;
    text-align: center; }
    .homepage h1::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -303px;
      width: 303px;
      height: 209px;
      background: transparent url(../images/intro.svg) 0 0 no-repeat;
      background-size: contain; }
  .homepage .content {
    width: 90%;
    max-width: 1700px;
    margin: 0 auto; }
    .homepage .content p + p {
      margin-top: 1em; }

.introduction {
  margin-bottom: 0; }
  .introduction .content {
    width: 60%;
    height: 50%;
    margin: 10% auto 0; }
    .introduction .content p {
      margin: 1em 0 2rem; }

.questions .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 75%;
  margin: 3rem auto 0; }
  .questions .content h2 {
    font-size: 1.75em;
    line-height: 1.2em; }
  .questions .content ul li {
    margin: 0;
    padding: 0.4rem 1.2rem;
    border-radius: 15px;
    border: 2px solid #e0a638;
    -webkit-box-shadow: 5px 5px 0px 0px #e0a638;
    -moz-box-shadow: 5px 5px 0px 0px #e0a638;
    box-shadow: 5px 5px 0px 0px #e0a638; }
    .questions .content ul li + li {
      margin-top: 0.75em; }
    .questions .content ul li:hover {
      color: white;
      background-color: #e0a638;
      border: 2px solid #b87e24;
      -webkit-box-shadow: 5px 5px 0px 0px #b87e24;
      -moz-box-shadow: 5px 5px 0px 0px #b87e24;
      box-shadow: 5px 5px 0px 0px #b87e24; }

.questions .question-result {
  border-radius: 15px;
  overflow: hidden;
  min-height: 225px; }
  .questions .question-result h3 {
    margin: 0;
    padding: 0.4rem 1.2rem; }
  .questions .question-result p {
    margin: 0;
    padding: 1em 2em; }
  .questions .question-result.-incorrect {
    border: 2px solid #c00000;
    -webkit-box-shadow: 10px 10px 0px 0px #7a0000;
    -moz-box-shadow: 10px 10px 0px 0px #7a0000;
    box-shadow: 10px 10px 0px 0px #7a0000; }
    .questions .question-result.-incorrect h3 {
      background-color: #c00000; }
  .questions .question-result.-correct {
    border: 2px solid #92d050;
    -webkit-box-shadow: 10px 10px 0px 0px #7cad44;
    -moz-box-shadow: 10px 10px 0px 0px #7cad44;
    box-shadow: 10px 10px 0px 0px #7cad44; }
    .questions .question-result.-correct h3 {
      background-color: #92d050; }

.results {
  margin-bottom: 0;
  padding: 1em 0 0; }
  .results .clipboard {
    box-sizing: border-box;
    position: relative;
    width: 50%;
    max-width: 900px;
    margin: 6rem auto 0;
    padding: 3rem;
    border-radius: 50px;
    background-color: #d9dadb; }
    .results .clipboard::after {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 284px;
      height: 156px;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background: transparent url(../images/clip.png) 0 0 no-repeat;
      background-size: contain; }
    .results .clipboard::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 653px;
      height: 683px;
      background: transparent url(../images/doctor.png) 0 0 no-repeat;
      background-size: contain;
      -webkit-transform: translate(-90%, 25%);
      -moz-transform: translate(-90%, 25%);
      -ms-transform: translate(-90%, 25%);
      -o-transform: translate(-90%, 25%);
      transform: translate(-90%, 25%); }
    .results .clipboard > div {
      padding: 2rem; }
    .results .clipboard .more li {
      margin-top: 0.5em; }

.refs {
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 91px;
  margin: 0;
  padding: 1.5em 0 0 2em;
  font-size: 1.8rem;
  line-height: 1.4em;
  background: transparent url(../images/refs-btn.png) 0 0 no-repeat;
  background-size: contain; }

.references .content {
  width: 94%;
  margin: 4rem auto 2rem;
  padding: 0 0 100px; }
  .references .content ol {
    list-style: none;
    padding: 0; }
  .references .content li {
    display: block;
    overflow-wrap: break-word; }

#app[data-page="homepage"],
#app[data-page="introduction"] {
  min-height: 100%;
  padding: 0; }
  #app[data-page="homepage"] .logo,
  #app[data-page="introduction"] .logo {
    position: absolute; }

#app[data-page="questions"] {
  padding: 0; }
  #app[data-page="questions"] .questions {
    margin-bottom: 0;
    padding: 0; }

#app[data-page="results"] {
  padding: 0;
  overflow: hidden; }
  #app[data-page="results"] .logo p,
  #app[data-page="results"] .footer p {
    background-color: rgba(255, 255, 255, 0.7); }

@media (min-width: 1400px) and (max-height: 980px) {
  .visual {
    width: 450px; }
  .questions .content .question-result {
    min-height: 150px; }
  .homepage,
  .introduction {
    padding: 0 0 3em; }
  .button.next {
    right: 10%; }
  [data-page="questions"] .answers,
  [data-page="questions"] .question-result {
    max-width: 65%;
    margin: 0 auto; }
  [data-page="results"] {
    max-height: 100%; }
    [data-page="results"] .results {
      padding: 6em 0 0; }
    [data-page="results"] .clipboard {
      margin: 0 auto; }
  .footnote .line-break {
    display: block; } }

@media (min-width: 1400px) and (max-height: 960px) {
  [data-page="results"] .logo {
    width: 25%; } }

@media (max-width: 1440px) {
  .button {
    font-size: 1.2rem;
    line-height: 1.2em; }
    .button.next {
      position: absolute;
      top: 50%;
      right: 0;
      width: 100px;
      height: 66px;
      -webkit-transform: translate(140%, -50%);
      -moz-transform: translate(140%, -50%);
      -ms-transform: translate(140%, -50%);
      -o-transform: translate(140%, -50%);
      transform: translate(140%, -50%); }
      .button.next::after {
        width: 50px;
        height: 66px;
        background-size: contain; }
  .text-smaller {
    font-size: 0.6rem;
    line-height: 1.2em; }
  .text-small {
    font-size: 0.9rem;
    line-height: 1.2em; }
  .text-normal {
    font-size: 1.2rem;
    line-height: 1.3em; }
  .text-large {
    font-size: 1.5rem;
    line-height: 1.3em; }
  .text-larger {
    font-size: 3.2rem;
    line-height: 1.2em; }
  .text-largest {
    font-size: 5.5rem;
    line-height: 1em; }
  .text-left {
    text-align: left; }
  .text-centered {
    text-align: center; }
  .visual {
    width: 500px; }
  .homepage h1 {
    max-width: 720px;
    margin: 2em auto;
    font-size: 2.5rem; }
    .homepage h1::after {
      top: -50%;
      right: -303px;
      width: 303px;
      height: 209px; }
  .questions {
    padding: 1em 0 0; }
    .questions .content {
      width: 100%;
      max-width: 700px;
      margin: 1rem auto 6em; }
      .questions .content h2 {
        font-size: 1.5em;
        line-height: 1.2em; }
  .results .clipboard {
    width: 100%;
    max-width: 650px;
    margin: 4rem auto 0;
    padding: 2rem;
    border-radius: 40px; }
    .results .clipboard::before {
      bottom: 0;
      left: 0;
      width: 450px;
      height: 496px;
      -webkit-transform: translate(-25%, 50%);
      -moz-transform: translate(-25%, 50%);
      -ms-transform: translate(-25%, 50%);
      -o-transform: translate(-25%, 50%);
      transform: translate(-25%, 50%); }
    .results .clipboard::after {
      width: 200px;
      height: 110px;
      -webkit-transform: translate(-50%, -55%);
      -moz-transform: translate(-50%, -55%);
      -ms-transform: translate(-50%, -55%);
      -o-transform: translate(-50%, -55%);
      transform: translate(-50%, -55%); }
  .results .refs {
    width: 250px;
    height: 76px; }
  .references .content {
    padding: 0; }
  .footnote {
    bottom: 6em; }
  .refs {
    width: 200px;
    height: 61px;
    font-size: 1.2rem;
    line-height: 1.3em; } }

@media (max-width: 1200px) {
  .text-smaller {
    font-size: 0.6rem;
    line-height: 1.2em; }
  .text-small {
    font-size: 0.9rem;
    line-height: 1.2em; }
  .text-normal {
    font-size: 1.2rem;
    line-height: 1.3em; }
  .text-large {
    font-size: 1.5rem;
    line-height: 1.3em; }
  .text-larger {
    font-size: 3.2rem;
    line-height: 1.2em; }
  .text-largest {
    font-size: 5.5rem;
    line-height: 1em; }
  .text-left {
    text-align: left; }
  .text-centered {
    text-align: center; }
  .visual {
    width: 500px; }
  .homepage h1 {
    max-width: 720px;
    margin: 2em auto;
    font-size: 2.25rem; }
    .homepage h1::after {
      top: -50%;
      right: -130px;
      width: 175px;
      height: 207px; }
  .questions {
    padding: 1em 0 0; }
    .questions .content {
      width: 100%;
      max-width: 700px;
      margin: 1em auto 12%; }
      .questions .content h2 {
        font-size: 1.5em;
        line-height: 1.2em; }
      .questions .content .question-result {
        min-height: 200px; }
  .results .clipboard {
    width: 100%;
    max-width: 650px;
    margin: 4rem auto 0;
    padding: 2rem;
    border-radius: 40px; }
    .results .clipboard::before {
      bottom: 0;
      left: 0;
      width: 450px;
      height: 496px;
      -webkit-transform: translate(-25%, 50%);
      -moz-transform: translate(-25%, 50%);
      -ms-transform: translate(-25%, 50%);
      -o-transform: translate(-25%, 50%);
      transform: translate(-25%, 50%); }
    .results .clipboard::after {
      width: 200px;
      height: 110px;
      -webkit-transform: translate(-50%, -55%);
      -moz-transform: translate(-50%, -55%);
      -ms-transform: translate(-50%, -55%);
      -o-transform: translate(-50%, -55%);
      transform: translate(-50%, -55%); }
  .results .refs {
    width: 250px;
    height: 76px; }
  .references .content {
    padding: 0; }
  .footnote {
    bottom: 8em; }
  .refs {
    width: 242px;
    height: 74px; } }

@media (max-width: 1024px) {
  .button {
    font-size: 1.2rem;
    line-height: 1.2em; }
    .button.start {
      width: 80px;
      height: 80px;
      border: 15px solid #e0a638; }
    .button.next {
      position: absolute;
      top: 50%;
      right: 0;
      width: 100px;
      height: 66px;
      -webkit-transform: translate(140%, -50%);
      -moz-transform: translate(140%, -50%);
      -ms-transform: translate(140%, -50%);
      -o-transform: translate(140%, -50%);
      transform: translate(140%, -50%); }
      .button.next::after {
        width: 50px;
        height: 66px;
        background-size: contain; }
    .button.restart {
      width: 80px;
      height: 80px;
      border: 15px solid #e0a638; }
  .text-smaller {
    font-size: 0.6rem;
    line-height: 1.2em; }
  .text-small {
    font-size: 0.8rem;
    line-height: 1.2em; }
  .text-normal {
    font-size: 1rem;
    line-height: 1.3em; }
  .text-large {
    font-size: 1.2rem;
    line-height: 1.3em; }
  .text-larger {
    font-size: 2.5rem;
    line-height: 1.2em; }
  .text-largest {
    font-size: 3.5rem;
    line-height: 1em; }
  .text-left {
    text-align: left; }
  .text-centered {
    text-align: center; }
  .visual {
    width: 500px; }
  .homepage h1 {
    max-width: 720px;
    margin: 1.5em auto;
    font-size: 2rem; }
    .homepage h1::after {
      top: -42%;
      right: -50px;
      width: 125px;
      height: 127px; }
  .questions {
    padding: 0 0 0; }
    .questions .content {
      width: 60%;
      margin: 1em auto 10%; }
      .questions .content h2 {
        font-size: 1.5em;
        line-height: 1.2em; }
      .questions .content .answers {
        margin: 0 0 2em; }
    .questions .question-result {
      min-height: 200px; }
    .questions .row {
      padding-bottom: 2em; }
  .results {
    padding: 1em 0 0;
    margin-bottom: 0; }
    .results .clipboard {
      width: 100%;
      max-width: 600px;
      margin: 4rem auto 0;
      padding: 2rem;
      border-radius: 30px; }
      .results .clipboard::before {
        bottom: 0;
        left: 0;
        width: 300px;
        height: 310px;
        -webkit-transform: translate(0, 40%);
        -moz-transform: translate(0, 40%);
        -ms-transform: translate(0, 40%);
        -o-transform: translate(0, 40%);
        transform: translate(0, 40%); }
      .results .clipboard::after {
        width: 200px;
        height: 110px;
        -webkit-transform: translate(-50%, -55%);
        -moz-transform: translate(-50%, -55%);
        -ms-transform: translate(-50%, -55%);
        -o-transform: translate(-50%, -55%);
        transform: translate(-50%, -55%); }
  .references .content {
    padding: 0; }
  .footnote {
    bottom: 6em; }
  .refs {
    width: 192px;
    height: 59px;
    font-size: 1.2rem;
    line-height: 1.3em; } }

@media (max-width: 860px) {
  .homepage h1 {
    margin: 1.5em auto 4em; }
    .homepage h1::after {
      top: 95%;
      right: 0; }
  .questions {
    padding: 1em 0 5em; }
    .questions .content {
      margin: 1em auto 15%; } }

@media (max-width: 768px) {
  .button {
    font-size: 1.2rem;
    line-height: 1.2em; }
    .button.start {
      width: 80px;
      height: 80px;
      border: 15px solid #e0a638; }
    .button.next {
      position: absolute;
      top: auto;
      bottom: 0;
      right: 0;
      width: 100px;
      height: 66px;
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0);
      transform: translate(0, 0); }
      .button.next::after {
        width: 50px;
        height: 66px;
        background-size: contain; }
    .button.back {
      position: absolute;
      top: auto;
      bottom: 0;
      width: 100px;
      height: 66px; }
      .button.back::after {
        width: 50px;
        height: 66px;
        background-size: contain; }
  .text-smaller {
    font-size: 0.75rem;
    line-height: 1.2em; }
  .text-small {
    font-size: 1rem;
    line-height: 1.2em; }
  .text-normal {
    font-size: 1.2rem;
    line-height: 1.5em; }
  .text-large {
    font-size: 2rem;
    line-height: 1.3em; }
  .text-larger {
    font-size: 3.2rem;
    line-height: 1.2em; }
  .text-largest {
    font-size: 5.5rem;
    line-height: 1em; }
  .text-left {
    text-align: left; }
  .text-centered {
    text-align: center; }
  .visual {
    width: 80%; }
  section {
    padding: 1em 0 9em; }
  .homepage h1 {
    margin: 1.5em auto 4em; }
    .homepage h1::after {
      top: 100%;
      right: 0; }
  .questions {
    padding: 0; }
    .questions .content {
      min-width: 500px;
      max-width: 800px;
      margin: 1em auto 16%; }
      .questions .content h2 {
        font-size: 1.2em;
        line-height: 1.2em; }
      .questions .content .question {
        width: 90%;
        margin: 0.5em auto; }
    .questions .row {
      padding-bottom: 100px; }
  .results {
    padding: 1em 0 20em; }
    .results .clipboard {
      width: 90%;
      margin: 6rem auto 0;
      padding: 1rem;
      border-radius: 20px; }
      .results .clipboard::before {
        bottom: 0;
        left: 0;
        width: 359px;
        height: 375px;
        -webkit-transform: translate(-15%, 95%);
        -moz-transform: translate(-15%, 95%);
        -ms-transform: translate(-15%, 95%);
        -o-transform: translate(-15%, 95%);
        transform: translate(-15%, 95%); }
      .results .clipboard::after {
        width: 130px;
        height: 80px;
        -webkit-transform: translate(-50%, -55%);
        -moz-transform: translate(-50%, -55%);
        -ms-transform: translate(-50%, -55%);
        -o-transform: translate(-50%, -55%);
        transform: translate(-50%, -55%); }
      .results .clipboard h3 {
        position: absolute;
        top: -90px;
        left: 0;
        width: 100%;
        font-size: 1.5rem;
        line-height: 1.2em; }
    .results .restart {
      position: absolute;
      bottom: -125px;
      left: 50%;
      transform: translateX(-50px); }
    .results .refs {
      width: 200px;
      height: 61px; }
  .references .content {
    padding: 0; }
  .logo {
    max-width: 50%; }
    .logo img {
      width: 150px; }
  .footnote {
    bottom: 6em;
    max-width: 40%; }
  .refs {
    width: 200px;
    height: 61px;
    font-size: 1.2rem;
    line-height: 1.3em; } }

@media (max-width: 560px) {
  #app::before {
    content: '';
    position: absolute;
    top: auto;
    bottom: 0;
    left: -150px;
    width: 431px;
    height: 334px;
    z-index: -1;
    -webkit-transform: rotate(90deg) scale(0.75);
    -moz-transform: rotate(90deg) scale(0.75);
    -ms-transform: rotate(90deg) scale(0.75);
    -o-transform: rotate(90deg) scale(0.75);
    transform: rotate(90deg) scale(0.75); }
  .text-smaller {
    font-size: 0.5rem;
    line-height: 1.2em; }
  .text-small {
    font-size: 0.8rem;
    line-height: 1.2em; }
  .text-normal {
    font-size: 1rem;
    line-height: 1.5em; }
  .text-large {
    font-size: 1.2rem;
    line-height: 1.3em; }
  .text-larger {
    font-size: 3.2rem;
    line-height: 1.2em; }
  .text-largest {
    font-size: 5.5rem;
    line-height: 1em; }
  .text-left {
    text-align: left; }
  .text-centered {
    text-align: center; }
  .visual {
    width: 80%; }
  .logo {
    bottom: 0.5em;
    left: 0.5rem;
    max-width: 50%;
    margin: 0; }
    .logo img {
      width: 100px; }
  section {
    padding: 1em 0 9em; }
  .homepage .content {
    width: 80%; }
  .homepage h1 {
    margin: 1.5em auto 6em;
    font-size: 1.5rem;
    text-align: left; }
    .homepage h1::after {
      top: 105%;
      right: -7%; }
  .introduction .content {
    width: 80%; }
    .introduction .content p {
      margin: 1em 0 2rem; }
  .introduction .visual {
    width: 100%; }
  .questions {
    min-height: 90%;
    padding: 1em;
    margin-bottom: 0; }
    .questions .content {
      width: 100%;
      min-width: 100%; }
      .questions .content h2 {
        font-size: 1.2em;
        line-height: 1.2em; }
      .questions .content .question {
        width: 90%;
        margin: 0.5em auto; }
      .questions .content .answers,
      .questions .content .row {
        margin: 0 auto 2em;
        width: 95%; }
    .questions .row {
      padding-bottom: 100px; }
  .results {
    padding: 1em 0 20em; }
    .results .clipboard {
      width: 90%;
      margin: 6rem auto 0;
      padding: 1rem;
      border-radius: 20px; }
      .results .clipboard::before {
        bottom: 0;
        left: 0;
        width: 300px;
        height: 310px;
        -webkit-transform: translate(-25%, 110%);
        -moz-transform: translate(-25%, 110%);
        -ms-transform: translate(-25%, 110%);
        -o-transform: translate(-25%, 110%);
        transform: translate(-25%, 110%); }
      .results .clipboard::after {
        width: 130px;
        height: 80px;
        -webkit-transform: translate(-50%, -55%);
        -moz-transform: translate(-50%, -55%);
        -ms-transform: translate(-50%, -55%);
        -o-transform: translate(-50%, -55%);
        transform: translate(-50%, -55%); }
      .results .clipboard h3 {
        position: absolute;
        top: -90px;
        left: 0;
        width: 100%;
        font-size: 1.5rem;
        line-height: 1.2em; }
    .results .restart {
      position: absolute;
      bottom: -125px;
      left: 50%;
      transform: translateX(-50px); }
    .results .refs {
      width: 150px;
      height: 47px;
      font-size: 0.9rem;
      line-height: 1.2em; }
  .references {
    padding: 1em 0 0; }
    .references .content {
      margin: 4rem auto 0;
      padding: 0 0 20px; }
    .references .text-normal {
      font-size: 1em;
      line-height: 1.2em; }
  .footnote {
    bottom: 8em; } }