@font-face {
  font-family: "rubik";
  src: url("./rubik.ttf");
}

* {
  scrollbar-gutter: stable;
  box-sizing: border-box;
  --background: #0a0a0a;
  --on-background: #e5e5e5;
  --on-background-variant: #d4d4d4;
  --outline: #404040;
  --error: #fca5a5;
  --on-error: #7f1d1d;
  --done: #86efac;
  --on-done: #14532d;
  --surface: #171717;
  --surface-variant: #262626;
  --current-shadow: color-mix(in srgb, currentColor 10%, transparent);
}

::-webkit-scrollbar {
  width: 24px;
}

::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background-color: var(--outline);
  background-clip: padding-box;
  border: 8px solid rgba(0, 0, 0, 0);
}

:focus {
  outline: color-mix(in srgb, var(#fff, #fff) 5%, transparent);
  outline-width: 2px;
  outline-offset: 2px;
}

body {
  margin: 0;
  overflow: auto;
  color-scheme: dark;
  font-family: "rubik", Georgia, "Times New Roman", Times, serif;
  background-color: var(--background);
  color: var(--on-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

button {
  cursor: pointer;
  border-radius: 6px;
  border: 0;
  font-size: 18px;
}

header {
  text-align: center;
}

header h1 {
  margin-top: 1.5rem;
  margin-block-end: 6px;
  font-size: 35px;
  color: white;
}

header p {
  margin: 0;
  color: var(--on-background-variant);
}

main {
  display: flex;
  gap: 64px;
}

canvas {
  cursor: pointer;
}

textarea {
  font-family: inherit;
  outline: 0;
  resize: none;
  width: 350px;
  height: 100%;
  font-size: 1.125rem;
  line-height: 1.75rem;
  padding: 8px 12px;
  border: 1px solid var(--outline);
  border-radius: 4px;
  background-color: var(--surface);
}

textarea::placeholder {
  color: var(--outline);
}

textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
  -webkit-background-clip: text;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px var(--surface);
  -webkit-text-fill-color: var(--on-surface);
}

label span {
  display: block;
  font-size: 14px;
  margin-top: 6px;
  text-align: right;
  color: var(--on-background-variant);
}

kbd {
  border-radius: 6px;
  font-size: 12px;
  padding: 2px 8px;
  background-color: var(--surface-variant);
}

footer {
  color: var(--on-background-variant);
  margin-top: 4rem;
  margin-bottom: 1rem;
}

dialog {
  position: relative;
  padding: 2rem 4rem;
  border-radius: 6px;
  background-color: var(--surface);
  border: var(--outline) 1px solid;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

dialog:-internal-dialog-in-top-layer::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

dialog header {
  margin-bottom: 3rem;
}

dialog #winning-text {
  background: linear-gradient(
    to right,
    #f87171,
    #fb923c,
    #fbbf24,
    #facc15,
    #4ade80,
    #34d399,
    #22d3ee,
    #60a5fa,
    #818cf8,
    #c084fc,
    #e879f9,
    #f472b6
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textAnimation 6s ease-in-out infinite;
  background-size: 400% 100%;
  margin-top: 12px;
  margin-bottom: 32px;
  font-size: 42px;
}

dialog p {
  outline: none;
  color: var(--on-background-variant);
}

dialog #probability {
  color: var(--done);
}

dialog button {
  margin: 0 4px;
  padding: 8px 32px;
}

dialog button:hover {
  filter: brightness(1.1);
}

dialog button#close {
  color: var(--on-done);
  background-color: var(--done);
}

dialog button#remove {
  color: var(--on-error);
  background-color: var(--error);
}

@keyframes textAnimation {
  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 0;
  }
}