html, body {
    overflow: hidden;
    /* background: #deeeef; */
    background-image: url(../../images/walter.jpg);
  }
  
  .cartoon {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 80vmin;
    height: 80vmin;
    background-image: radial-gradient(white, transparent 60%);
  }
  
  .cartoon div {
    position: absolute;
    box-sizing: border-box;
  }
  
  .b {
    border: 0.5vmin solid;
  }
  
  .r {
    border-radius: 100%;
  }
  
  .hb::before,
  .ha::after {
    content: "";
    display: block;
    position: absolute;
    box-sizing: border-box;
  }
  
  /****/
  .cartoon {
    --skin: rgb(255, 0, 0);
    --skindark: #fb9;
    --skindarker: #ea8;
    --shirt: #fff;
    --shirtdark: #eee;
    --jacket: #222;
    --jacketdark: #111;
    --tie: rgb(0, 247, 255);
    --tiedark: rgb(0, 247, 255);
    --glass: #000;
    --hair: rgb(0, 0, 0);
  }
  
  .face {
    background: var(--skin);
    width: 42%;
    height: 60%;
    border-radius: 100% / 60% 60% 120% 120%;
    box-shadow: 
      inset 1.5vmin -0.25vmin 0.5vmin var(--skindark),
      inset 0 -1vmin 0 -0.5vmin var(--skindark),
      inset -1.5vmin 0 0.5vmin rgba(255,255,255,0.2);
    top: 4%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  
  .neck {
    width: 22%;
    height: 60%;
    background: var(--shirt);
    border-radius: 100% / 30% 30% 160% 160%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 
      -3vmin 11vmin 0 5vmin var(--jacketdark), 
      3vmin 11vmin 0 5vmin var(--jacketdark), 
      0 30vmin 0 11vmin var(--jacketdark);
    overflow: hidden;
  }
  
  .neck::after {
    width: 140%;
    height: 80%;
    background: var(--skin);
    border-radius: 100% / 50% 50% 120% 120%;
    left: 50%;
    top: -52%;
    transform: translate(-50%, 0);
    box-shadow: 
      -7vmin 5.5vmin var(--shirtdark), 
      7vmin 5.5vmin var(--shirtdark);
  }
  
  .neck::before {
    width: 50%;
    height: 100%;
    background: var(--tie);
    top: -55%;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 50% / 70%;
    box-shadow: 0 47.5vmin var(--tiedark)
  }
  
  
  .body {
    width: 83%;
    height: 120%;
    background: var(--jacket);
    border-radius: 100% / 30% 30% 200% 200%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  
  .body::before {
    width: 30%;
    height: 100%;
    background: var(--jacket);
    border-radius: 100% 0 0 0;
    left: -25%;
    top: 7%;
  }
  
  .body::after {
    width: 30%;
    height: 100%;
    background: var(--jacket);
    border-radius: 0 120% 0 0;
    right: -25%;
    top: 7%;
  }
  
  .ear {
    width: 10%;
    height: 25%;
    background: red;
    top: 28%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  
  .ear::before {
    width: 100%;
    height: 100%;
    background: var(--skin);
    border-radius: 100% / 80% 80% 0 140%;
    transform: translate(-15vmin, 0) rotate(-16deg);
  }
  
  .ear::after {
    width: 100%;
    height: 100%;
    background: var(--skin);
    border-radius: 100% / 80% 80% 140% 0%;
    transform: translate(15vmin, 0) rotate(16deg);
  }
  
  .glass {
    width: 40%;
    height: 15%;
    background: #444;
    background:linear-gradient(#222, #444);
    top: 40%;
    left: 5%;
    border-radius: 100% / 20% 20% 80% 100%;
    border: 0.5vmin solid;
    border-top: 1vmin solid;
  }
  
  .glass::before {
    width: 20%;
    height: 20%;
    background: var(--glass);
    left: -20%;
  }
  
  .glass::after {
    width: 36%;
    height: 60%;
    border: 0.5vmin solid transparent;
    border-top: 1vmin solid var(--glass);
    border-radius: 50%;
    right: -36%;
  }
  
  .glass + .glass {
    transform: scaleX(-1);
    left: auto;
    right: 5%;
  }
  
  .eyebrow {
    width: 40%;
    height: 20%;
    border-radius: 100% / 50%;
    box-shadow: 0.75vmin -2vmin 0 -1vmin var(--hair);
    top: 37%;
    left: 4%;
    transform: rotate(-4deg);
  }
  
  .eyebrow + .eyebrow {
    left: auto;
    right: 4%;
    top: 36.5%;
    transform: scaleX(-1) rotate(-5deg)
  }
  
  .mouth {
    width: 28%;
    height: 3%;
    border-radius: 100% / 50%;
    border-radius: 0 0 100vmin 100vmin;
    background: var(--skindark);
    border-bottom: 0.35vmin solid;
    top: 78%;
    left: 50%;
    transform: translate(-50%, 0) rotate(1deg);
  }
  
  .nose {
    width: 5vmin;
    height: 5vmin;
    background: var(--skin);
    border-radius: 50%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 
      inset 0 -1vmin 0 -0.25vmin var(--skindarker),
      -2.75vmin -0.5vmin 0 -1vmin var(--skin),
      -3vmin 0 0 -1vmin var(--skindarker),
      2.75vmin -0.5vmin 0 -1vmin var(--skin),
      3vmin 0 0 -1vmin var(--skindarker)
  }