a {
  --elevate: 0.25em;
  --border-width: 2px;
  --border-opacity: 0.2;
  position: relative;
  transform: translate3d(0, 0, 0);
  margin: 0;
  padding-block: 0.6em 0.8em;
  padding-inline: 1.25em;
  font: inherit;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  color: white;
  line-height: 1;
  cursor: pointer;
  border: 0;
  border-radius: 10em;
  background: transparent;
  transition: transform 150ms ease-in-out;
}
a:before, a:after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  transform: translate3d(0, 0, 0);
  border-radius: inherit;
  transition: inherit;
}
a:before {
  z-index: -1;
  border: var(--border-width) solid rgba(173, 216, 230, var(--border-opacity));
  background: mediumblue;
}
a:after {
  z-index: -2;
  background: lightblue;
  filter: blur(var(--elevate));
}
a:hover {
  --border-opacity: 0.4;
  transform: translate3d(0, calc(var(--elevate) * -1), 0);
}
a:hover:after {
  transform: translate3d(0, var(--elevate), 0);
}
a:active {
  transform: translate3d(0, 0, 0);
}
a:active:before {
  background: darkblue;
}
a:active:after {
  transform: translate3d(0, 0, 0);
}
a:focus-visible {
  outline: var(--border-width) dashed darkblue;
  outline-offset: var(--border-width);
}

:root {
  font-size: 150%;
  font-family: system-ui;
  line-height: 1.45;
}

*,
*:before,
*:after {
  font-feature-settings: "kern";
  -webkit-font-kerning: normal;
          font-kerning: normal;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-font-smoothing: antialiased !important;
  box-sizing: border-box;
}

main {
  display: grid;
  place-items: center;
  block-size: 100vh;
  inline-size: 100vw;
}