@import url("../assets/external/fonts.googleapis.com/css2.d7285347.css");

:root {
  --md-default-bg-color: inherit;
}

.md-typeset {

  .md-content__button {
    display: none;
  }

  section {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;

    h1 {
      text-align: center;
      font-size: 3em;
      font-family: 'Lexend Deca', sans-serif;
      font-weight: 500;
      text-transform: lowercase;
      margin-bottom: 0;

      .headerlink {
        display: none;
      }
    }

    > p:has(.md-button) {
      display: flex;
      justify-content: center;
      gap: clamp(.2em, 2vw, 2em);

      > .md-button--primary {
        border: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(.4rem, 4vw, .8rem);
        padding: .625em clamp(.2em, 3vw, 2em);

        &:nth-child(1) {
          background-color: #6366f1;
        }

        &:nth-child(2) {
          background-color: #8b5cf6;
        }

        &:nth-child(3) {
          background-color: #a855f7;
        }

        &:nth-child(4) {
          background-color: #d946ef;
        }
      }
    }

    .brands {
      grid-template-columns: repeat(2, 1fr);
      width: 100%;
      row-gap: 2rem;

      @media (min-width: 600px) {
        grid-template-columns: repeat(3, 1fr);
      }

      @media (min-width: 900px) {
        grid-template-columns: repeat(6, 1fr);
      }

      p:has(img) {
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          aspect-ratio: 1/1;
          width: 5em;
          object-fit: contain;
          opacity: 0.75;
          transition: opacity 0.2s ease;
          vertical-align: middle;

          &:hover {
            opacity: 1;
          }
        }
      }
    }

    [data-termynal] {
      width: 1050px;
      font-size: 12px;
      border-radius: 0.5rem;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='511' height='487'%3E%3Cg opacity='0.8'%3E%3Ccircle cx='100' cy='200' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='350' cy='120' r='0.8' fill='%237ee8e3'/%3E%3Ccircle cx='450' cy='380' r='1.8' fill='%23ffffff'/%3E%3Ccircle cx='180' cy='340' r='0.9' fill='%236b5cb7'/%3E%3Ccircle cx='280' cy='80' r='1.2' fill='%235ecbcd'/%3E%3Ccircle cx='420' cy='200' r='0.6' fill='%23ffffff'/%3E%3Ccircle cx='70' cy='400' r='1.1' fill='%237ee8e3'/%3E%3Ccircle cx='250' cy='250' r='0.7' fill='%235ecbcd'/%3E%3Ccircle cx='380' cy='50' r='0.5' fill='%23ffffff'/%3E%3Ccircle cx='150' cy='100' r='1.3' fill='%236b5cb7'/%3E%3Ccircle cx='320' cy='320' r='0.9' fill='%237ee8e3'/%3E%3C/g%3E%3C/svg%3E") repeat left top / 511px 487px,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='299' height='331'%3E%3Cg opacity='0.5'%3E%3Ccircle cx='60' cy='60' r='0.8' fill='%23ffffff'/%3E%3Ccircle cx='200' cy='180' r='1.1' fill='%237ee8e3'/%3E%3Ccircle cx='250' cy='100' r='0.6' fill='%23ffffff'/%3E%3Ccircle cx='120' cy='280' r='0.9' fill='%235ecbcd'/%3E%3Ccircle cx='180' cy='40' r='0.4' fill='%236b5cb7'/%3E%3Ccircle cx='80' cy='160' r='1.4' fill='%23ffffff'/%3E%3Ccircle cx='240' cy='240' r='0.5' fill='%237ee8e3'/%3E%3Ccircle cx='40' cy='220' r='0.7' fill='%235ecbcd'/%3E%3C/g%3E%3C/svg%3E") repeat right bottom / 299px 331px,
      #281c3d;
      padding-inline: clamp(15px, 5vw, 45px);

      [data-ty] {
        overflow-x: auto;
      }
    }
  }
}

[data-md-color-scheme="default"] .md-typeset {

  .md-button--primary {
    &:hover, &:focus {
      box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.23);
    }
  }

  p:has(img[src$="#only-dark"]) {
    display: none;
  }

  [data-termynal] {
    background: linear-gradient(to bottom, #87CEEB 0%, #B0E0E6 40%, #E0F6FF 100%);

    color: black;

    &::before,
    &::after {
      color: inherit;
    }

    * {
      color: inherit;

      &::before,
      &::after {
        color: inherit;
      }
    }
  }
}


[data-md-color-scheme="slate"] .md-typeset {

  .md-button--primary {
    color: var(--md-default-bg-color);

    &:hover, &:focus {
      box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.23);
    }
  }

  p:has(img[src$="#only-light"]) {
    display: none;
  }
}