@layer theme {
  /* Hide the scrollbar */
  ::-webkit-scrollbar {
    display: none;
    -webkit-appearance: none;
    width: 0;
    height: 0;
  }

  ::selection {
      background-color: var(--theme-primary);
      color: var(--shade-black);
      text-shadow: none;
  }

  :root {
    --header-height: 0;
    --transition-speed-fast: .3s;
    --transition-speed-normal: .75s;
    --transition-speed-slow: 1.2s;
    --ease-hop: cubic-bezier(.87, 0, .13, 1);
    --ease-hard: cubic-bezier(1, 0, 0, 1);
  }

  body {
    background-color: inherit !important;
  }

  ul {
    margin: unset;
    padding: unset;
    list-style: none
  }

  .page-wrap {
    position: relative;
    transform: translateY(0svh)
  }

  .line {
    position: relative;
    will-change: transform
  }

  /* Animations */
  @keyframes flash {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes bg-noise-animation {
      0% { transform: translate(0,0) }
      10% { transform: translate(-5%,-5%) }
      20% { transform: translate(-10%,5%) }
      30% { transform: translate(5%,-10%) }
      40% { transform: translate(-5%,15%) }
      50% { transform: translate(-10%,5%) }
      60% { transform: translate(15%,0) }
      70% { transform: translate(0,10%) }
      80% { transform: translate(-15%,0) }
      90% { transform: translate(10%,5%) }
      100% { transform: translate(5%,0) }
  }
}