/* 
/*!
// can.css By RASTER "A very RASTER SPRAY hand"
Inspired from Vangel Tzo "A very ROCK hand" which was
Inspired by https://dribbble.com/shots/5678275-Rock from Rwds

---------------------------------------------
13. Shaking Can Animation
--------------------------------------------- 


@font-face {
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  font-style: normal;
  src: "../css/LuckiestGuy-Regular.tff";
}

.luckiest-guy-regular {
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  font-style: normal;
}
*/
body {
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  font-style: normal;
  background-color: #f3f3f3;
}

.pads {
  padding-top: 400px;
  color: #d3d3d3
}

.text-container {
  padding-top: 10px;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drop-can {
  padding-top: 125px;
}

.move-hand-top {
  padding-top: 0px;
}

.hand {
  position: relative;
  width: 100px;
  height: 100px;
  animation: rockit .9s ease infinite alternate;
}

.palm {
  width: 135px;
  height: 140px;
  background: #FEDCCA;
  transform: rotate(40deg);
  box-shadow: inset 0 0 50px #E77F7B;
}

.palm::after {
    content: '';
    background: #F2ADA1;
    width: 20px;
    height: 30px;
    border-radius: 0 0 0 100% / 50%;
    position: absolute;
    left: -20px;
    bottom: 25px;
    z-index: 5;
  }

/.palm::before {
    content: '';
    background-image: linear-gradient(-180deg, #E56C4C 0, #F68E60 100%);
    width: 100%;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    bottom: -15px;
  }


.can {
  width: 205px;
  /*height: 135px;*/
  border: 0px solid #c51317;
  border-width: 4px 40px 4px 40px;
  border-radius: 6px 37px 37px 6px;
  position: absolute;
  top: -80px;
  left: 80%;
  transform: rotate(-5deg) translatex(-50%);
  z-index: 1;
  overflow: hidden;
}

.liquid {
  width: 232px;
  height: 134px;
  background: #000000;
  /* was position: absolute but changed to test liquid text */
  position: relative;
  /* moves it over */
  top: 0px;
  /* moves it down */
  left: 39%;
  transform: rotate(0deg) translatex(-45%);
  z-index: 1;
  overflow: hidden;
}

h5 {
  display: inline-block;
  font-size: 0.83em;
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-family: "Luckiest Guy", cursive;
  font-weight: 500;
  font-style: normal;
  z-index: 1;
  unicode-bidi: isolate;
}

.liquid h5 {
  color: #ffffff;
  font-size: 3.5em;
  position: absolute;
  transform: rotate(0deg) translatex(15%) translatey(-62px) translate(0px);
}

.liquid h5:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #ae1114;
}

.liquid h5:nth-child(2) {
  color: #ae1114;
  animation: animate 2.6s ease-in-out infinite;
}

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

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

.shaking-cans {
  z-index: 2;
}

.can-shadow {
  width: 100px;
  height: 50px;
  background: #C7656C;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: rotate(-5deg) translatex(-40%);
  filter: blur(10px);
}

.finger {
  position: absolute;
  width: 45px;
  background: #FEDCCA;
  border-radius: 22px;
  box-shadow: inset 11px -17px 40px #E77F7B;
}

.finger-shadow {
  width: 35px;
  height: 50px;
  background: #C7656C;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translatex(-50%);
  filter: blur(10px);
}
/* index finger-5 DOES NOTHING, now SPRAY FINGER finger-6 */
.finger-5 {
  height: 68px;
  top: -80px;
  left: -15px;
  transform: rotate(-7deg);
  z-index: 1;
}
/* pinkie */
.finger-4 {
  height: 65px;
  top: -100px;
  left: 30px;
  transform: rotate(-3deg);
  z-index: 1;
}
/* ring */
.finger-3 {
  height: 90px;
  top: -105px;
  left: 75px;
  transform: rotate(-8deg);
  z-index: 1;
}
/* flip u */
.finger-2 {
  height: 65px;
  top: -110px;
  left: 120px;
  transform: rotate(-3deg);
  z-index: 1;
}

/* thumb */
.finger-1 {
  height: 90px;
  top: 20px;
  right: -65px;
  transform: rotate(132deg);
  z-index: 1;
}

.finger-1 fingernail {
    top: 10px;
    bottom: auto;
    transform: translatex(-50%) scale(-1);
  }

.thumb-base {
  background-image: linear-gradient(-125deg, #E97E79 42%, #FDD8C7 77%);
  width: 42px;
  height: 85px;
  border-radius: 17px 20px 0 79px;
  position: absolute;
  top: 26px;
  right: -51px;
  transform: rotate(70deg);
}

/* spray finger */
.finger-6 {
  height: 100px;
  top: -30px;
  right: -170px;
  transform: rotate(25deg);
  z-index: 0;
}

/* spray finger base */
.finger-6-base {
  height: 120px;
  top: 10px;
  right: -100px;
  transform: rotate(-100deg);
  z-index: -1;
}

.spray-tip {
  width: 40px;
  height: 25px;
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;
  background: #000000;
  position: absolute;
  bottom: 100px;
  left: 240%;
  z-index: 1;
  transform: translatex(-60%) rotate(85deg);
}

.spray-nozzle {
  width: 10px;
  height: 10px;
  border-radius: 20% 20% 0 0 / 20% 20% 0 0;
  background: #000000;
  position: absolute;
  bottom: 130px;
  left: 235%;
  z-index: 1;
  transform: translatex(-60%) rotate(85deg);
}

.fingernail {  
  width: 30px;
  height: 25px;
  background: rgba(#FDFDFD, .3);
  box-shadow: 1px 1px #E5BAA7;
  border-radius: 0 0 50% 50%;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translatex(-50%);
}

.palm-shadow {
  width: 20px;
  height: 70px;
  background: #C7656C;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translatex(-50%);
  filter: blur(10px);
}

@keyframes rockit {
  from { transform: translatey(30px) rotate(-110deg); }
  to { transform: translatey(30px) rotate(-60deg); }
}

@keyframes screensaver {
  to {
    box-shadow: 
      0 0 0 80px #eee,
      0 0 0 120px #D36868,
      0 0 0 200px #71D368,
      0 0 0 250px #68CFD3;
  }
}