.panel {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  align-items: center;
  position: fixed;
  z-index: 1;
  background-color: #04442c;
  color: hsl(120, 28%, 95%);
  height: 2.5rem;

  span {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
  }
}

#review-panel {
  top: 0;

  > div {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    align-items: center;
    font-weight: bold;

    .bx {
      font-size: 1.5rem;
    }
  }

  &:not(
      :has(
          ~ #quiz-page.visible
            :is(#quiz.submitted, .question.unsure:not(:only-child))
        )
    ) {
    display: none;

    ~ .page {
      margin-top: 2rem;
      @media (width < 600px) {
        margin-top: 1.5rem;
      }
      @media (width < 450px) {
        margin-top: 1rem;
      }
    }
  }

  &:not(:has(~ #quiz-page .question:is(.incorrect, .unsure):not(:only-child)))
    > div {
    visibility: hidden;
  }
}

#navbar {
  bottom: 0;

  &.visible ~ .page {
    margin-bottom: 3.5rem;
    min-height: calc(100vh - 6.5rem);
    @media (width < 600px) {
      min-height: calc(100vh - 6rem);
    }
    @media (width < 450px) {
      min-height: calc(100vh - 5.5rem);
    }
  }

  .bx {
    font-size: 2rem;
  }
}

@media print {
  .panel {
    display: none;
  }
}