@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import "tailwindcss";

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: "Space Grotesk", sans-serif;
  background-color: #292524;
}

.polka{
  overflow: hidden;
  will-change: transform;
}

.polka::before{
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background-image: radial-gradient(#0c0a09b5 20%, #292524 22%);
  background-size: 80px 80px;
  animation-name: background_keyframes;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotate(35deg) scale(2);
  contain: paint;
}

@keyframes background_keyframes {
  0%{
    background-position: 0px 0px;
  }
  100%{
    background-position: 160px 80px;
  }
}