@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
@import url(https://unpkg.com/open-props/open-props.min.css);
@import url(https://unpkg.com/open-props/normalize.min.css);

:root {
  --font-size: clamp(2.49rem, calc(2.03rem + 2.31vw), 3.82rem);
  --speed: 0.25s;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: 'Inter', sans-serif;
  background: var(--gray-12);
}

::-moz-selection {
  background: hsl(320 80% 50%);
}

::selection {
  background: hsl(320 80% 50%);
}

:is(ul, h1) {
  font-size: inherit;
  padding: 0;
  margin: 0;
  color: var(--gray-0);
}

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

a {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

svg {
  width: calc(var(--font-size) * 0.8);
  aspect-ratio: 1;
}

.info {
  display: grid;
  color: var(--gray-0);
  padding: var(--size-1);
  text-transform: uppercase;
  font-size: var(--font-size);
  line-height: 1;
  font-weight: bold;
}

.info a {
  color: var(--gray-0);
}

.info__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4);
}

.info__line > :is(span, a) {
  opacity: var(--opacity, 1);
  transition: opacity 0.2s;
}

a:focus-visible {
  outline: transparent;
}

.info:has(a:is(:hover, :focus))
.info__line > :is(a:not(:hover, :focus), span) {
  --opacity: 0.1;
}
a:is(:hover, :focus) {
  text-decoration: none;
  --active: 1;
}

:is(svg, .char) {
  transition: transform var(--speed) var(--ease-elastic-3);
  display: inline-block;
  transform:
    rotate(calc((var(--active, 0) * var(--r, 0)) * 1deg))
    translate(
      calc((var(--active, 0) * var(--x, 0)) * 1%),
      calc((var(--active, 0) * var(--y, 0)) * 1%)
    );
}