* {
  font-family: kinnBook, serif !important;
}

main {
  #hero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;

    #imgScroller {
      position: fixed;
      top: -500px;
      left: 0;
      transform: rotateX(35deg);
      animation: scrollerAnim 30s infinite ease-in-out;
      filter: blur(15px);
      opacity: 0.5;
      pointer-events: none;

      img {
        width: 100%;
      }
    }

    #introducer {
      z-index: 9999;
      font-family: kinnBook, serif;

      #quickFeatures {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex-direction: column;

        h1 {
          font-size: 25px;
        }

        p {
          font-size: 18px;
        }

        .chtn_desc {
          width: 500px;
        }
      }
    }

    @keyframes scrollerAnim {
      0% {
        transform: translateY(450px);
      }

      50% {
        transform: translateY(-450px);
      }

      100% {
        transform: translateY(450px);
      }
    }
  }

  .detailedFeature {
    z-index: 9999;
    padding: 50px 15% 50px 15%;

    .style {
      background: var(--tui-background-base-alt);
      width: 100%;
      padding: 20px 20px 20px 50px;
      border-radius: 50px;

      .cardList {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 10px;

        div {
          p {
            font-size: 15px;
          }

          h2 {
            display: flex;
            align-items: center;
            gap: 5px;
            margin: 0;
          }

          i, fa-icon {
            font-size: 75px;
          }

          a {
            color: var(--tui-background-accent-1);
            text-decoration: none;
          }
        }
      }
    }

    h1 {
      font-size: 50px;
      font-weight: bolder;
    }

    tui-icon {
      font-size: 50px;
    }

    p {
      font-size: 20px;
    }
  }
}

.logo {
  font-size: 55px;
  stroke: var(--tui-background-accent-1);
  fill: transparent;
  font-family: kinnBook, serif !important;
  font-weight: bold;
  stroke-width: 2;
  stroke-dasharray: 50 20;    /* Dashes and gaps */
  stroke-dashoffset: 0;
  animation: moveStroke 2s linear infinite;
}

@keyframes moveStroke {
  to {
    stroke-dashoffset: -70;   /* Negative offset moves the dashes endlessly */
  }
}

footer {
  height: 25svh;
  width: 100vw;
  background: var(--tui-background-base-alt);
  padding: 50px;

  p {
    font-size: 25px;
    font-family: kinnBook, serif;
    font-weight: bold;
  }
}

#cookieConsent {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 9999;
  width: 350px;
  height: 300px;

  h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
  }
}
