@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap");
@font-face {
  font-family: 'graffiti';
  src: url("./graffiti.ttf") format("truetype");
}

body {
  margin: 0;
  background-color: #efefef;
}

body, html, span, div {
  font-family: 'Montserrat', sans-serif;
}

.b1 {
  background-color: #5C4B51;
}

.b2 {
  background-color: #8CBEB2;
}

.b3 {
  background-color: #F2EBBF;
}

.b4 {
  background-color: #F3B562;
}

.b5 {
  background-color: #F06060;
}

.c1 {
  color: #5C4B51;
}

.c2 {
  color: #8CBEB2;
}

.c3 {
  color: #F2EBBF;
}

.c4 {
  color: #F3B562;
}

.c5 {
  color: #F06060;
}

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

.blobs > img {
  position: absolute;
  width: 30vw;
  z-index: -100;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform: scale(1) translate(10px, -30px);
            transform: scale(1) translate(10px, -30px);
  }
  38% {
    -webkit-transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
            transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
  }
  40% {
    -webkit-transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
            transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
  }
  78% {
    -webkit-transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
            transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
  }
  80% {
    -webkit-transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
            transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
  }
  100% {
    -webkit-transform: scale(1) translate(10px, -30px);
            transform: scale(1) translate(10px, -30px);
  }
}

@keyframes move {
  0% {
    -webkit-transform: scale(1) translate(10px, -30px);
            transform: scale(1) translate(10px, -30px);
  }
  38% {
    -webkit-transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
            transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
  }
  40% {
    -webkit-transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
            transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg);
  }
  78% {
    -webkit-transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
            transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
  }
  80% {
    -webkit-transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
            transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg);
  }
  100% {
    -webkit-transform: scale(1) translate(10px, -30px);
            transform: scale(1) translate(10px, -30px);
  }
}

svg #inside {
  -webkit-animation: animateInside 1s linear infinite alternate;
          animation: animateInside 1s linear infinite alternate;
}

@-webkit-keyframes animateInside {
  0% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(60px) translateX(60px);
            transform: translateZ(60px) translateX(60px);
    opacity: 0.2;
  }
}

@keyframes animateInside {
  0% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(60px) translateX(60px);
            transform: translateZ(60px) translateX(60px);
    opacity: 0.2;
  }
}

.chevron {
  z-index: 0;
  position: absolute;
  right: 5vw;
  top: 15vw;
  width: 20%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.chevron path {
  animation: chevronPulse 1s infinite alternate-reverse;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}

.chevron path:nth-child(1) {
  -webkit-transform: translateX(-10%);
          transform: translateX(-10%);
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.chevron path:nth-child(2) {
  -webkit-transform: translateX(20%);
          transform: translateX(20%);
  -webkit-animation-delay: .2s;
          animation-delay: .2s;
}

@-webkit-keyframes chevronPulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes chevronPulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

.drop {
  margin: auto;
  display: block;
  -webkit-box-shadow: 6px 6px 14px 2px #4d4d4d;
          box-shadow: 6px 6px 14px 2px #4d4d4d;
  width: 40vmin;
  height: 40vmin;
  border-radius: 99em;
  background: -webkit-gradient(linear, left bottom, right top, from(#f06060), to(#f2ebbf));
  background: linear-gradient(to top right, #f06060, #f2ebbf);
}

@-webkit-keyframes drip {
  0% {
    margin-top: -100%;
    width: 40vmin;
    height: 40vmin;
  }
  80% {
    margin-top: 0%;
    width: 30vmin;
    height: 30vmin;
  }
  90% {
    margin-top: 65%;
    width: 15vmin;
    height: 15vmin;
  }
  100% {
    margin-top: 100%;
    width: 0vmin;
    height: 0vmin;
  }
}

@keyframes drip {
  0% {
    margin-top: -100%;
    width: 40vmin;
    height: 40vmin;
  }
  80% {
    margin-top: 0%;
    width: 30vmin;
    height: 30vmin;
  }
  90% {
    margin-top: 65%;
    width: 15vmin;
    height: 15vmin;
  }
  100% {
    margin-top: 100%;
    width: 0vmin;
    height: 0vmin;
  }
}

.drop:nth-child(3) {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotate3d(1, 0, 0, 100deg);
          transform: rotate3d(1, 0, 0, 100deg);
  position: absolute;
  bottom: -20vmin;
}

.drop:nth-child(2) {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-name: drip;
          animation-name: drip;
}

footer {
  padding: 2vw;
  text-align: center;
}

footer > * {
  text-decoration: unset;
  display: block;
  font-size: 6vw;
  padding: .2vwpx;
}
/*# sourceMappingURL=index.css.map */