@charset "UTF-8";
*,
::before,
::after {
  box-sizing: inherit;
  min-width: 0;
  background-repeat: no-repeat;
}

::before,
::after {
  vertical-align: inherit;
  text-decoration: inherit;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1em;
  line-height: 1.15;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  -moz-tab-size: 4;
  tab-size: 4;
  cursor: default;
  color-scheme: light dark;
  scrollbar-gutter: stable;
  hanging-punctuation: first last;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
  }
}
::-moz-selection {
  background: hsl(203.84, 92%, 30.2%);
  color: #fff;
  text-shadow: none;
}

::selection {
  background: hsl(203.84, 92%, 30.2%);
  color: #fff;
  text-shadow: none;
}

body {
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: linear-gradient(135deg, #fff, hsl(210, 16.667%, 97.65%)) #fff border-box;
  color: hsl(210, 10.8%, 14.5%);
  font-family: Roboto, system-ui, Ubuntu, Cantarell, Arial, "Noto Sans", "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5;
  text-align: start;
  text-rendering: optimizeSpeed;
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }
}
@media screen and (max-width: 27.25em), screen and (max-height: 41.25em) {
  body {
    line-height: 1.4;
  }
}
@media screen and (min-width: 80em) {
  body {
    text-rendering: optimizeLegibility;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: hsl(0, 0%, 7.06%);
    background-image: linear-gradient(135deg, hsl(0, 0%, 7.06%), hsl(300, 20%, 3.4%));
    color: #fff;
  }
}

canvas,
details,
dialog,
legend,
main,
summary,
img,
svg,
video {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
figcaption {
  text-wrap: balance;
}

h1 {
  margin: 0 0 0.67em;
  margin-block: 0 0.67em;
  margin-inline: 0;
  font-size: 2em;
}

h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-block-start: 0;
}

p {
  max-inline-size: 92ch;
  text-wrap: pretty;
}

p,
dl,
ol,
ul,
figure,
blockquote {
  margin: 0 0 1rem;
  margin-block: 0 1rem;
  margin-inline: 0;
}

b,
strong {
  font-weight: bolder;
  line-height: inherit;
}

small {
  font-size: 80%;
  line-height: inherit;
}

sub,
sup {
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

code,
kbd,
pre,
samp {
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1em;
}

code,
kbd {
  font-size: 0.875em;
}

code {
  border-radius: 3px;
  background-color: #eee;
  word-break: break-word;
}

kbd {
  position: relative;
  top: -0.125rem;
  inset-block-start: -0.125rem;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border: 1px solid rgba(180, 180, 180, 0.95);
  border-radius: 3px;
  background-color: #eee;
  color: #333;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  font-size: 0.875em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

pre {
  overflow: auto;
  margin: 0 0 1rem;
  margin-block: 0 1rem;
  margin-inline: 0;
}

:where(pre:has(code)) {
  max-width: 110ch;
  max-inline-size: 110ch;
  max-height: 21.25rem;
  max-block-size: 21.25rem;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 3px;
  background-color: #eee;
}

:where(pre) code {
  border-radius: 0;
  background-color: inherit;
  word-break: inherit;
}

output {
  display: inline-block;
}

address {
  margin: 0 0 1rem;
  margin-block: 0 1rem;
  margin-inline: 0;
  font-style: normal;
  line-height: inherit;
}

dfn[title],
abbr[title],
acronym[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  border-color: currentColor;
  text-indent: 0;
  font-variant-numeric: tabular-nums;
}

table,
table > tr {
  vertical-align: middle;
}

th {
  text-align: inherit;
}

caption {
  padding: 0.75rem 0;
  padding-block: 0.75rem;
  color: hsl(208.24, 7.3%, 45.69%);
  caption-side: bottom;
  text-align: inherit;
}

hr {
  display: block;
  overflow: hidden;
  box-sizing: content-box;
  height: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid currentColor;
  margin: 1rem 0;
  margin-block: 1rem;
  margin-inline: 0;
  color: inherit;
  opacity: 0.6;
}

.hr-light {
  border-top-color: #ccc;
  opacity: 1;
}

dfn,
cite {
  font-style: italic;
}

dd {
  margin: 0 0 0.5rem;
  margin-block: 0 0.5rem;
  margin-inline: 0;
}

menu,
nav ol,
nav ul,
footer ol,
footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

menu dl,
ol dl,
ul dl,
dl dl,
dl ol,
dl ul,
dl menu {
  margin: 0;
}

nav li:before {
  content: "​";
  float: left;
}

dialog {
  position: absolute;
  right: 0;
  left: 0;
  width: -webkit-intrinsic;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-intrinsic;
  height: -moz-fit-content;
  height: fit-content;
  padding: 1em;
  border: solid;
  margin: auto;
  background-color: #fff;
  color: hsl(0, 0%, 7.06%);
}

dialog:not([open]),
template {
  display: none;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
}

button,
input,
select,
textarea {
  padding: 0.25em 0.375em;
  padding-block: 0.25em;
  padding-inline: 0.375em;
  background-color: transparent;
  color: inherit;
  letter-spacing: inherit;
}

a,
area,
button,
[role=button],
input:not([type=range]),
label,
select,
summary,
textarea,
[tabindex="0"] {
  touch-action: manipulation;
}

a {
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
  -webkit-text-decoration-skip: objects;
}
a, a:link, a:visited {
  color: hsl(203.84, 92%, 30.2%);
}
a:hover, a:focus, a:active {
  text-decoration: underline;
}

button,
select {
  text-transform: none;
}

select {
  padding: 0.125em 1em 0.125em 0.25em;
  padding-block: 0.125em;
  padding-inline: 1em 0.25em;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center/1em;
}

select[multiple] {
  background-image: none;
}

select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
}

button,
[type=button],
[type=reset],
[type=submit] {
  border-radius: 0;
  -webkit-appearance: button;
  cursor: pointer;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

[type=color],
[type=range] {
  padding: 0;
  border-width: 0;
}

input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: hsl(0, 0%, 90.2%);
  cursor: not-allowed;
}

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

legend {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 0 0.5rem;
  margin-block: 0 0.5rem;
  margin-inline: 0;
  color: inherit;
  font-size: 1.375rem;
  line-height: inherit;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

::placeholder {
  color: inherit;
  opacity: 0.54;
}

:-moz-ui-invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:invalid {
  box-shadow: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: none;
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration,
::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

audio,
canvas,
embed,
iframe,
img,
input,
object,
select,
textarea,
video {
  max-width: 100%;
  height: auto;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

img {
  border-style: none;
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: smooth;
  font-style: italic;
  shape-margin: 1rem;
}
img[src$=".bmp"], img[src$=".gif"], img[src$=".png"], img[src$=".svg"] {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimizeQuality;
  image-rendering: crisp-edges;
}
img[src$=".avif"], img[src$=".jp2"], img[src$=".jpeg"], img[src$=".jpg"], img[src$=".jxr"], img[src$=".webp"] {
  image-rendering: smooth;
}

iframe {
  border: 0;
}

summary {
  cursor: pointer;
}

details > summary:first-of-type {
  display: list-item;
}

details[open] > summary:first-of-type {
  list-style: disclosure-open inside;
}

svg:not(:root) {
  overflow: hidden;
}

svg:not([fill]) {
  fill: currentColor;
}

[aria-busy=true] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled=true],
[disabled] {
  cursor: not-allowed;
}

[aria-hidden=false][hidden] {
  display: initial;
}
[aria-hidden=false][hidden]:not(:focus) {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    background-attachment: initial !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 1ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
[hidden] {
  display: none !important;
}

.sr-only,
.visually-hidden,
.sr-only--focusable,
.visually-hidden--focusable {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  white-space: nowrap;
}

.sr-only.focusable:focus, .sr-only.focusable:active,
.sr-only--focusable:focus,
.sr-only--focusable:active,
.visually-hidden.focusable:focus,
.visually-hidden.focusable:active,
.visually-hidden--focusable:focus,
.visually-hidden--focusable:active {
  position: static;
  overflow: visible;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  margin: 0;
  white-space: inherit;
}

.invisible {
  visibility: hidden;
}

.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.group {
  display: flow-root;
  overflow: clip;
}

.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.anim-off {
  animation: none !important;
}

#root,
#__next {
  isolation: isolate;
}

html {
  scrollbar-width: thin;
  scrollbar-color: white purple;
  scrollbar-face-color: white;
  scrollbar-track-color: purple;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: purple;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d2d2d2;
}
::-webkit-scrollbar-thumb:active {
  background: #a6a6a6;
  box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.5);
}

.container {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100dvh;
}

.controls-wrapper {
  position: absolute;
  top: 2%;
  z-index: 9999;
}

.stage-title {
  font: normal 700 3rem system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  animation: txt-track-in 1.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black !important;
  position: absolute;
  top: 10%;
  color: #fff;
  color: hsl(92, 100%, 25%);
  color: hsl(92, 100%, 50%);
  color: hsl(92, 100%, 50%);
}
@keyframes txt-track-in {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}
.stage-title:hover {
  animation: wobble-from-top 0.8s both;
}
@keyframes wobble-from-top {
  0%, 100% {
    transform: translateX(0);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateX(-30px) rotate(6deg);
  }
  30% {
    transform: translateX(15px) rotate(-6deg);
  }
  45% {
    transform: translateX(-15px) rotate(3.6deg);
  }
  60% {
    transform: translateX(9px) rotate(-2.4deg);
  }
  75% {
    transform: translateX(-6px) rotate(1.2deg);
  }
}

.stage {
  width: 80%;
  height: 80vh;
  z-index: 900;
  -webkit-user-select: none;
  user-select: none;
  perspective: 500px;
  perspective-origin: 50%;
  background: red;
  background-image: linear-gradient(45deg, red 0% 50%, blue 50% 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 4px solid #000;
  margin: 0 auto;
}

.card {
  width: 35%;
  min-width: 11rem;
  max-width: 22rem;
  height: 40%;
  min-height: 5.5rem;
  max-height: 22rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
  font: normal small-caps 900 semi-expanded 4rem/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  letter-spacing: 1.5px;
  position: relative;
  border: 8px solid hsl(208, 100%, 50%);
  border-radius: 12px;
  background: hsl(208, 100%, 50%) padding-box;
  font-variant-caps: all-small-caps;
  text-align: center;
  transition-property: transform, box-shadow, border-color, background-color;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
}
.card:hover {
  box-shadow: 0 15px 24px rgba(255, 255, 255, 0.22), 0 19px 76px rgba(255, 255, 255, 0.3);
  border-color: rgba(26, 148, 255, 0.8);
  transform: translateY(-1.06%) scale(1.021212);
}
.card:active {
  box-shadow: none;
  border-color: rgba(0, 122, 230, 0.8);
  transform: none;
}

@keyframes hue-shift {
  0% {
    background-color: hsl(0, 80%, 90%);
  }
  1% {
    background-color: hsl(22.6045870306, 80%, 90%);
  }
  2% {
    background-color: hsl(45.1199640831, 80%, 90%);
  }
  3% {
    background-color: hsl(67.4572732509, 80%, 90%);
  }
  4% {
    background-color: hsl(89.5283593793, 80%, 90%);
  }
  5% {
    background-color: hsl(111.246117975, 80%, 90%);
  }
  6% {
    background-color: hsl(132.5248389665, 80%, 90%);
  }
  7% {
    background-color: hsl(153.2805449634, 80%, 90%);
  }
  8% {
    background-color: hsl(173.4313226766, 80%, 90%);
  }
  9% {
    background-color: hsl(192.8976461924, 80%, 90%);
  }
  10% {
    background-color: hsl(211.6026908253, 80%, 90%);
  }
  11% {
    background-color: hsl(229.4726363095, 80%, 90%);
  }
  12% {
    background-color: hsl(246.4369581343, 80%, 90%);
  }
  13% {
    background-color: hsl(262.4287058717, 80%, 90%);
  }
  14% {
    background-color: hsl(277.3847673993, 80%, 90%);
  }
  15% {
    background-color: hsl(291.246117975, 80%, 90%);
  }
  16% {
    background-color: hsl(303.9580531807, 80%, 90%);
  }
  17% {
    background-color: hsl(315.4704048158, 80%, 90%);
  }
  18% {
    background-color: hsl(325.7377388878, 80%, 90%);
  }
  19% {
    background-color: hsl(334.7195349198, 80%, 90%);
  }
  20% {
    background-color: hsl(342.3803458663, 80%, 90%);
  }
  21% {
    background-color: hsl(348.6899380063, 80%, 90%);
  }
  22% {
    background-color: hsl(353.6234102623, 80%, 90%);
  }
  23% {
    background-color: hsl(357.1612924732, 80%, 90%);
  }
  24% {
    background-color: hsl(359.2896222342, 80%, 90%);
  }
  25% {
    background-color: hsl(0, 80%, 90%);
  }
  26% {
    background-color: hsl(359.2896222342, 80%, 90%);
  }
  27% {
    background-color: hsl(357.1612924732, 80%, 90%);
  }
  28% {
    background-color: hsl(353.6234102623, 80%, 90%);
  }
  29% {
    background-color: hsl(348.6899380063, 80%, 90%);
  }
  30% {
    background-color: hsl(342.3803458663, 80%, 90%);
  }
  31% {
    background-color: hsl(334.7195349198, 80%, 90%);
  }
  32% {
    background-color: hsl(325.7377388878, 80%, 90%);
  }
  33% {
    background-color: hsl(315.4704048158, 80%, 90%);
  }
  34% {
    background-color: hsl(303.9580531807, 80%, 90%);
  }
  35% {
    background-color: hsl(291.246117975, 80%, 90%);
  }
  36% {
    background-color: hsl(277.3847673993, 80%, 90%);
  }
  37% {
    background-color: hsl(262.4287058717, 80%, 90%);
  }
  38% {
    background-color: hsl(246.4369581343, 80%, 90%);
  }
  39% {
    background-color: hsl(229.4726363095, 80%, 90%);
  }
  40% {
    background-color: hsl(211.6026908253, 80%, 90%);
  }
  41% {
    background-color: hsl(192.8976461924, 80%, 90%);
  }
  42% {
    background-color: hsl(173.4313226766, 80%, 90%);
  }
  43% {
    background-color: hsl(153.2805449634, 80%, 90%);
  }
  44% {
    background-color: hsl(132.5248389665, 80%, 90%);
  }
  45% {
    background-color: hsl(111.246117975, 80%, 90%);
  }
  46% {
    background-color: hsl(89.5283593793, 80%, 90%);
  }
  47% {
    background-color: hsl(67.4572732509, 80%, 90%);
  }
  48% {
    background-color: hsl(45.1199640831, 80%, 90%);
  }
  49% {
    background-color: hsl(22.6045870306, 80%, 90%);
  }
  50% {
    background-color: hsl(0, 80%, 90%);
  }
  51% {
    background-color: hsl(337.3954129694, 80%, 90%);
  }
  52% {
    background-color: hsl(314.8800359169, 80%, 90%);
  }
  53% {
    background-color: hsl(292.5427267491, 80%, 90%);
  }
  54% {
    background-color: hsl(270.4716406207, 80%, 90%);
  }
  55% {
    background-color: hsl(248.753882025, 80%, 90%);
  }
  56% {
    background-color: hsl(227.4751610335, 80%, 90%);
  }
  57% {
    background-color: hsl(206.7194550366, 80%, 90%);
  }
  58% {
    background-color: hsl(186.5686773234, 80%, 90%);
  }
  59% {
    background-color: hsl(167.1023538076, 80%, 90%);
  }
  60% {
    background-color: hsl(148.3973091747, 80%, 90%);
  }
  61% {
    background-color: hsl(130.5273636905, 80%, 90%);
  }
  62% {
    background-color: hsl(113.5630418657, 80%, 90%);
  }
  63% {
    background-color: hsl(97.5712941283, 80%, 90%);
  }
  64% {
    background-color: hsl(82.6152326007, 80%, 90%);
  }
  65% {
    background-color: hsl(68.753882025, 80%, 90%);
  }
  66% {
    background-color: hsl(56.0419468193, 80%, 90%);
  }
  67% {
    background-color: hsl(44.5295951842, 80%, 90%);
  }
  68% {
    background-color: hsl(34.2622611122, 80%, 90%);
  }
  69% {
    background-color: hsl(25.2804650802, 80%, 90%);
  }
  70% {
    background-color: hsl(17.6196541337, 80%, 90%);
  }
  71% {
    background-color: hsl(11.3100619937, 80%, 90%);
  }
  72% {
    background-color: hsl(6.3765897377, 80%, 90%);
  }
  73% {
    background-color: hsl(2.8387075268, 80%, 90%);
  }
  74% {
    background-color: hsl(0.7103777658, 80%, 90%);
  }
  75% {
    background-color: hsl(0, 80%, 90%);
  }
  76% {
    background-color: hsl(0.7103777658, 80%, 90%);
  }
  77% {
    background-color: hsl(2.8387075268, 80%, 90%);
  }
  78% {
    background-color: hsl(6.3765897377, 80%, 90%);
  }
  79% {
    background-color: hsl(11.3100619937, 80%, 90%);
  }
  80% {
    background-color: hsl(17.6196541337, 80%, 90%);
  }
  81% {
    background-color: hsl(25.2804650802, 80%, 90%);
  }
  82% {
    background-color: hsl(34.2622611122, 80%, 90%);
  }
  83% {
    background-color: hsl(44.5295951842, 80%, 90%);
  }
  84% {
    background-color: hsl(56.0419468193, 80%, 90%);
  }
  85% {
    background-color: hsl(68.753882025, 80%, 90%);
  }
  86% {
    background-color: hsl(82.6152326007, 80%, 90%);
  }
  87% {
    background-color: hsl(97.5712941283, 80%, 90%);
  }
  88% {
    background-color: hsl(113.5630418657, 80%, 90%);
  }
  89% {
    background-color: hsl(130.5273636905, 80%, 90%);
  }
  90% {
    background-color: hsl(148.3973091747, 80%, 90%);
  }
  91% {
    background-color: hsl(167.1023538076, 80%, 90%);
  }
  92% {
    background-color: hsl(186.5686773234, 80%, 90%);
  }
  93% {
    background-color: hsl(206.7194550366, 80%, 90%);
  }
  94% {
    background-color: hsl(227.4751610335, 80%, 90%);
  }
  95% {
    background-color: hsl(248.753882025, 80%, 90%);
  }
  96% {
    background-color: hsl(270.4716406207, 80%, 90%);
  }
  97% {
    background-color: hsl(292.5427267491, 80%, 90%);
  }
  98% {
    background-color: hsl(314.8800359169, 80%, 90%);
  }
  99% {
    background-color: hsl(337.3954129694, 80%, 90%);
  }
}
.front {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 20;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 8px solid hsl(208, 100%, 50%);
  border-radius: 12px;
  background: hwb(172.453 18% 20%) padding-box;
  color: hsl(352.453, 63.855%, 24.41%);
  color: hsl(352.453, 63.855%, 48.82%);
  text-align: center;
}
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateX(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 8px solid hsl(208, 100%, 50%);
  border-radius: 12px;
  background: hsl(210, 10.8%, 14.5%) padding-box;
  color: #fff;
  text-align: center;
}

.active-anim-flip {
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  animation: hinge-open-forwards-from-top-right 1s ease-out both;
}
@-moz-document url-prefix() {
  .active-anim-flip {
    backface-visibility: hidden;
  }
}
@keyframes hinge-open-forwards-from-top-right {
  0% {
    transform: rotate3d(1, 1, 0, 0deg);
    transform-origin: 100% 0%;
  }
  100% {
    transform: rotate3d(1, 1, 0, 180deg);
    transform-origin: 100% 0%;
  }
}

.active-anim-flip-rev {
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  animation: hinge-close-backwards-from-top-right 1s ease-in both;
}
@-moz-document url-prefix() {
  .active-anim-flip-rev {
    backface-visibility: hidden;
  }
}
@keyframes hinge-close-backwards-from-top-right {
  0% {
    transform: rotate3d(1, 1, 0, -180deg);
    transform-origin: 100% 0%;
  }
  100% {
    transform: rotate3d(1, 1, 0, 0deg);
    transform-origin: 100% 0%;
  }
}

.active-anim-flip-scale {
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  animation: flip-scale-up-horizontally--2 0.6s linear both;
}
@-moz-document url-prefix() {
  .active-anim-flip-scale {
    backface-visibility: hidden;
  }
}
@keyframes flip-scale-up-horizontally--2 {
  0% {
    transform: scale(1) rotateX(0);
  }
  50% {
    transform: scale(2.5) rotateX(-90deg);
  }
  100% {
    transform: scale(1) rotateX(-180deg);
  }
}

.active-anim-shrink {
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  animation: flip-scale-down-horizontally 0.6s linear alternate-reverse both;
}
@-moz-document url-prefix() {
  .active-anim-shrink {
    backface-visibility: hidden;
  }
}
@keyframes flip-scale-down-horizontally {
  0% {
    transform: scale(1) rotateX(0);
  }
  50% {
    transform: scale(0.4) rotateX(90deg);
  }
  100% {
    transform: scale(1) rotateX(180deg);
  }
}

.active-anim-vanish {
  transform: translate3d(0, 0, 0);
  animation: vanish-in-from-left 1.5s both;
}
@keyframes vanish-in-from-left {
  0% {
    opacity: 0;
    filter: blur(90px);
    transform: scale(2);
    transform-origin: 100% 50%;
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    transform-origin: 100% 50%;
  }
}

.active-anim-puff {
  transform: translate3d(0, 0, 0);
  animation: puff-out-from-back 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
@keyframes puff-out-from-back {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translateZ(0);
  }
  100% {
    opacity: 0;
    filter: blur(4px);
    transform: translateZ(80px);
  }
}

.active-anim-poof {
  transform: translate3d(0, 0, 0);
  animation: poof-in-to-top-right 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}
@keyframes poof-in-to-top-right {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: scale(2);
    transform-origin: 100% 0%;
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    transform-origin: 100% 0%;
  }
}

.active-anim-poof-puff {
  transform: translate3d(0, 0, 0);
  animation: poof-puff-in-to-front 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}
@keyframes poof-puff-in-to-front {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: scale(2.5) translateZ(-80px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translateZ(0);
  }
}

.active-anim-zoom {
  transform: translate3d(0, 0, 0);
  animation: zoom-in-from-top 1.35s both;
}
@keyframes zoom-in-from-top {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.active-anim-speed {
  animation: speed-in-from-right 0.65s ease-out both;
}
@keyframes speed-in-from-right {
  0% {
    opacity: 0;
    transform: translate3d(150%, 0, 0) skewX(-30deg);
  }
  40% {
    opacity: 1;
  }
  60% {
    transform: skewX(20deg);
  }
  80% {
    transform: skewX(-5deg);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.btn {
  -webkit-appearance: none;
  appearance: none;
  display: initial;
  padding: 0;
  border: 0;
  margin: 0;
  background: padding-box border-box;
  box-shadow: none;
  font: inherit;
  text-shadow: none;
  display: inline-block;
  vertical-align: middle;
  padding: 0.875rem 1.75rem;
  border: 6px ridge rgba(136, 0, 255, 0.8);
  border-radius: 16px;
  margin: 0 1rem;
  background: #0088ff;
  color: #fff;
  text-align: center;
  cursor: pointer;
  font: 700 1.5rem system-ui;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
  box-shadow: 0 3px 12px rgba(136, 0, 255, 0.23), 0 3px 12px rgba(136, 0, 255, 0.16);
  transition-property: transform, box-shadow, border-color, background-color, color;
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
}
.btn:hover {
  box-shadow: 0 10px 20px rgba(136, 0, 255, 0.22), 0 14px 56px rgba(136, 0, 255, 0.25);
  border-color: rgba(148, 26, 255, 0.8);
  background-color: #1a94ff;
  transform: translateY(-2px) scale(1.005);
}
.btn:active {
  box-shadow: none;
  border-color: rgba(122, 0, 230, 0.8);
  background-color: #007ae6;
  transform: none;
}

.ribbon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 2em;
  text-align: center;
  transform: translateY(-100%) rotate(90deg) translateX(70.7106781187%) rotate(-45deg);
  transform-origin: 100% 100%;
  font: normal 700 1.5rem/1 system-ui, sans-serif;
  color: #fff;
}
.ribbon:hover {
  animation: txt-glitch 3s infinite alternate-reverse both;
}
@keyframes txt-glitch {
  0% {
    margin-left: 0px;
    text-shadow: 34px 0 0 hsl(56, 100%, 50%);
  }
  1% {
    margin-left: 3px;
    text-shadow: 29px 0 0 hsl(200, 100%, 50%);
  }
  2% {
    margin-left: -1px;
    text-shadow: -34px 0 0 hsl(56, 100%, 50%);
  }
  3% {
    margin-left: 5px;
    text-shadow: -15px 0 0 hsl(200, 100%, 50%);
  }
  4% {
    margin-left: 3px;
    text-shadow: -13px 0 0 hsl(150.12, 100%, 50%);
  }
  5% {
    margin-left: -2px;
    text-shadow: 17px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  6% {
    margin-left: -3px;
    text-shadow: -18px 0 0 hsl(150.12, 100%, 50%);
  }
  7% {
    margin-left: -1px;
    text-shadow: 9px 0 0 hsl(150.12, 100%, 50%);
  }
  8% {
    margin-left: -1px;
    text-shadow: -8px 0 0 hsl(200, 100%, 50%);
  }
  9% {
    margin-left: 5px;
    text-shadow: -23px 0 0 hsl(200, 100%, 50%);
  }
  10% {
    margin-left: 4px;
    text-shadow: 17px 0 0 hsl(200, 100%, 50%);
  }
  11% {
    margin-left: -5px;
    text-shadow: -3px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  12% {
    margin-left: -4px;
    text-shadow: 19px 0 0 hsl(200, 100%, 50%);
  }
  13% {
    margin-left: 5px;
    text-shadow: -9px 0 0 hsl(56, 100%, 50%);
  }
  14% {
    margin-left: 5px;
    text-shadow: -8px 0 0 hsl(56, 100%, 50%);
  }
  15% {
    margin-left: 1px;
    text-shadow: 25px 0 0 hsl(150.12, 100%, 50%);
  }
  16% {
    margin-left: -2px;
    text-shadow: -23px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  17% {
    margin-left: 1px;
    text-shadow: -21px 0 0 hsl(56, 100%, 50%);
  }
  18% {
    margin-left: 5px;
    text-shadow: -4px 0 0 hsl(150.12, 100%, 50%);
  }
  19% {
    margin-left: -4px;
    text-shadow: 28px 0 0 hsl(56, 100%, 50%);
  }
  20% {
    margin-left: 0px;
    text-shadow: -22px 0 0 hsl(200, 100%, 50%);
  }
  21% {
    margin-left: 1px;
    text-shadow: 11px 0 0 hsl(56, 100%, 50%);
  }
  22% {
    margin-left: -1px;
    text-shadow: 17px 0 0 hsl(56, 100%, 50%);
  }
  23% {
    margin-left: -5px;
    text-shadow: -21px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  24% {
    margin-left: 2px;
    text-shadow: -16px 0 0 hsl(150.12, 100%, 50%);
  }
  25% {
    margin-left: -2px;
    text-shadow: 13px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  26% {
    margin-left: -1px;
    text-shadow: -5px 0 0 hsl(150.12, 100%, 50%);
  }
  27% {
    margin-left: -3px;
    text-shadow: -15px 0 0 hsl(56, 100%, 50%);
  }
  28% {
    margin-left: 5px;
    text-shadow: 26px 0 0 hsl(200, 100%, 50%);
  }
  29% {
    margin-left: 1px;
    text-shadow: 35px 0 0 hsl(200, 100%, 50%);
  }
  30% {
    margin-left: -2px;
    text-shadow: 16px 0 0 hsl(200, 100%, 50%);
  }
  31% {
    margin-left: -5px;
    text-shadow: 27px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  32% {
    margin-left: -4px;
    text-shadow: -29px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  33% {
    margin-left: 5px;
    text-shadow: -4px 0 0 hsl(150.12, 100%, 50%);
  }
  34% {
    margin-left: 2px;
    text-shadow: -2px 0 0 hsl(150.12, 100%, 50%);
  }
  35% {
    margin-left: 2px;
    text-shadow: 33px 0 0 hsl(200, 100%, 50%);
  }
  36% {
    margin-left: 3px;
    text-shadow: 6px 0 0 hsl(56, 100%, 50%);
  }
  37% {
    margin-left: 0px;
    text-shadow: -19px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  38% {
    margin-left: 3px;
    text-shadow: -3px 0 0 hsl(150.12, 100%, 50%);
  }
  39% {
    margin-left: 2px;
    text-shadow: -5px 0 0 hsl(56, 100%, 50%);
  }
  40% {
    margin-left: -3px;
    text-shadow: 0px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  41% {
    margin-left: -2px;
    text-shadow: -19px 0 0 hsl(200, 100%, 50%);
  }
  42% {
    margin-left: 6px;
    text-shadow: 10px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  43% {
    margin-left: 6px;
    text-shadow: -17px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  44% {
    margin-left: -3px;
    text-shadow: 29px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  45% {
    margin-left: 4px;
    text-shadow: 27px 0 0 hsl(150.12, 100%, 50%);
  }
  46% {
    margin-left: 6px;
    text-shadow: -15px 0 0 hsl(150.12, 100%, 50%);
  }
  47% {
    margin-left: -4px;
    text-shadow: -9px 0 0 hsl(150.12, 100%, 50%);
  }
  48% {
    margin-left: 0px;
    text-shadow: -33px 0 0 hsl(56, 100%, 50%);
  }
  49% {
    margin-left: 1px;
    text-shadow: 8px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  50% {
    margin-left: -3px;
    text-shadow: 26px 0 0 hsl(200, 100%, 50%);
  }
  51% {
    margin-left: -4px;
    text-shadow: 24px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  52% {
    margin-left: -1px;
    text-shadow: -16px 0 0 hsl(200, 100%, 50%);
  }
  53% {
    margin-left: -2px;
    text-shadow: 17px 0 0 hsl(150.12, 100%, 50%);
  }
  54% {
    margin-left: 4px;
    text-shadow: -7px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  55% {
    margin-left: -1px;
    text-shadow: 12px 0 0 hsl(150.12, 100%, 50%);
  }
  56% {
    margin-left: 3px;
    text-shadow: 28px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  57% {
    margin-left: 4px;
    text-shadow: -16px 0 0 hsl(200, 100%, 50%);
  }
  58% {
    margin-left: 0px;
    text-shadow: 35px 0 0 hsl(150.12, 100%, 50%);
  }
  59% {
    margin-left: -5px;
    text-shadow: 24px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  60% {
    margin-left: -2px;
    text-shadow: -8px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  61% {
    margin-left: 4px;
    text-shadow: 7px 0 0 hsl(150.12, 100%, 50%);
  }
  62% {
    margin-left: -3px;
    text-shadow: 12px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  63% {
    margin-left: -3px;
    text-shadow: -21px 0 0 hsl(150.12, 100%, 50%);
  }
  64% {
    margin-left: -3px;
    text-shadow: 19px 0 0 hsl(150.12, 100%, 50%);
  }
  65% {
    margin-left: 5px;
    text-shadow: 17px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  66% {
    margin-left: 3px;
    text-shadow: -11px 0 0 hsl(200, 100%, 50%);
  }
  67% {
    margin-left: 1px;
    text-shadow: -20px 0 0 hsl(200, 100%, 50%);
  }
  68% {
    margin-left: 1px;
    text-shadow: -31px 0 0 hsl(150.12, 100%, 50%);
  }
  69% {
    margin-left: 2px;
    text-shadow: -30px 0 0 hsl(200, 100%, 50%);
  }
  70% {
    margin-left: -4px;
    text-shadow: -13px 0 0 hsl(150.12, 100%, 50%);
  }
  71% {
    margin-left: -4px;
    text-shadow: 18px 0 0 hsl(56, 100%, 50%);
  }
  72% {
    margin-left: 4px;
    text-shadow: -25px 0 0 hsl(56, 100%, 50%);
  }
  73% {
    margin-left: -5px;
    text-shadow: -17px 0 0 hsl(56, 100%, 50%);
  }
  74% {
    margin-left: 6px;
    text-shadow: 18px 0 0 hsl(150.12, 100%, 50%);
  }
  75% {
    margin-left: 2px;
    text-shadow: -34px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  76% {
    margin-left: -1px;
    text-shadow: -18px 0 0 hsl(200, 100%, 50%);
  }
  77% {
    margin-left: 2px;
    text-shadow: -33px 0 0 hsl(200, 100%, 50%);
  }
  78% {
    margin-left: -3px;
    text-shadow: 14px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  79% {
    margin-left: 2px;
    text-shadow: -30px 0 0 hsl(56, 100%, 50%);
  }
  80% {
    margin-left: 2px;
    text-shadow: 0px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  81% {
    margin-left: -2px;
    text-shadow: 0px 0 0 hsl(56, 100%, 50%);
  }
  82% {
    margin-left: -2px;
    text-shadow: -28px 0 0 hsl(200, 100%, 50%);
  }
  83% {
    margin-left: -1px;
    text-shadow: -29px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  84% {
    margin-left: -2px;
    text-shadow: 19px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  85% {
    margin-left: 5px;
    text-shadow: -8px 0 0 hsl(56, 100%, 50%);
  }
  86% {
    margin-left: 5px;
    text-shadow: 5px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  87% {
    margin-left: -1px;
    text-shadow: 23px 0 0 hsl(200, 100%, 50%);
  }
  88% {
    margin-left: 4px;
    text-shadow: 18px 0 0 hsl(150.12, 100%, 50%);
  }
  89% {
    margin-left: -5px;
    text-shadow: 18px 0 0 hsl(150.12, 100%, 50%);
  }
  90% {
    margin-left: 5px;
    text-shadow: 28px 0 0 hsl(200, 100%, 50%);
  }
  91% {
    margin-left: 0px;
    text-shadow: 1px 0 0 hsl(200, 100%, 50%);
  }
  92% {
    margin-left: 5px;
    text-shadow: -7px 0 0 hsl(56, 100%, 50%);
  }
  93% {
    margin-left: 2px;
    text-shadow: 16px 0 0 hsl(200, 100%, 50%);
  }
  94% {
    margin-left: 4px;
    text-shadow: -24px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  95% {
    margin-left: -2px;
    text-shadow: -5px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  96% {
    margin-left: -4px;
    text-shadow: 22px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  97% {
    margin-left: 3px;
    text-shadow: -29px 0 0 hsl(323.72, 81.13%, 41.57%);
  }
  98% {
    margin-left: -1px;
    text-shadow: -29px 0 0 hsl(150.12, 100%, 50%);
  }
  99% {
    margin-left: -5px;
    text-shadow: 7px 0 0 hsl(150.12, 100%, 50%);
  }
  100% {
    margin-left: 3px;
    text-shadow: 12px 0 0 hsl(150.12, 100%, 50%);
  }
}

.search-form,
.login-form,
.new-account-form {
  width: 50%;
}
.search-form__button, .login-form__button, .new-account-form__button, .search-form__input, .login-form__input, .new-account-form__input {
  border-color: hsla(274, 100%, 50%, 0.8);
}
.search-form__button--focused, .login-form__button--focused, .new-account-form__button--focused, .search-form__input--focused, .login-form__input--focused, .new-account-form__input--focused, .search-form__button--active, .login-form__button--active, .new-account-form__button--active, .search-form__input--active, .login-form__input--active, .new-account-form__input--active {
  border-color: hsla(348, 100%, 50%, 0.95);
}

@keyframes accelerate-rotation {
  0% {
    transform: rotate(-0.01deg);
  }
  1% {
    transform: rotate(0.0261deg);
  }
  2% {
    transform: rotate(0.1342deg);
  }
  3% {
    transform: rotate(0.3143deg);
  }
  4% {
    transform: rotate(0.5664deg);
  }
  5% {
    transform: rotate(0.8905deg);
  }
  6% {
    transform: rotate(1.2866deg);
  }
  7% {
    transform: rotate(1.7547deg);
  }
  8% {
    transform: rotate(2.2948deg);
  }
  9% {
    transform: rotate(2.9069deg);
  }
  10% {
    transform: rotate(3.591deg);
  }
  11% {
    transform: rotate(4.3471deg);
  }
  12% {
    transform: rotate(5.1752deg);
  }
  13% {
    transform: rotate(6.0753deg);
  }
  14% {
    transform: rotate(7.0474deg);
  }
  15% {
    transform: rotate(8.0915deg);
  }
  16% {
    transform: rotate(9.2076deg);
  }
  17% {
    transform: rotate(10.3957deg);
  }
  18% {
    transform: rotate(11.6558deg);
  }
  19% {
    transform: rotate(12.9879deg);
  }
  20% {
    transform: rotate(14.392deg);
  }
  21% {
    transform: rotate(15.8681deg);
  }
  22% {
    transform: rotate(17.4162deg);
  }
  23% {
    transform: rotate(19.0363deg);
  }
  24% {
    transform: rotate(20.7284deg);
  }
  25% {
    transform: rotate(22.4925deg);
  }
  26% {
    transform: rotate(24.3286deg);
  }
  27% {
    transform: rotate(26.2367deg);
  }
  28% {
    transform: rotate(28.2168deg);
  }
  29% {
    transform: rotate(30.2689deg);
  }
  30% {
    transform: rotate(32.393deg);
  }
  31% {
    transform: rotate(34.5891deg);
  }
  32% {
    transform: rotate(36.8572deg);
  }
  33% {
    transform: rotate(39.1973deg);
  }
  34% {
    transform: rotate(41.6094deg);
  }
  35% {
    transform: rotate(44.0935deg);
  }
  36% {
    transform: rotate(46.6496deg);
  }
  37% {
    transform: rotate(49.2777deg);
  }
  38% {
    transform: rotate(51.9778deg);
  }
  39% {
    transform: rotate(54.7499deg);
  }
  40% {
    transform: rotate(57.594deg);
  }
  41% {
    transform: rotate(60.5101deg);
  }
  42% {
    transform: rotate(63.4982deg);
  }
  43% {
    transform: rotate(66.5583deg);
  }
  44% {
    transform: rotate(69.6904deg);
  }
  45% {
    transform: rotate(72.8945deg);
  }
  46% {
    transform: rotate(76.1706deg);
  }
  47% {
    transform: rotate(79.5187deg);
  }
  48% {
    transform: rotate(82.9388deg);
  }
  49% {
    transform: rotate(86.4309deg);
  }
  50% {
    transform: rotate(89.995deg);
  }
  51% {
    transform: rotate(93.6311deg);
  }
  52% {
    transform: rotate(97.3392deg);
  }
  53% {
    transform: rotate(101.1193deg);
  }
  54% {
    transform: rotate(104.9714deg);
  }
  55% {
    transform: rotate(108.8955deg);
  }
  56% {
    transform: rotate(112.8916deg);
  }
  57% {
    transform: rotate(116.9597deg);
  }
  58% {
    transform: rotate(121.0998deg);
  }
  59% {
    transform: rotate(125.3119deg);
  }
  60% {
    transform: rotate(129.596deg);
  }
  61% {
    transform: rotate(133.9521deg);
  }
  62% {
    transform: rotate(138.3802deg);
  }
  63% {
    transform: rotate(142.8803deg);
  }
  64% {
    transform: rotate(147.4524deg);
  }
  65% {
    transform: rotate(152.0965deg);
  }
  66% {
    transform: rotate(156.8126deg);
  }
  67% {
    transform: rotate(161.6007deg);
  }
  68% {
    transform: rotate(166.4608deg);
  }
  69% {
    transform: rotate(171.3929deg);
  }
  70% {
    transform: rotate(176.397deg);
  }
  71% {
    transform: rotate(181.4731deg);
  }
  72% {
    transform: rotate(186.6212deg);
  }
  73% {
    transform: rotate(191.8413deg);
  }
  74% {
    transform: rotate(197.1334deg);
  }
  75% {
    transform: rotate(202.4975deg);
  }
  76% {
    transform: rotate(207.9336deg);
  }
  77% {
    transform: rotate(213.4417deg);
  }
  78% {
    transform: rotate(219.0218deg);
  }
  79% {
    transform: rotate(224.6739deg);
  }
  80% {
    transform: rotate(230.398deg);
  }
  81% {
    transform: rotate(236.1941deg);
  }
  82% {
    transform: rotate(242.0622deg);
  }
  83% {
    transform: rotate(248.0023deg);
  }
  84% {
    transform: rotate(254.0144deg);
  }
  85% {
    transform: rotate(260.0985deg);
  }
  86% {
    transform: rotate(266.2546deg);
  }
  87% {
    transform: rotate(272.4827deg);
  }
  88% {
    transform: rotate(278.7828deg);
  }
  89% {
    transform: rotate(285.1549deg);
  }
  90% {
    transform: rotate(291.599deg);
  }
  91% {
    transform: rotate(298.1151deg);
  }
  92% {
    transform: rotate(304.7032deg);
  }
  93% {
    transform: rotate(311.3633deg);
  }
  94% {
    transform: rotate(318.0954deg);
  }
  95% {
    transform: rotate(324.8995deg);
  }
  96% {
    transform: rotate(331.7756deg);
  }
  97% {
    transform: rotate(338.7237deg);
  }
  98% {
    transform: rotate(345.7438deg);
  }
  99% {
    transform: rotate(352.8359deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes clip-wave {
  0% {
    clip-path: circle(50% at 75%);
  }
  1% {
    clip-path: circle(51.5697629882% at 74.9506682107%);
  }
  2% {
    clip-path: circle(53.1333308391% at 74.8028675329%);
  }
  3% {
    clip-path: circle(54.6845328646% at 74.5571812682%);
  }
  4% {
    clip-path: circle(56.2172471791% at 74.2145790282%);
  }
  5% {
    clip-path: circle(57.7254248594% at 73.7764129074%);
  }
  6% {
    clip-path: circle(59.2031138171% at 73.2444121472%);
  }
  7% {
    clip-path: circle(60.6444822891% at 72.6206763117%);
  }
  8% {
    clip-path: circle(62.0438418525% at 71.9076670011%);
  }
  9% {
    clip-path: circle(63.3956698745% at 71.1081981376%);
  }
  10% {
    clip-path: circle(64.6946313073% at 70.2254248594%);
  }
  11% {
    clip-path: circle(65.9355997437% at 69.2628310694%);
  }
  12% {
    clip-path: circle(67.1136776482% at 68.2242156855%);
  }
  13% {
    clip-path: circle(68.2242156855% at 67.1136776482%);
  }
  14% {
    clip-path: circle(69.2628310694% at 65.9355997437%);
  }
  15% {
    clip-path: circle(70.2254248594% at 64.6946313073%);
  }
  16% {
    clip-path: circle(71.1081981376% at 63.3956698745%);
  }
  17% {
    clip-path: circle(71.9076670011% at 62.0438418525%);
  }
  18% {
    clip-path: circle(72.6206763117% at 60.6444822891%);
  }
  19% {
    clip-path: circle(73.2444121472% at 59.2031138171%);
  }
  20% {
    clip-path: circle(73.7764129074% at 57.7254248594%);
  }
  21% {
    clip-path: circle(74.2145790282% at 56.2172471791%);
  }
  22% {
    clip-path: circle(74.5571812682% at 54.6845328646%);
  }
  23% {
    clip-path: circle(74.8028675329% at 53.1333308391%);
  }
  24% {
    clip-path: circle(74.9506682107% at 51.5697629882%);
  }
  25% {
    clip-path: circle(75% at 50%);
  }
  26% {
    clip-path: circle(74.9506682107% at 48.4302370118%);
  }
  27% {
    clip-path: circle(74.8028675329% at 46.8666691609%);
  }
  28% {
    clip-path: circle(74.5571812682% at 45.3154671354%);
  }
  29% {
    clip-path: circle(74.2145790282% at 43.7827528209%);
  }
  30% {
    clip-path: circle(73.7764129074% at 42.2745751406%);
  }
  31% {
    clip-path: circle(73.2444121472% at 40.7968861829%);
  }
  32% {
    clip-path: circle(72.6206763117% at 39.3555177109%);
  }
  33% {
    clip-path: circle(71.9076670011% at 37.9561581475%);
  }
  34% {
    clip-path: circle(71.1081981376% at 36.6043301255%);
  }
  35% {
    clip-path: circle(70.2254248594% at 35.3053686927%);
  }
  36% {
    clip-path: circle(69.2628310694% at 34.0644002563%);
  }
  37% {
    clip-path: circle(68.2242156855% at 32.8863223518%);
  }
  38% {
    clip-path: circle(67.1136776482% at 31.7757843145%);
  }
  39% {
    clip-path: circle(65.9355997437% at 30.7371689306%);
  }
  40% {
    clip-path: circle(64.6946313073% at 29.7745751406%);
  }
  41% {
    clip-path: circle(63.3956698745% at 28.8918018624%);
  }
  42% {
    clip-path: circle(62.0438418525% at 28.0923329989%);
  }
  43% {
    clip-path: circle(60.6444822891% at 27.3793236883%);
  }
  44% {
    clip-path: circle(59.2031138171% at 26.7555878528%);
  }
  45% {
    clip-path: circle(57.7254248594% at 26.2235870926%);
  }
  46% {
    clip-path: circle(56.2172471791% at 25.7854209718%);
  }
  47% {
    clip-path: circle(54.6845328646% at 25.4428187318%);
  }
  48% {
    clip-path: circle(53.1333308391% at 25.1971324671%);
  }
  49% {
    clip-path: circle(51.5697629882% at 25.0493317893%);
  }
  50% {
    clip-path: circle(50% at 25%);
  }
  51% {
    clip-path: circle(48.4302370118% at 25.0493317893%);
  }
  52% {
    clip-path: circle(46.8666691609% at 25.1971324671%);
  }
  53% {
    clip-path: circle(45.3154671354% at 25.4428187318%);
  }
  54% {
    clip-path: circle(43.7827528209% at 25.7854209718%);
  }
  55% {
    clip-path: circle(42.2745751406% at 26.2235870926%);
  }
  56% {
    clip-path: circle(40.7968861829% at 26.7555878528%);
  }
  57% {
    clip-path: circle(39.3555177109% at 27.3793236883%);
  }
  58% {
    clip-path: circle(37.9561581475% at 28.0923329989%);
  }
  59% {
    clip-path: circle(36.6043301255% at 28.8918018624%);
  }
  60% {
    clip-path: circle(35.3053686927% at 29.7745751406%);
  }
  61% {
    clip-path: circle(34.0644002563% at 30.7371689306%);
  }
  62% {
    clip-path: circle(32.8863223518% at 31.7757843145%);
  }
  63% {
    clip-path: circle(31.7757843145% at 32.8863223518%);
  }
  64% {
    clip-path: circle(30.7371689306% at 34.0644002563%);
  }
  65% {
    clip-path: circle(29.7745751406% at 35.3053686927%);
  }
  66% {
    clip-path: circle(28.8918018624% at 36.6043301255%);
  }
  67% {
    clip-path: circle(28.0923329989% at 37.9561581475%);
  }
  68% {
    clip-path: circle(27.3793236883% at 39.3555177109%);
  }
  69% {
    clip-path: circle(26.7555878528% at 40.7968861829%);
  }
  70% {
    clip-path: circle(26.2235870926% at 42.2745751406%);
  }
  71% {
    clip-path: circle(25.7854209718% at 43.7827528209%);
  }
  72% {
    clip-path: circle(25.4428187318% at 45.3154671354%);
  }
  73% {
    clip-path: circle(25.1971324671% at 46.8666691609%);
  }
  74% {
    clip-path: circle(25.0493317893% at 48.4302370118%);
  }
  75% {
    clip-path: circle(25% at 50%);
  }
  76% {
    clip-path: circle(25.0493317893% at 51.5697629882%);
  }
  77% {
    clip-path: circle(25.1971324671% at 53.1333308391%);
  }
  78% {
    clip-path: circle(25.4428187318% at 54.6845328646%);
  }
  79% {
    clip-path: circle(25.7854209718% at 56.2172471791%);
  }
  80% {
    clip-path: circle(26.2235870926% at 57.7254248594%);
  }
  81% {
    clip-path: circle(26.7555878528% at 59.2031138171%);
  }
  82% {
    clip-path: circle(27.3793236883% at 60.6444822891%);
  }
  83% {
    clip-path: circle(28.0923329989% at 62.0438418525%);
  }
  84% {
    clip-path: circle(28.8918018624% at 63.3956698745%);
  }
  85% {
    clip-path: circle(29.7745751406% at 64.6946313073%);
  }
  86% {
    clip-path: circle(30.7371689306% at 65.9355997437%);
  }
  87% {
    clip-path: circle(31.7757843145% at 67.1136776482%);
  }
  88% {
    clip-path: circle(32.8863223518% at 68.2242156855%);
  }
  89% {
    clip-path: circle(34.0644002563% at 69.2628310694%);
  }
  90% {
    clip-path: circle(35.3053686927% at 70.2254248594%);
  }
  91% {
    clip-path: circle(36.6043301255% at 71.1081981376%);
  }
  92% {
    clip-path: circle(37.9561581475% at 71.9076670011%);
  }
  93% {
    clip-path: circle(39.3555177109% at 72.6206763117%);
  }
  94% {
    clip-path: circle(40.7968861829% at 73.2444121472%);
  }
  95% {
    clip-path: circle(42.2745751406% at 73.7764129074%);
  }
  96% {
    clip-path: circle(43.7827528209% at 74.2145790282%);
  }
  97% {
    clip-path: circle(45.3154671354% at 74.5571812682%);
  }
  98% {
    clip-path: circle(46.8666691609% at 74.8028675329%);
  }
  99% {
    clip-path: circle(48.4302370118% at 74.9506682107%);
  }
  100% {
    clip-path: circle(50% at 75%);
  }
}
.test {
  content: "." 1 "3" "a" "c" "q" "z";
}

/*# sourceMappingURL=main.css.map */