:root {
  --lch-blue: 0.7178 0.1604 242.66;
  --lch-green: 0.7979 0.2566 144.26;
  --lch-grey: 0.1957 0 0;
  --lch-lime: 0.8543 0.2092 127.65;
  --lch-orange: 0.7047 0.1954 42.49;
  --lch-pink: 0.5185 0.1994 9.01;
  --lch-yellow: 0.9297 0.188853 103.2821;

  --color-bg: oklch(var(--lch-grey));
  --color-blue: oklch(var(--lch-blue));
  --color-green: oklch(var(--lch-green));
  --color-lime: oklch(var(--lch-lime));
  --color-orange: oklch(var(--lch-orange));
  --color-pink: oklch(var(--lch-pink));
  --color-yellow: oklch(var(--lch-yellow));
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  color: var(--color-lime);

  font-size: 1.25rem;
  font-family: "Nunito", sans-serif;

  background: var(--color-bg);

  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  margin: 0;

  cursor: url("../images/CursorSen.png"), default;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  width: 90vw;
  max-width: 600px;

  padding: 1.25rem;

  display: flex;
  flex-direction: column;
  align-items: center;
}

a {
  color: var(--color-pink);
  background-color: transparent;
  text-decoration: none;

  align-self: start;
}

img {
  border-style: none;
  max-width: 100%;
  height: auto;
}

.logo {
  width: 42rem;
}

p {
  margin: 3rem 0 1.5rem;
}

.wheel {
  width: 10rem;
  height: 10rem;
  transform: translate(-50%, -50%);
  translate: -50% -50%;
}

div {
  --c: 12rem;
  --fz: 5;
  --h: 10;
  aspect-ratio: 1;
  border-radius: 50%;
  inline-size: 20rem;
  position: relative;
  margin: 5rem 0;
}

.wheel,
strong {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  position: absolute;
  /* translate: -50% -50%; */
  white-space: nowrap;
}

strong {
  inline-size: var(--c);
  padding-inline-start: var(--c);
  transform: translate(-50%, -50%) rotate(calc(var(--d) * 1deg * (360 / var(--ln, 1))));
  /* rotate: calc(var(--d) * 1deg * (360 / var(--ln, 1))); */
}

strong:nth-of-type(4n+1) a {
  font-size: calc(1em + (var(--fz) * 0.050em));
  color: var(--color-blue);
}

strong:nth-of-type(2n+2) a {
  font-size: calc(1em + (var(--fz) * 0.075em));
  color: var(--color-green);
}

strong:nth-of-type(4n+3) a {
  font-size: calc(1em + (var(--fz) * 0.095em));
  color: var(--color-orange);
}

strong:nth-of-type(4) a {
  font-size: calc(1em + (var(--fz) * 0.075em));
  color: var(--color-yellow);
}

footer {
  overflow: hidden;
}

.guy {
  width: 10rem;

  margin-bottom: -8.5rem;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation-name: rotate;
  transform-origin: center;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@media (max-width: 560px) {
  iframe {
    width: 208px;
  }
}