:root {
  --hue: 310;
  --hue-adjust: 135;
  --hue-2: calc(var(--hue) + var(--hue-adjust));
  --page-background: oklch(10% 0.0666 var(--hue));
}

button {
  --button-background: oklch(20% 0.0666 var(--hue));
  --text-base: oklch(45% 0.175 var(--hue));
  --text-hover: oklch(95% 0.145 calc(var(--hue) + 30));
  --shadow-start: oklch(95% 0.145 var(--hue-2));
  --shadow-end: oklch(60% 0.29 var(--hue));
  --shadow-inner: 60% 0.29 var(--hue);

  all: unset;
  color: var(--text-base);
  font: 700 1.125rem/1.2 Raleway, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.85em;
  max-width: 100%;
  width: 12em;
  background-color: var(--button-background);
  background-clip: padding-box;
  border: 5px solid var(--text-base);
  border-radius: 2em;
  cursor: pointer;
  position: relative;
  transition: 0.25s ease-out;

  &::before,
  &::after {
      content: "";
      border-radius: inherit;
      transition: inherit;
      position: absolute;
      inset: 0;
      pointer-events: none;
  }

  &::before {
      inset: -0.2em;
      z-index: -1;
      background: linear-gradient(var(--shadow-start), var(--shadow-end));
      filter: blur(1.2em) saturate(1.2);
      transform-origin: bottom;
      transform: scaleY(0.5);
      opacity: 0;
  }

  &::after {
      box-shadow: inset 0 0 0 1px #fff,
                  0 0 0 4px hsla(0deg, 0%, 100%, 0.5),
                  1px 1px 0 4px #fff;
      mix-blend-mode: overlay;
      opacity: 0;
  }

  &:hover,
  &:focus {
      color: var(--text-hover);
      border-color: transparent;
      box-shadow: inset 0 1.4em 0 oklch(var(--shadow-inner) / 0.1),
                  inset 0 0 1.4em oklch(var(--shadow-inner) / 0.32),
                  0 1px 1px oklch(var(--shadow-inner) / 0.32);

      &::before,
      &::after {
          transform: none;
          opacity: 1;
      }
  }
}

body {
  background: var(--page-background);
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-content: center;
  align-items: center;
}
