@keyframes glow-pulse {
  0% {
    filter: drop-shadow(0 0 4px #e45026);
  }

  50% {
    filter: drop-shadow(0 0 16px #e45026);
  }

  100% {
    filter: drop-shadow(0 0 10px #e45026);
  }
}

:root {
  --topic-color-rgb: 228, 78, 37; /* real topic color */
  --topic-color-lighten-rgb: 255, 140, 50; /* better color*/
}

/* LIGHT THEME */
[data-theme=light],:root:not([data-theme=dark]) {
  --background-light: rgba(0, 0, 0, 0.08);
}

/* DARK THEME */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --background-light: rgba(255, 255, 255, 0.08);
  }
}

[data-theme=dark] {
  --background-light: rgba(255, 255, 255, 0.08);
}

.cta-title {
  font-family: "Boogaloo";
  font-size: var(--sl-font-size-4x-large);
  margin: var(--sl-spacing-3x-large);
  text-transform: uppercase;
  text-align: center;
  font-weight: normal;
}

.list3 {
  list-style: none;
  counter-reset: list-counter;
  margin-left:0;
  padding-left: var(--sl-spacing-medium);

  li {
    list-style: none;
    counter-increment: list-counter;
    margin-bottom: var(--sl-spacing-small);
    /* font-size: var(--sl-font-size-large); */

    &::before {
      --size: 1.5em;
      font-size: var(--sl-font-size-x-large);

      content: counter(list-counter);
      background-color: var(--tblr-secondary);
      color: var(--tblr-emphasis-color-inverse);
      border-radius: 100%;
      display: inline-block;
      text-align: center;

      width: var(--size);
      height: var(--size);
      line-height: var(--size);
      margin-right: var(--sl-spacing-small);
      vertical-align: middle;
    }
  }
}

.list4 {
  margin-left:0;
  padding-left:0;

  li {
    list-style:none;
    display:block;
    text-align: center;
    border: 1px solid var(--sl-color-gray-100);
    padding: var(--sl-spacing-x-small);
  }

  i::before {
    font-size: var(--sl-font-size-3x-large);
  }

  i {
    /* vertical-align: middle; */
    display: block;
    margin: 0 auto;
    color: var(--sl-color-gray-500);
    text-align: center;
  }
}

.grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: var(--sl-spacing-2x-large);
  /* margin: var(--sl-spacing-2x-large) 0; */

  li {
    display: flex;
    align-items: start;
    margin:0;

    i {
      font-size: var(--sl-font-size-2x-large);
      margin-right: var(--sl-spacing-small);
      margin-top: -0.3em;
      color: var(--sl-color-amber-500);
    }
  }
}

.circle-list {
  margin:0;
  padding:0;

  li {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: var(--sl-spacing-3x-large) 0;
    padding: 0;

    font-size: var(--sl-font-size-medium);

    i:first-child {
      font-size: var(--sl-font-size-x-large);
      margin-bottom: var(--sl-spacing-2x-small);
      color: var(--tblr-emphasis-color);
      margin-right: var(--sl-spacing-small);
      border-radius: 100%;
      background: var(--tblr-bg-surface);
      width: var(--sl-font-size-3x-large);
      aspect-ratio: 1 / 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      @media (min-width: 576px) {
        font-size: var(--sl-font-size-2x-large);
        width: var(--sl-font-size-4x-large);
      }
    }
  }
}

.circle-list-2 {

  margin:0;
  padding:0;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: var(--sl-spacing-2x-large);

  li {
    flex: 1 1 20%;
    list-style: none;
    text-align: center;
    padding: 0;

    font-size: var(--sl-font-size-medium);

    border-block: 4px solid var(--tblr-border-color);
    padding-block: var(--sl-spacing-medium);
  }

  /* Create an icon stack */
  span {
    position: relative;
    display:inline-block;
  }

  i:first-child {
    font-size: var(--sl-font-size-2x-large);
    margin-bottom: var(--sl-spacing-2x-small);
    color: var(--tblr-emphasis-color);
    margin-right: var(--sl-spacing-small);
    border-radius: 100%;
    background: var(--tblr-gray-700);
    width: var(--sl-font-size-4x-large);
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  i:last-child {
    position: absolute;
    bottom: 0;
    right: 0.5em;
    color: var(--tblr-secondary);
    font-size: var(--sl-font-size-large);

    &[class*="-check-"] {
      color: var(--sl-color-green-600);
    }

    &[class*="-x-"] {
      color: var(--sl-color-red-600);
    }
  }
}

/* Gradient Patches */

.gradient-patch-wrapper {
  display: flow-root;
  position: relative;
}

/*
Temporarily hidden;
TODO: Resolve horizontal scroll
*/

.gradient-patch {
  display: none;

  --size: 600px;
  background: radial-gradient(ellipse closest-side, rgba(var(--topic-color-lighten-rgb), 0.2), transparent);
  position: absolute;
  width: var(--size);
  height: var(--size);
  z-index:-1;

  &.top {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 160px;
  }

  &.p1 {
    --size: 800px;

    top: -100px;
    left: -200px;
  }

  &.p2 {
    --size: 1000px;

    top: 0px;
    right: -200px;
  }
}

.hero-image{
  overflow: hidden;
  height: 600px;
  img {
    height: 100%;
    width: 100%;
    object-fit: fill;
  }
}

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

/* LANDING PAGE */
.challenge.topics.show {

  article {
    padding-block: var(--sl-spacing-3x-large);
    position: relative;
    z-index: 1;

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

  h1, h2, h3 {
    font-family: Boogaloo;
    font-weight: normal;
    margin: 1em 0;

    &:first-child {
      margin-top: 0;
    }
  }

  h1 {
    /* because there is no 5x-large */
    font-size: calc(var(--sl-font-size-4x-large) + 1vw);
    line-height: 1;
  }

  h2 {
    font-size: var(--sl-font-size-3x-large);
    text-transform: uppercase;
  }

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

  @media (max-width: 575px) {
    h3 {
      font-size: var(--sl-font-size-2x-large);
    }
  }

  article h2 {
    text-align: center;
  }

  .hero {
    img {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      object-fit: contain;
    }

    h1 {
      margin-bottom: 0;
    }
  }

  .hero-1 {
    margin-bottom: var(--sl-spacing-3x-large);
    background-image: linear-gradient(90deg, var(--tblr-body-bg) 10%, var(--tblr-bg-surface), var(--tblr-body-bg) 90%);

    p {
      font-size: var(--sl-font-size-3x-large);
      margin:0;
      text-align: center;
      color: var(--tblr-secondary)
    }

    em {
      font-style: normal;
      color: var(--tblr-emphasis-color);
      @media (min-width: 767px) and (max-width: 1440px)  {
        display:block;
        line-height: 1;
      }
    }
  }

  .hero-2 {
    font-size: var(--sl-font-size-x-large);

    .container {
      position: relative;

      border-bottom: 1px solid;
      border-image: radial-gradient(circle, rgba(var(--topic-color-lighten-rgb), 0.2), transparent) 1;
    }

    h2 {
      margin-top:0;
    }

    ul {
      color: var(--tblr-secondary);
      strong {
        color: var(--tblr-emphasis-color);
      }

      @media (max-width: 575px) {
        padding-left: 0;
        font-size: var(--sl-font-size-large);
      }
    }

    @media (max-width: 992px) {
      font-size: var(--sl-font-size-large);

      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      ul.grid-list {
        display: inline-flex;
        flex-direction: column;
      }
    }
  }

  .hero-3 {
    text-align: center;
    background-image: radial-gradient(circle closest-side, var(--backgound-light), transparent);

    .grid {
      @media (max-width: 575px) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;

        .left, .right {
          order: 2;
          flex-basis: 40%;
        }

        div:nth-of-type(2) {
          order: 1;
          width: 100%;
        }

        h3 {
          text-align: center;
        }
      }

      @media (min-width: 576px) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr))
      }
    }

    h3 {
      margin-top:0;
      border-bottom: 1px solid var(--tblr-bg-surface);
      padding-bottom: var(--sl-spacing-small);
    }

    .logo {
      margin-top: 5%;
      height: 80%;
      object-fit: contain;
      animation: glow-pulse 4s infinite alternate;
    }

    .laptop {
      position: relative;
      display: inline-block;
      margin-bottom: var(--sl-spacing-3x-large);

      width: 75%;
    }

    .left {
      text-align: right;
      li {
        justify-content: start;
      }

      @media (min-width: 576px) {
        li {
          justify-content: end;
        }

        li:nth-child(1) {
          margin-right:30px;
        }

        li:nth-child(2) {
          margin-right:60px;
        }

        li:nth-child(3) {
          margin-right:30px;
        }
      }
    }

    .right {
      text-align: left;
      li {
        justify-content: start;
      }

      @media (min-width: 576px) {
        li:nth-child(1) {
          margin-left:30px;
        }

        li:nth-child(2) {
          margin-left:60px;
        }

        li:nth-child(3) {
          margin-left:30px;
        }
      }
    }
  }

  .hero {
    text-align: center;

    img {
      margin: 0;
      filter: drop-shadow(0 0 40px rgb(var(--topic-color-rgb)));
      width: 260px;
      margin-block: var(--sl-spacing-2x-large)
    }
  }

  .cta {
    background-image: linear-gradient(90deg, var(--tblr-body-bg) 10%, var(--tblr-bg-surface), var(--tblr-body-bg) 90%);
    text-align: center;
    h2 {
      margin-bottom: var(--sl-spacing-2x-large);
    }
    nav {
      justify-content: center;
      gap: var(--sl-spacing-2x-large);
      margin-top: var(--sl-spacing-3x-large);

      @media (max-width: 575px) {
        flex-direction: column-reverse;
      }
    }
  }
}


/* Exam session start / intro  */
body.exam_sessions:where(.new, .rate_limited) {

  .logo {
    margin-inline:auto;
    margin-top: var(--sl-spacing-2x-large);
  }

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

  .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;
      /* font-size: var(--sl-font-size-small); */

      &: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;

    h1, h2, h3, h4 {
      font-family: Boogaloo;
      font-weight: normal;
      text-transform: uppercase;
      font-size: unset;
      line-height: 1.2em;
      color: var(--tabl-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);
    }

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

/* Exam session */
.platform-full-view {
  height: auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  main {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    font-size:1.2em;

    @media (max-width: 575px) {
      width: 100%;
    }
  }

  .exam_session_answers & main {
    min-width: 768px;
  }

  article header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    efp-timer {
      --progress-ring-size: 70px;

      line-height: 0;

      @media (max-width: 575px) {
        --progress-ring-size: 55px;
      }
    }

    .details {
      display: flex;
      align-items: center;

      .item {
        text-align: center;
        margin: var(--sl-spacing-medium);

        > div {
          &:first-child {
            font-size: 1.6em;
          }
        }
      }
    }

    @media (max-width: 400px) {
      nav {
        display: none;
      }
    }
  }


  .title {
    font-weight: normal;
    margin-bottom: var(--sl-spacing-large);
  }

  .body {
    min-height: 40vh;

    @media (min-width: 576px) {
      max-height: 60vh;
      overflow: scroll;
    }
  }

  article footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &.exam {
      flex-direction: row-reverse;

      @media (max-width: 400px) {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sl-spacing-small);

        button {
          order: 1;
        }

        div {
          display: flex;
          order: 2;
          gap: var(--sl-spacing-small);
          margin-inline: 4rem;
        }
      }
    }

    button {
      width: auto;
      margin-bottom: 0;
    }

    @media (max-width: 767px) {
      flex-direction: column-reverse;
      gap: var(--sl-spacing-medium);

      form {
        display: block;
      }

      [role="button"], form, .cta-button {
        width: 100%;
      }

      #iflags .button_to {
        margin-bottom: var(--sl-spacing-x-small);
      }

      #iflags:only-child .button_to {
        margin-bottom: 0;
      }

      button[type="submit"] {
        opacity: 0.5;
        pointer-events: none;
      }
    }
  }
}

/* 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%;
      }
    }
  }
}

section.register {
  margin: var(--sl-spacing-4x-large) 0;

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

sl-copy-button {
  display: flex;
  border: 1px solid var(--tblr-border-color);
  border-left: none;
}

sl-copy-button::part(button) {
  padding-inline: 20px;
}


.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;
  }
}

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

  form {
    opacity: 0;
    pointer-events: none;
  }

}