:root{
  --color1:18 113 255;
  --color2:221 74 255;
  --color3:100 220 255;
  --color4:200 50 50;
  --color5:180 180 50;
  --color-interactive:140 100 255;
  --circle-size:80%;
}

@keyframes moving-in-circle{
  0%{
    transform:rotate(0deg);
  }
  50%{
    transform:rotate(180deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
@keyframes moving-vertical{
  0%{
    transform:translateY(-50%);
  }
  50%{
    transform:translateY(50%);
  }
  100%{
    transform:translateY(-50%);
  }
}
@keyframes moving-horizontal{
  0%{
    transform:translateX(-50%) translateY(-10%);
  }
  50%{
    transform:translateX(50%) translateY(10%);
  }
  100%{
    transform:translateX(-50%) translateY(-10%);
  }
}
.gradient-bg{
  position:relative;
  left:0px;
  top:0px;
  overflow:hidden;
  background-image:linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from:rgb(var(--color-primary) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to:rgb(var(--color-primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to:#18181b var(--tw-gradient-to-position);
}
.gradient-bg .gradients-container{
  position:absolute;
  left:0px;
  top:0px;
  height:100%;
  width:100%;
  --tw-blur:blur(40px);
  filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.gradient-bg .g1,
.gradient-bg .g2,
.gradient-bg .g3,
.gradient-bg .g4,
.gradient-bg .g5,
.gradient-bg .interactive{
  position:absolute;
  opacity:1;
  mix-blend-mode:hard-light;
  height:var(--circle-size);
  width:var(--circle-size);
  top:calc(50% - var(--circle-size) / 2);
  left:calc(50% - var(--circle-size) / 2);
}
.gradient-bg .g1{
  background:radial-gradient(circle at center, rgb(var(--color1)/80%) 0, rgb(var(--color1)/0%) 50%) no-repeat;
  transform-origin:center center;
  animation:moving-vertical 30s ease infinite;
}
.gradient-bg .g2{
  background:radial-gradient(circle at center, rgb(var(--color2)/80%) 0, rgb(var(--color2)/0%) 50%) no-repeat;
  transform-origin:calc(50% - 400px);
  animation:moving-in-circle 20s reverse infinite;
}
.gradient-bg .g3{
  background:radial-gradient(circle at center, rgb(var(--color3)/80%) 0, rgb(var(--color3)/0%) 50%) no-repeat;
  top:calc(50% - var(--circle-size) / 2 + 200px);
  left:calc(50% - var(--circle-size) / 2 - 500px);
  transform-origin:calc(50% + 400px);
  animation:moving-in-circle 40s linear infinite;
}
.gradient-bg .g4{
  opacity:0.7;
  background:radial-gradient(circle at center, rgb(var(--color4)/80%) 0, rgb(var(--color4)/0%) 50%) no-repeat;
  transform-origin:calc(50% - 200px);
  animation:moving-horizontal 40s ease infinite;
}
.gradient-bg .g5{
  background:radial-gradient(circle at center, rgb(var(--color5)/80%) 0, rgb(var(--color5)/0%) 50%) no-repeat;
  width:calc(var(--circle-size) * 2);
  height:calc(var(--circle-size) * 2);
  top:calc(50% - var(--circle-size));
  left:calc(50% - var(--circle-size));
  transform-origin:calc(50% - 800px) calc(50% + 200px);
  animation:moving-in-circle 20s ease infinite;
}
.gradient-bg .interactive{
  left:-50%;
  top:-50%;
  height:100%;
  width:100%;
  opacity:0.7;
  background:radial-gradient(circle at center, rgb(var(--color-interactive)/80%) 0, rgb(var(--color-interactive)/0%) 50%) no-repeat;
}

.preselection .icon-italic-arrow .stroke{
  stroke:rgb(255 255 255 / 0.7);
}
.preselection::before{
  position:absolute;
  right:0px;
  top:0px;
  height:100%;
  width:0px;
  background-color:rgb(255 255 255 / 0.8);
  transition-property:all;
  transition-duration:300ms;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  content:"";
}
.preselection:hover::before{
  width:100%;
}
.preselection:hover .preselection-text{
  z-index:10;
  color:rgb(0 0 0 / 0.8);
}
.preselection:hover .icon-italic-arrow .stroke{
  z-index:10;
  stroke:#fff;
}

.search-input::-webkit-search-cancel-button{
  display:none;
}