@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --font-size-min: 16;
  --font-size-max: 20;
  --font-ratio-min: 1.2;
  --font-ratio-max: 1.33;
  --font-width-min: 375;
  --font-width-max: 1500;
}

html {
  color-scheme: light dark;
}

[data-theme="light"] {
  color-scheme: light only;
}

[data-theme="dark"] {
  color-scheme: dark only;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue",
    Helvetica, Arial, sans-serif, system-ui;
}

body::before {
  --size: 45px;
  --line: color-mix(in lch, canvasText, transparent 70%);
  content: "";
  height: 100vh;
  width: 100vw;
  position: fixed;
  background: linear-gradient(
        90deg,
        var(--line) 1px,
        transparent 1px var(--size)
      )
      50% 50% / var(--size) var(--size),
    linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
      var(--size) var(--size);
  mask: linear-gradient(-20deg, transparent 20%, white);
  top: 0;
  transform-style: flat;
  pointer-events: none;
  z-index: -1;
}

.generate {
  height: 80px;
  font-size: 2rem;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  border-radius: 2.5rem;
  cursor: pointer;
  background-color: #1f1f1f;
  text-align: center;
  padding: 20px 30px 60px;
  color: #9e9e9e;
  border: 0;
}

.generate:hover {
  background-color: #7662c4;
  background-image: linear-gradient(
    142deg,
    rgba(221, 136, 235, 0.451) 0%,
    rgba(118, 98, 196, 0.008) 58%
  );
  transition: color 0.5s ease, background-color 0.25s ease,
    border-color 0.25s ease;
  transform: scale(1.1);
  color: white;
  /*filter: blur(2rem);
  opacity: 0.7;*/
  box-shadow: 0px 0px 35px 35px #8447ff8f;
  border: 0.2rem solid #ffffff27;
  text-shadow: 1px 1px 10px #ccc;
  animation: animation 1s linear;
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

@keyframes animation {
  from {
    color: #ffffff81;
  }
  to {
    color: #ffffff;
  }
}

button svg {
  width: 30px;
  height: 30px;
  translate: -15% 15%;
  /*border: 1px solid red;*/
}