@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

@font-face {
  font-family: "Forma DJR Banner";
  src: url(assets/fonts/forma-djr-banner-regular.woff2);
}

@font-face {
  font-family: "Forma DJR Banner Thin";
  src: url(assets/fonts/forma-djr-banner-thin.woff2);
}

@font-face {
  font-family: "Graphie";
  src: url(assets/fonts/graphie-regular.woff2);
}

.Index {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

.Index ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
}

.Index ul li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

ul {
  list-style: none;
}

@keyframes jump {
  0% {
    bottom: 50vh;
  }

  50% {
    bottom: 55vh;
  }

  75% {
    bottom: 50vh;
  }
}

.bar-loader {
  width: 16px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#fff 0 0);
  background:
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: l1 1s infinite linear;
}

.bar-loader-dark {
  width: 16px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#000 0 0);
  background:
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: l1 1s infinite linear;
}

@keyframes l1 {
  0%  {background-size: 20% 100%,20% 100%,20% 100%}
  33% {background-size: 20% 10% ,20% 100%,20% 100%}
  50% {background-size: 20% 100%,20% 10% ,20% 100%}
  66% {background-size: 20% 100%,20% 100%,20% 10% }
  100%{background-size: 20% 100%,20% 100%,20% 100%}
}

@keyframes slide-up {
  from {
    transform: translateY(50px);
  }

  to {
    transform: translateY(0px);
  }
}

.spin-loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid rgb(0, 232, 174);
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}

@keyframes l20-1{
  0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
  12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
  25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
  50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
  62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
  75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
  100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}

@keyframes l20-2{
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}