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

@property --grid-color {
  syntax: '<color>';
  inherits: false;
  initial-value: hsl(0, 72%, 85%);
}

:root {
  --bg: hsl(0, 60%, 92%);
  --svg-fill: hsl(30, 70%, 55%);
  --label: hsl(0, 40%, 30%);
  --transition: 900ms cubic-bezier(0.4, 0, 0.2, 1);
}


@font-face {
  font-family: 'PixelSerif';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/PixelSerif_16px_v02.woff2') format('woff2'),
    url('/fonts/PixelSerif_16px_v02.woff') format('woff');
}

body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
  transition: background-color var(--transition), --grid-color var(--transition);
  font-family: 'PixelSerif', monospace;
  padding: 18px;
}

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--bg) 14%, white);
  max-height: calc(100vh - 36px);
  max-width: calc(100vw - 36px);
  border-top: 2px solid rgba(0, 0, 0, .1);
  border-left: 2px solid rgba(0, 0, 0, .1);
  border-bottom: 2px solid rgba(0, 0, 0, .1);
  border-right: 2px solid rgba(0, 0, 0, .1);
}

.stage:before {
  content: "";
  min-height: calc(100vh - 36px);
  min-width: 2px;
  position: absolute;
  top: 0px;
  right: 0px;
}



@keyframes blink {

  0%,
  98%,
  100% {
    transform: scaleY(1);
  }

  99% {
    transform: scaleY(0);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-24px);
  }
}

@keyframes swing {

  0%,
  100% {
    rotate: -2.5deg;
  }

  50% {
    rotate: 2.5deg;
  }
}

@keyframes movearound {
  0% {
    transform: translateX(-10%);
  }

  50% {
    transform: translateX(20%);
  }

  100% {
    transform: translateX(-10%);
  }
}

#shape {
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), rotate 600ms cubic-bezier(0.4, 0, 0.2, 1), translateX 600ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

#shape.swing {
  animation: swing 3.5s ease-in-out infinite;
  transform-origin: center bottom;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), rotate 600ms cubic-bezier(0.4, 0, 0.2, 1), translateX 600ms cubic-bezier(0.4, 0, 0.2, 1);

}

.flip-x {
  transform: scaleX(-1);
}

.shape-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shape-wrap.floating {
  animation: float 6.5s ease-in-out infinite;
}

.shape-wrap svg {
  width: 100%;
  height: 60%;
}

.shape-wrap svg #contents {
  animation: movearound 18s ease-in-out infinite;
}

#blob {
  filter: drop-shadow(1px 0 0 var(--blob-shadow-color, transparent));
  transition: fill 1400ms cubic-bezier(0.45, 0, 0.55, 1),
    filter 1400ms cubic-bezier(0.45, 0, 0.55, 1);
  cursor: pointer;
}

#blob.rate-limited {
  cursor: not-allowed;
}

#blob-top-fill,
#blob-bottom-fill {
  transition: fill 1400ms cubic-bezier(0.45, 0, 0.55, 1);
}

.grid-square {
  fill: white;
  opacity: 1;
  transition: opacity 350ms ease;
}

#blink-group .grid-square {
  animation: blink 5s infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.brow-square {
  opacity: 0;
  transition: opacity 350ms ease;
}

.wrap-name {
  position: absolute;
  bottom: 20px;
  right: 0px;
  background: color-mix(in srgb, var(--bg) 14%, white);
  box-shadow: rgba(0, 0, 0, 0.1) -2px 0px 0px 0px;
  opacity: 1;
  transition: box-shadow 350ms ease, opacity 350ms ease, background-color 900ms cubic-bezier(0.4, 0, 0.2, 1);
  width: fit-content;
  height: auto;
  padding: 6px 12px;
}

.wrap-name::before {
  content: "";
  height: 10px;
  background: color-mix(in srgb, var(--bg) 14%, white);
  box-shadow: rgba(0, 0, 0, 0.1) -2px 0px 0px 0px;
  width: 90%;
  top: -10px;
  right: 0;
  position: absolute;
  transition: background-color 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wrap-name::after {
  content: "";
  height: 30px;
  background: color-mix(in srgb, var(--bg) 14%, white);
  box-shadow: rgba(0, 0, 0, 0.1) -2px 0px 0px 0px;
  width: 10px;
  bottom: 10px;
  left: -10px;
  position: absolute;
  transition: background-color 900ms cubic-bezier(0.4, 0, 0.2, 1);
}


#figure-name {
  color: var(--blob-color);
  font-family: 'PixelSerif', monospace;
  font-size: 44px;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.chill {
  font-family: 'PixelSerif', monospace;
  font-size: 44px;
  color: #f71772;
  position: absolute;
  top: -60px;
  right: 30px;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
  transition: top 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.chill.visible {
  top: 30px;
}