*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --theme: 'default';

  font-size: 62.5%;
  --colorMain: #252525;
  --colorBackground: #DADADA;
  --font-default: "Commissioner", sans-serif;
  --the-magic-cubic: cubic-bezier(.5, 0, 0, 1);
}

[data-theme='pink'] {
  --colorMain: #FE3A3F;
  --colorBackground: #FEA4BC;
}

[data-theme='green'] {
  --colorMain: #F6D200;
  --colorBackground: #036A55;
}

[data-theme='blue'] {
  --colorMain: #C3B7F0;
  --colorBackground: #1A66CE;
}

[data-theme='purple'] {
  --colorMain: #036A55;
  --colorBackground: #C3B7F0;
}

html {
  height: -webkit-fill-available;
}

body {
  cursor: none;
  background-color: var(--colorBackground);
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  transition: background-color .2s var(--the-magic-cubic);

  font-family: var(--font-default);
}

header {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

main {
  height: 100svh;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr min(calc(100% - 3.2rem), 56rem) 1fr;
  grid-template-areas:
    ". .       ."
    ". content ."
    ". .       .";
}

/* VARIABLE FONT INFO
// <weight>: Use a value from 100 to 900
// <slant>: Use a value from -12 to 0
// <flare>: Use a value from 0 to 100
// <volume>: Use a value from 0 to 100
*/
h1 {
  font-family: var(--font-default);
  font-optical-sizing: auto;
  font-weight: 750;
  font-style: normal;
  font-size: 9.6rem;
  letter-spacing: -.05em;
  font-variation-settings:
          "slnt" -6,
          "FLAR" 35,
          "VOLM" 20;
}

p,
a {
  margin: 0;
  font-family: var(--font-default);
  font-optical-sizing: auto;
  font-weight: 666;
  font-style: normal;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-variation-settings:
          "slnt" -6,
          "FLAR" 35,
          "VOLM" 20;
}

svg {
  display: block;
  margin: 0 auto;
  grid-area: content;
  max-width: 100%;
  height: auto;

  transition: opacity .1s var(--the-magic-cubic), transform .4s cubic-bezier(.47,1.64,.41,.8);
}

svg:hover {
  transform: rotateZ(-3deg);
}

svg:not(.arrow) path {
  transition: fill .2s var(--the-magic-cubic);
  fill: var(--colorMain);
}

.small {
  /* something */
  opacity: 1;
  transform: none;
}

.medium {
  opacity: 0;
  transform: scale(.75);
  pointer-events: none;
}

.large {
  opacity: 0;
  transform: scale(.75);
  pointer-events: none;
}

#stalker {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;

  background-color: #fff;
  width: 2rem;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  mix-blend-mode: difference;
  cursor: pointer;
  transition: width .6s var(--the-magic-cubic);
}

#messages {
  position: absolute;
  inset: auto 1rem 1rem auto;
  max-width: calc(100% - 2rem);
  transition: transform .6s var(--the-magic-cubic);
}

#messages:hover svg {
  transform: translate(.4rem, .1rem);
}

#messages a {
  text-decoration: none;
  cursor: none;
  display: flex;
  align-items: center;
  gap: .5em;

  background-color: var(--colorMain);
  color: var(--colorBackground);
  border-radius: .8rem;
  padding: .4rem 1.6rem .6rem;
  opacity: 0;
  transform: translateX(2rem) skew(-10deg);
  animation: messageIn 1s var(--the-magic-cubic) forwards;
}

#messages a svg {
  display: block;
  width: 1.8rem;
  height: auto;
  flex: 0 0 auto;
  transform: translateY(.1rem);
  transition: transform .6s var(--the-magic-cubic);
}

svg:hover ~ #stalker,
#messages:hover ~ #stalker {
  width: 5rem;
}

@media screen and (min-width: 64em) {
  .small {
    opacity: 0;
    transform: scale(.75);
    pointer-events: none;
  }

  .medium {
    opacity: 1;
    transform: none;
    pointer-events: initial;
  }
}

@media screen and (min-width: 90em) {
  .medium {
    opacity: 0;
    transform: scale(.75);
    pointer-events: none;
  }

  .large {
    opacity: 1;
    transform: none;
    pointer-events: initial;
  }
}

@media (hover: none) {
  #stalker {
    display: none;
  }
}

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateX(2rem) skew(-10deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}