@font-face {
  font-family: 'Noto Color Emoji';
  src: url(https://gitcdn.xyz/repo/googlefonts/noto-emoji/master/fonts/NotoColorEmoji.ttf);
}

/* base properties */

html {
  height: 100%;
  width: 100%;
}

body {
  background-color: black;
  min-height: 100%;
  padding: 20px;
  display: flex;
}

#message-container {
  position: relative;
  width: 90vw;
  height: 90vh;
  margin: auto;
}

#message, #messagebg {
  position: absolute;
  text-align: center;
  font-size: 3em;
  width: 100%;
  height: 100%;
}


/*-------------ANIMATIONS-------------*/

/* sliding color gradient behind text*/
.gradientmask {
  text-transform: uppercase;
  background: -webkit-repeating-linear-gradient(-225deg,
      #231557 0%,
      #44107a 29%,
      #ff1361 67%,
      #fff800 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #FFF;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientmask 2s linear infinite alternate;
  display: inline-block;
}

#messagebg.gradientmask {
  display: none;
}

@keyframes gradientmask {
  to {
    background-position: 200% center;
  }
}


/* properties for waterwave */
#message.waterwave {
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px #03a9f4;
}

#messagebg.waterwave {
  text-transform: uppercase;
  color: #03a9f4;
  animation: waterwave 4s ease-in-out infinite;
}


@keyframes waterwave {
  0%, 100% {
    clip-path: polygon(0% -45%,
        16% 44%,
        33% -50%,
        54% 60%,
        70% 61%,
        84% 59%,
        100% -52%,
        100% 100%,
        0% 100%);
  }

  50% {
    clip-path: polygon(0% 60%,
        15% 65%,
        34% 66%,
        51% 62%,
        67% 50%,
        84% 45%,
        100% 46%,
        100% 100%,
        0% 100%);
  }
}

/*-------FLIP TEXT -------*/
:root {
  --color-primary: #f6aca2;
  --color-secondary: #f49b90;
  --color-tertiary: #f28b7d;
  --color-quaternary: #f07a6a;
  --color-quinary: #ee6352;
}

#messagebg.jumping-shadows {
  display: none
}

#message.jumping-shadows {
  font-family: canada-type-gibson, sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  color: var(--color-primary);
  text-shadow: 3px 3px 0 var(--color-secondary),
    6px, 6px 0 var(--color-tertiary), 9px 9px 0 var(--color-quaternary), 12px 12px 0 var(--color-quinary);
  font-family: bungee, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(2rem + 5vw);
  text-align: center;
  animation: shadows 1.8s ease-in infinite, move 1.8s ease-in infinite;
  letter-spacing: 0.4rem;
}

@keyframes shadows {
  0% {
    text-shadow: none;
  }

  10% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }

  20% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }

  30% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary),
      9px 9px 0 var(--color-quaternary);
  }

  40% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary),
      9px 9px 0 var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }

  60% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary),
      9px 9px 0 var(--color-quaternary),
      12px 12px 0 var(--color-quinary);
  }

  70% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary),
      9px 9px 0 var(--color-quaternary);
  }

  80% {
    text-shadow: 3px 3px 0 var(--color-secondary),
      6px 6px 0 var(--color-tertiary);
  }

  90% {
    text-shadow: 3px 3px 0 var(--color-secondary);
  }

  100% {
    text-shadow: none;
  }
}

@keyframes move {
  0% {
    transform: translate(0px, 0px);
  }

  40% {
    transform: translate(-12px, -12px);
  }

  60% {
    transform: translate(-12px, -12px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}