/* TOPIC PICKER */
.challenge.topics.index {
  main {
    overflow: hidden;
  }
}

.challenge-instructions {

  .logo {
    display: block;
    width: fit-content;
    margin-inline: auto;
    margin-top: var(--sl-spacing-2x-large);
  }

  .profile {
    margin-block: var(--sl-spacing-3x-large);
  }

  sl-avatar {
    --size: 90px;
  }

  .big-login {
    display: inline-block;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .avatar-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: var(--sl-spacing-small);

    .login-hint {
      position: absolute;
      bottom: 20px;
      right: -110px;
      color: var(--tblr-emphasis-color);
      padding: var(--sl-spacing-small);
      text-align: center;
      opacity: 0.8;
      &::before {
        content: "";
        width: 80px;
        height: 80px;
        position: absolute;
        background: url("/assets/arrow1-40f6b4f3.png") no-repeat;
        background-size: contain;
        top: -55px;
        right: 30px;
        transform: scale(-1, 1) rotate(150deg);
      }

      @media (prefers-color-scheme: light) {
        &::before {
          filter: invert(1);
        }
      }

    }
  }

  .instructions {
    font-size: 1.2em;

    :last-child {
      margin-bottom: 0;
    }

    h1, h2, h3, h4 {
      font-family: Boogaloo;
      font-weight: normal;
      text-transform: uppercase;
      font-size: unset;
      line-height: 1.2em;
      color: var(--tblr-emphasis-color);
      margin-top: 2em;
    }

    strong {
      color: var(--tblr-primary);
    }

    h1 {
      font-size: var(--sl-font-size-2x-large);
    }

    h2 {
      font-size: var(--sl-font-size-x-large);
    }

    h3 {
      font-size: var(--sl-font-size-large);
    }

    h4 {
      font-size: var(--sl-font-size-medium);
    }

    hgroup {
      margin-bottom: var(--sl-spacing-2x-large);
    }

    .registration-prompt {
      font-size: var(--sl-font-size-x-large);
    }

    @media (max-width: 575px) {
      padding-inline: var(--sl-spacing-x-large);
    }
  }
}

/* FINISHED */
.exam_sessions.show {

  .topic-icon {
    max-width: 100px;
  }

  .incorrect {
    h2 {font-size: var(--sl-font-size-x-large);}
  }

  nav li {
    padding-block: 0;
  }

  details {
    .content {
      padding: var(--sl-spacing-medium);
    }
    summary::after {
      float: left;
    }
  }

  @media (max-width: 400px) {
    nav {
      display: flex;
      align-items: center;

      ul {
        flex-direction: column;
        align-items: end;
      }

      li {
        flex-shrink: 0;
      }
    }
  }

  @media (max-width: 767px) {
    nav.register {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sl-spacing-medium);

      div, [role="button"] {
        width: 100%;
      }
    }
  }
}

.beat-the-score {
  margin: var(--sl-spacing-2x-large) 0;
  text-align: center;
}

.register-teaser{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-block: 0;
  gap: var(--sl-spacing-medium);
  margin-bottom: var(--sl-spacing-3x-large);

  .main-icon {
    font-size: 6em;
    color: var(--sl-color-amber-600);
  }

  :first-child {
    flex: 0 0 auto;
  }

  &.v2 {
    padding-block: var(--sl-spacing-small);
  }
}

.hall_of_fame .main {
  @media (max-width: 767px) {
    flex-direction: column;
  }
}


.exam-session-blackout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--sl-font-size-x-large);
}


.exam-session-body {
  position:relative;

  form {
    transition: opacity 0.3s ease-in-out;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
  }
}

html.inactive {
  .exam-session-blackout {
    opacity: 1;
    pointer-events: auto;
  }

  .exam-session-body form {
    opacity: 0;
    pointer-events: none;
  }
}