/** Snowman
https://codepen.io/Adir-SL/pen/qBEVLdd
*/

.snowManContainer {
    position: absolute;
    width: 60%;
    height: 30%;
    bottom: 0%;
    right: 25%;
    z-index: 2;
  }

  .snowMan {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
  /*   filter: contrast(300%); */
  }
  .snowBall {
    position: absolute;
    bottom: 20%;
    left: 50%;
    height: 30vh;
    width: 30vh;
    margin-left: -15vh;
    border-radius: 50%;
  /*   border: 2vh dotted #f4f4f4; */
  /*   filter: blur(1vh) contrast(10000%) brightness(150000%); */
  }
  .snowBall::after {
    content: "";
    position: absolute;
    height: 106%;
    width: 106%;
    left: -3%;
    top: -3%;
    border-radius: 50%;
    background-color: #f4f4f4;
  }
  .snowBall:nth-of-type(2) {
    margin-bottom: 18vh;
    height: 26vh;
    width: 26vh;
    margin-left: -13vh;
  }
  .snowBall:nth-of-type(3) {
    margin-bottom: 36vh;
    height: 22vh;
    width: 22vh;
    margin-left: -11vh;
  }
  .snowFace {
    position: absolute;
    height: 22vh;
    width: 22vh;
    margin-left: -11vh;
    margin-bottom: 36vh;
    bottom: 20%;
    left: 50%;
    z-index: 9;
  }
  .snowFace .eye,
  .snowFace .nose {
    position: relative;
    height: 10%;
    width: 10%;
    float: left;
    margin: 10%;
    margin-top: 20%;
    border-radius: 50%;
    background-color: black;
  /*   filter: blur(0.1vh); */
    box-shadow: 0 -1vh 1.4vh rgba(0, 0, 0, 0.4) inset,
      -0.3vh -0.2vh 0.2vh rgba(255, 255, 255, 1) inset;
  }
  .snowFace .nose {
    background-color: orangered;
    margin-top: -2.2vh;
    clear: both;
    width: 50%;
    margin-left: -6vh;
    border-radius: 10vh;
    box-shadow: 0 -1vh 1.4vh rgba(0, 0, 0, 0.4) inset;
    transform: rotate(-3deg);
  }
  .snowFace .eye::before,
  .snowFace .eye::after {
    content: "";
    position: absolute;
    width: 30%;
    height: 30%;
    margin: 10%;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0.3vh 0.2vh 0vh rgba(0, 0, 0, 0.3) inset;
  }
  .snowFace .eye::after {
    bottom: 20%;
    right: 20%;
  }
  .snowFace .eye:nth-of-type(2)::before,
  .snowFace .eye:nth-of-type(2)::after {
    left: 20%;
  }
  .snowFace .eye:nth-of-type(2)::after {
    bottom: 10%;
  }
  .snowFace .twig,
  .snowFace .twigi {
    position: absolute;
    background-color: rgb(128, 77, 35);
    width: 20vh;
    height: 2vh;
    top: 23vh;
    left: 21vh;
    transform-origin: left center;
    transform: rotate(-18deg);
    box-shadow: 0 -1vh 1.4vh rgba(0, 0, 0, 0.6) inset;
    clip-path: polygon(0 0, 100% 38%, 7% 100%, 0 87%, 3% 45%);
  }
  .snowFace .twigi {
    transform: rotate(-38deg) translate(5vh, 2vh) scale(0.6);
  }
  .snowFace .shade {
    background: black;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0) 100%
    );
    transform: rotate(10deg);
    opacity: 0.3;
  }
  .noBlur {
    filter: none;
  }
  .noBlur .innerSnow {
    background: none;
  }
  .innerSnow::before,
  .innerSnow::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    bottom: -5%;
    left: -5%;
    border-radius: 50%;
    background-color: #f4f4f4;
  /*   filter: blur(1vh) contrast(10000%) brightness(150000%); */
  }
  .innerSnow::before {
    left: 50%;
    height: 30%;
    bottom: 10%;
  }
  .noBlur .innerSnow::before {
    left: 80%;
    bottom: 16%;
  /*   filter: blur(0.1vh); */
  }
  .noBlur .innerSnow::after {
    display: none;
  }
  .noBlur .snowBall {
    background-color: #f4f4f4;
    box-shadow: -8vh 0 6vh rgba(0, 0, 0, 0.5) inset, 2vh 0 2vh rgba(0, 0, 0, 1);
    filter: blur(2vh);
    border: 0;
    transform: scale(1) translate(3vh, -2vh);
    opacity: 0.3;
  }
  .noBlur .snowBall::after {
    display: none;
  }