:root {
  --gray-950: oklch(13% 0.028 261.692);
  --blue-100: oklch(93.2% 0.032 255.585);
  --orange-500: oklch(70.5% 0.213 47.604);
  --orange-400: oklch(75% 0.183 55.934);
  --border-radius: 0.375rem;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: var(--gray-950);
  padding: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
}

pattern-card {
  margin: 0 auto;
  height: 20rem;
  width: 20rem;
  padding: 1rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  background-color: var(--blue-100);
  border-radius: var(--border-radius);

  key-and-pattern {
    display: grid;
    row-gap: 1rem;

    current-key {
      font-size: 1.5rem;
    }

    current-pattern {
      font-size: 1.125rem;
    }

    pill {
      display: block;
      border-radius: 100%;
      height: 1rem;
      width: 1rem;
      transition: all 150ms;
      background-color: transparent;

      &.active {
        background-color: forestgreen;
      }
    }

    key-and-pill {
      display: flex;
      gap: 4rem;
      align-items: center;
      justify-content: space-between;
    }
  }

  button#next {
    border: none;
    font-size: 1.125rem;
    background-color: var(--orange-500);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);

    &:hover {
      background-color: var(--orange-400);
    }
  }
}