:root {
  --color-primary: hsla(220, 100%, 52%, 1);
  --color-contrast: white;
  --color-background: white;
  --border-radius: 0.5em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }

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

* {
  margin: 0; }

html,
body,
main {
  height: 100%;
  margin: 0; }

.demo__button,
.message__avatar {
  display: inline-flex;
  box-sizing: border-box;
  color: inherit;
  background-color: transparent;
  font-size: 1rem;
  font-weight: 400;
  font-family: inherit;
  line-height: 1.375;
  cursor: pointer;
  text-align: center;
  align-items: center;
  overflow: visible;
  text-transform: none;
  outline: 0;
  border: 1px solid transparent;
  padding: 0; }

@keyframes pointOneTwoLoadIn {
  0% {
    transform-origin: 23px 43px;
    transform: translate3d(5px, -4px, 0) scale(0) rotate(-1deg); }
  25% {
    transform: translate3d(5px, -2px, 0) scale(1.2, 1) rotate(-1deg); }
  59% {
    transform-origin: 23px 43px;
    transform: translate3d(1px, -2px, 0) scale(1.2, 1) rotate(-1deg); } }
@keyframes bubbleOneTwoLoadIn {
  0% {
    transform: scale(0); }
  10% {
    transform: scale(1.1, 1.1); }
  25% {
    transform: scale(0.8, 0.98); }
  59% {
    transform: scale(1, 0.85); } }
@keyframes smileForChat {
  0% {
    opacity: 1;
    stroke-miterlimit: 10;
    stroke-dasharray: 1111;
    stroke-dashoffset: 1111; }
  100% {
    stroke-dasharray: 20;
    stroke-dashoffset: 2;
    opacity: 1; } }
svg#theBub {
  transition: transform 0.25s cubic-bezier(0, 1, 0.32, 1.6) 0.25s, opacity 0.1s ease 0s;
  transform: scale(1) translate3d(0, 0, 1px);
  top: 0;
  left: 0;
  position: relative;
  width: 100%;
  height: 100%; }
  svg#theBub path {
    fill: var(--color-primary);
    transform-origin: center; }
  svg#theBub #bubble {
    position: relative;
    transform-origin: center center;
    transform: translate3d(0, 0, 1px);
    width: 100%;
    height: 100%; }
  svg#theBub .bubbleBlob {
    fill: var(--color-primary);
    position: absolute;
    transform-origin: center;
    transition: all 0.5s cubic-bezier(0.68, -1, 0.32, 4);
    transform: translate3d(0, 0, 1px);
    width: 100%;
    height: 100%; }
  svg#theBub .bubblePoint {
    fill: var(--color-primary);
    position: absolute;
    transform-origin: center center;
    transform: translate3d(2px, -1px, 1px) scale(1.2, 1.1) rotate(0deg);
    transition: all 0.5s cubic-bezier(0.68, -2, 0.32, 3);
    width: 100%;
    height: 100%; }
  svg#theBub .bubble,
  svg#theBub .smile {
    visibility: hidden; }
  svg#theBub #bubble {
    transition: 0.25s transform cubic-bezier(0.68, -1, 0.32, 2) 0.1s, 0.25s opacity ease 2s; }
  svg#theBub .guideShape {
    fill: none; }
  svg#theBub .bubLine {
    display: block;
    fill: none;
    stroke: var(--color-contrast);
    stroke-width: 2%;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10; }
  svg#theBub .smile {
    visibility: visible;
    transition: 0.1s all ease-in-out 0.125s, 0s visibility ease-in 0s; }
    svg#theBub .smile .bubLine {
      opacity: 0;
      stroke-dasharray: 111;
      stroke-dashoffset: 111;
      transition: 0.15s all ease 0.32s, 0.07s opacity ease-in 0s; }

.demo__button svg#theBub #bubble.loaded .bubbleBlob,
.message__avatar svg#theBub #bubble.loaded .bubbleBlob {
  animation-name: bubbleOneTwoLoadIn;
  animation-timing-function: ease;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 1s; }
.demo__button svg#theBub #bubble.loaded .bubblePoint,
.message__avatar svg#theBub #bubble.loaded .bubblePoint {
  animation-name: pointOneTwoLoadIn;
  animation-timing-function: ease;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 1s; }

.demo__button svg#theBub.chatSmile .smile,
.message__avatar svg#theBub.chatSmile .smile {
  transform: translate3d(0, 0.5px, 0); }
  .demo__button svg#theBub.chatSmile .smile .bubLine,
  .message__avatar svg#theBub.chatSmile .smile .bubLine {
    animation-name: smileForChat;
    animation-delay: 2.3s;
    transition-timing-function: cubic-bezier(1, 0.003, 1, 0.323);
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-direction: forwards;
    animation-fill-mode: both; }
.demo__button svg#theBub.chatSmile #bubble,
.message__avatar svg#theBub.chatSmile #bubble {
  transform: scale(1.1) !important; }
  .demo__button svg#theBub.chatSmile #bubble .bubbleBlob,
  .message__avatar svg#theBub.chatSmile #bubble .bubbleBlob {
    transform-origin: center center;
    transition: all 0.25s cubic-bezier(0.68, -1, 0.32, 2) !important; }

@keyframes floatingUp {
  0% {
    opacity: 0;
    transform: translateY(0em) scale(0.9); }
  20%,
  90% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-5em) scale(1); } }
@keyframes rotateDepth {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(-10%, -10%); }
  100% {
    transform: translate(0, 0); } }
@keyframes depthShadow {
  0% {
    transform: translate(0, 0);
    opacity: 0; }
  10%,
  70% {
    opacity: 1; }
  50% {
    transform: translate(10%, 15%); }
  100% {
    opacity: 0;
    transform: translate(0, 0); } }
.fun__gif {
  --fun-width: 22em;
  --animation-delay: 0.25s;
  --animation-duration: 4s;
  left: 50%;
  position: fixed;
  animation: floatingUp var(--animation-duration) cubic-bezier(0, -1, 0.72, 1) var(--animation-delay);
  animation-fill-mode: both; }
  .fun__gif.--alt {
    position: absolute;
    left: 20%;
    top: 10vh; }
  .fun__gif.--alt-2 {
    position: absolute;
    left: 40%;
    bottom: 10vh; }
  .fun__gif.--alt-3 {
    position: absolute;
    left: 60%;
    bottom: 30vh; }
  .fun__gif span {
    display: block;
    position: relative;
    z-index: 2;
    border-radius: var(--border-radius);
    animation: rotateDepth var(--animation-duration) ease var(--animation-delay);
    animation-fill-mode: both; }
    .fun__gif span img {
      position: relative;
      z-index: 2;
      display: block;
      padding: 0.25em;
      background-color: var(--color-background);
      border-radius: var(--border-radius);
      max-width: var(--fun-width); }
    .fun__gif span:before, .fun__gif span:after {
      z-index: 0;
      top: 0em;
      left: 0em;
      content: "";
      width: 100%;
      height: 100%;
      background-color: var(--color-contrast);
      position: absolute;
      opacity: 0.95;
      border-radius: var(--border-radius);
      animation: depthShadow var(--animation-duration) ease var(--animation-delay);
      animation-fill-mode: both; }
    .fun__gif span:after {
      z-index: 1;
      animation-delay: calc(var(--animation-delay) / 1.125);
      animation-duration: calc(var(--animation-duration) / 1.25);
      top: 0.25em;
      left: 0.25em;
      background: repeating-linear-gradient(-55deg, var(--color-primary), var(--color-primary) 1px, transparent 1px, transparent 8px); }

@keyframes dotDance {
  0% {
    transform: translateY(0); }
  25% {
    transform: translateY(25%); }
  50% {
    transform: translateY(-50%); }
  75% {
    transform: translateY(0); } }
.typing-animation {
  z-index: 22;
  position: relative;
  top: 32px;
  display: inline-grid;
  gap: 0.25em;
  grid-template-columns: 1fr 1fr 1fr;
  transform-origin: center; }

.typing-animation i {
  width: 0.1375em;
  height: 0.1375em;
  background: var(--color-primary);
  border-radius: 100em;
  display: block;
  position: relative;
  animation-name: dotDance;
  transition-timing-function: cubic-bezier(0.49, -0.48, 0.51, 1.49);
  animation-duration: 0.875s;
  animation-delay: 1.1s;
  animation-direction: forwards;
  animation-iteration-count: 7;
  animation-fill-mode: both; }

.typing-animation i {
  --index: 0;
  animation-delay: calc(0.12s * var(--index));
  margin-left: calc(2.75 * var(--index)); }

@keyframes fadeInOut {
  0% {
    opacity: 0; }
  5%,
  90% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(0.25em) rotate(-0.125deg) scale(0.98); }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1); } }
@keyframes popPoints {
  0% {
    transform: scale(1.25) rotate(0deg) translate(-0.3em, 0em);
    text-shadow: 0em 0em BlanchedAlmond, 0 1px var(--color-contrast); }
  50% {
    transform: scale(1.375) rotate(-1deg) translate(-0.3em, -0.1em);
    text-shadow: 0.2em 0.2em #ffdf85, 0 1px var(--color-contrast); }
  100% {
    transform: scale(1.25) rotate(0deg) translate(-0.3em, 0em);
    text-shadow: 0em 0em BlanchedAlmond, 0 1px var(--color-contrast); } }
@keyframes floatingJokeUp {
  0% {
    opacity: 0;
    transform: translateY(0em) rotate(0deg) scale(0.9); }
  10%,
  86% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-5em) rotate(-1.5deg) scale(0.9); } }
@keyframes jokeDepthShadow {
  0% {
    transform: translate(0, 0);
    opacity: 0; }
  10%,
  70% {
    opacity: 1; }
  50% {
    transform: translate(1%, 22%); }
  100% {
    opacity: 0;
    transform: translate(0, 0); } }
abbr.inlineEmoji {
  position: relative;
  width: 1.1em;
  display: inline-block;
  line-height: 1em;
  top: 0;
  height: 0.8em; }
  abbr.inlineEmoji span {
    text-align: center;
    top: 0;
    font-size: 106%;
    display: inline-block;
    position: absolute;
    font-style: normal;
    left: 0; }
  abbr.inlineEmoji.--r {
    margin-left: 0.125em; }
  abbr.inlineEmoji.--l {
    margin-right: 0.125em; }

.fun__joke {
  --animation-delay: 0.25s;
  --animation-duration: 3.5s;
  font-size: 2em;
  color: var(--color-primary);
  position: relative;
  animation: floatingJokeUp var(--animation-duration) cubic-bezier(0, -1, 0.72, 1) var(--animation-delay);
  animation-fill-mode: both;
  z-index: 2; }
  .fun__joke > div {
    display: flex;
    align-items: center;
    padding: 1em 1.375em 1em 2em;
    background-color: var(--color-contrast);
    border-radius: 111em;
    box-shadow: 0 0 0 4px var(--color-primary); }
  .fun__joke.--sm-joke > div {
    padding: 1em 1.25em 1em 2.375em; }
  .fun__joke.--emoji > div {
    padding: 1em 1.25em 1em 1.25em; }
    .fun__joke.--emoji > div span {
      display: inline-block;
      transform-origin: center;
      transform: scale(1.5);
      line-height: 1; }
  .fun__joke span {
    display: block; }
  .fun__joke:before, .fun__joke:after {
    z-index: -1;
    top: 0em;
    left: 0em;
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    position: absolute;
    opacity: 0.95;
    border-radius: 111em;
    animation: jokeDepthShadow var(--animation-duration) ease var(--animation-delay);
    animation-fill-mode: both; }
  .fun__joke:after {
    z-index: -1;
    animation-delay: calc(var(--animation-delay) / 1.125);
    animation-duration: calc(var(--animation-duration) / 1.25);
    top: 0.25em;
    left: 0.25em;
    background: repeating-linear-gradient(-55deg, var(--color-contrast), var(--color-contrast) 1px, transparent 1px, transparent 12px); }

.fun__points {
  display: inline-block;
  margin-right: 0.375em;
  font-weight: 800;
  animation: popPoints var(--animation-duration) ease var(--animation-delay);
  animation-fill-mode: both;
  transform-origin: center; }

.fun__message {
  --animation-delay: 0.875s;
  --animation-duration: 6.25s;
  margin-top: -6em;
  font-size: 2em;
  color: var(--color-primary);
  text-align: center;
  max-width: 22em;
  padding: 2em;
  font-weight: 800;
  line-height: 1.375;
  animation: fadeInOut var(--animation-duration) ease var(--animation-delay);
  animation-fill-mode: both; }
  .fun__message > div {
    --animation-delay: 1s;
    --animation-duration: 0.125s;
    transform-origin: center center;
    animation: fadeInUp var(--animation-duration) ease;
    animation-fill-mode: both; }
    .fun__message > div:nth-of-type(2) {
      animation-duration: calc(var(--animation-duration) * 1);
      animation-delay: calc(var(--animation-delay) * 1.75); }
    .fun__message > div:nth-of-type(3) {
      animation-duration: calc(var(--animation-duration) * 0.8);
      animation-delay: calc(var(--animation-delay) * 2.5); }

.message__avatar {
  max-width: 6em; }

.fun__overlay {
  --animation-delay: 0.5s;
  --animation-duration: 6.9s;
  position: fixed;
  background-color: aliceblue;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  animation: fadeInOut var(--animation-duration) ease var(--animation-delay);
  animation-fill-mode: both; }

@keyframes floatingUpFrogger {
  0% {
    opacity: 0;
    transform: translateY(10vh) scale(0.9); }
  20%,
  90% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-10vh) scale(1); } }
@keyframes froggerScene {
  0% {
    transform: translate(0, 0vh) scale(0.8);
    opacity: 0; }
  10%,
  70% {
    opacity: 0.3; }
  100% {
    opacity: 0;
    transform: translate(0, 0vh) scale(2); } }
@keyframes froggerJump {
  0%,
  49.99% {
    background-position: top; }
  50%,
  100% {
    background-position: bottom; } }
.fun__konami {
  --animation-delay: 0.25s;
  --animation-duration: 4s;
  font-size: 16px;
  padding: 6em;
  position: relative;
  animation: floatingUpFrogger var(--animation-duration) cubic-bezier(0, 1, 0, 0.5) var(--animation-delay);
  animation-fill-mode: both; }
  .fun__konami span i {
    --frame-size: 50vmin;
    --animation-duration: 0.5s;
    --animation-delay: 0.5s;
    display: inline-block;
    width: var(--frame-size);
    height: var(--frame-size);
    background-image: url(../img/frogger_sprite.png);
    background-size: var(--frame-size);
    image-rendering: pixelated;
    background-position: top;
    animation: froggerJump var(--animation-duration) cubic-bezier(0, -1, 0.72, 1) var(--animation-delay);
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    position: relative;
    z-index: 2; }
  .fun__konami span:before, .fun__konami span:after {
    z-index: 0;
    top: -25%;
    left: -25%;
    content: "";
    width: 150%;
    height: 150%;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 0.125em var(--color-contrast);
    position: absolute;
    opacity: 0.1;
    border-radius: 111em;
    animation: froggerScene var(--animation-duration) ease var(--animation-delay);
    animation-fill-mode: both;
    animation-direction: normal; }
  .fun__konami span:after {
    box-shadow: none;
    z-index: -1;
    top: 1.25em;
    left: 0em;
    opacity: 1;
    background: repeating-linear-gradient(-55deg, var(--color-contrast), var(--color-contrast) 1px, transparent 1px, transparent 1em);
    animation-delay: 0;
    animation-duration: calc(var(--animation-duration) / 2); }

body {
  background: url(../img/fauxBg.jpg);
  background-size: 15vw; }

header a {
  line-height: 1;
  display: block;
  align-items: center;
  text-align: center;
  z-index: 111;
  position: absolute;
  text-decoration: none;
  border-radius: 0.125em;
  top: 1em;
  right: 1em;
  font-size: 2em;
  background: var(--color-contrast);
  padding: 0.5em;
  color: var(--color-contrast);
  transition: box-shadow 0.125s ease, transform 0.125s ease;
  box-shadow: 0.01em 0.01em 0.6em 0.2em rgba(105, 255, 205, 0.3); }
  header a:hover {
    box-shadow: 0.05em 0.025em 0.5em 0.2em rgba(215, 255, 215, 0.2);
    transform: rotate(2.5deg); }
  header a:active {
    transform: scale(0.9);
    box-shadow: 0.05em 0.025em 0.5em 1.2em rgba(215, 255, 215, 0.2); }

article {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100%;
  width: 100%; }

/*# sourceMappingURL=index.css.map */