@import "import";

.quiz {
  position: relative;
  width: 100vw;
  height: calc(var(--vh) - (var(--footer-height)));
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: color(white);
  z-index: var(--z-index-1);

  ul {
    position: relative;
    height: 100%;

    li.quizStep {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      height: calc(var(--vh) - (var(--footer-height)));
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .nav {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacer-2);

    @include breakpoint(vlarge) {
      margin-bottom: 8vh;
    }
  }
}

.errorBlock {
  position: absolute;
  width: 100%;
  pointer-events: none;

  font-family: var(--font-family-sans-serif);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7rem;
  letter-spacing: -0.016rem;
  text-align: center;

  bottom: calc(1vh + 5rem);
  bottom: calc(1dvh + 5rem);

  @include breakpoint(large) {
    bottom: calc(var(--spacer-12) - 3rem);
  }

  @include breakpoint(vlarge) {
    bottom: calc(8vh + 5rem);
  }
}
.legal {
  text-align: center;
  text-wrap: balance;
  max-width: 240px;
}