@font-face {
  font-family: 'Knewave';
  src: url("./fonts/knewave-regular-webfont.woff2") format("woff2"), url("./fonts/knewave-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

html {
  overflow: hidden; }

.background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, green 30%, skyblue 60%);
  overflow: auto; }

.piggy {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66.6666%;
  height: 0;
  padding-bottom: 45%;
  transform: translate(-50%, -50%); }
  @media all and (max-width: 28.0625em) {
    .piggy {
      width: 80%;
      padding-bottom: 54.00005%; } }
  .piggy .head {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    border-radius: 50%;
    background: linear-gradient(120deg, #ffb6c1, #f08080);
    z-index: 1; }
    .piggy .head .ear {
      position: absolute;
      width: 20%;
      height: 30%;
      border-radius: 100% 100% 0 0;
      bottom: 80%; }
      .piggy .head .ear--left {
        background: linear-gradient(160deg, #f08080, #ffb6c1);
        box-shadow: inset 5px 3px 0px 2px #931111;
        transform: rotate(-40deg); }
      .piggy .head .ear--right {
        left: 80%;
        background: linear-gradient(80deg, #f08080, #ffb6c1);
        box-shadow: inset 5px 3px 0px 2px #931111;
        transform: rotate(40deg); }
    .piggy .head .eye {
      position: absolute;
      top: 20%;
      width: 20%;
      height: 30%;
      background: whitesmoke;
      border-radius: 60% 60% 30% 30%;
      overflow: hidden; }
      .piggy .head .eye::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, #ffdae0, #ffa7b6);
        z-index: 1;
        content: '';
        transform: translateY(-60%);
        transition: transform 25ms; }
      .piggy .head .eye.is-closed::before {
        transform: translateY(0); }
      .piggy .head .eye .pupille {
        position: absolute;
        width: 40%;
        height: 0;
        padding-bottom: 40%;
        background: black;
        border-radius: 50%; }
        .piggy .head .eye .pupille::before {
          position: absolute;
          width: 20%;
          height: 20%;
          background: white;
          border-radius: 50%;
          top: 20%;
          left: 20%;
          content: ''; }
      .piggy .head .eye--left {
        left: 26%; }
        .piggy .head .eye--left .pupille {
          bottom: 0;
          right: 10%; }
      .piggy .head .eye--right {
        right: 26%; }
        .piggy .head .eye--right .pupille {
          bottom: 0;
          left: 10%; }
    .piggy .head .trunk {
      position: absolute;
      width: 45%;
      height: 30%;
      background: linear-gradient(120deg, #ff9dab, #ed6969);
      border-radius: 50%;
      top: 48%;
      left: 27.5%;
      box-shadow: 2px 3px 0px 2px #931111;
      z-index: 2;
      transition: transform 50ms ease-in-out; }
      .piggy .head .trunk.is-moving {
        transform: translateY(-20%); }
      .piggy .head .trunk .nostril {
        position: absolute;
        top: 22.5%;
        height: 55%;
        width: 20%;
        background: #000;
        border-radius: 50%;
        box-shadow: inset 2px 3px 3px 2px #41000b; }
        .piggy .head .trunk .nostril--left {
          left: 25%; }
        .piggy .head .trunk .nostril--right {
          right: 25%; }
  .piggy .body {
    position: absolute;
    top: 15%;
    left: 11%;
    width: 70%;
    height: 50%; }
    .piggy .body__body {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg, #ffb6c1, #f08080);
      border-radius: 30% 30% 50% 50%; }
    .piggy .body .foot {
      position: absolute;
      height: 50%;
      width: 5%;
      top: 80%;
      background: linear-gradient(to top, maroon 2%, transparent 7%), linear-gradient(120deg, #ffb6c1, #f08080);
      transform-origin: bottom center; }
      .piggy .body .foot--right {
        z-index: -1; }
      .piggy .body .foot--front {
        transform: skewX(-10deg);
        left: 14%; }
        .piggy .body .foot--front.foot--right {
          left: 8%; }
      .piggy .body .foot--back {
        transform: skewX(10deg);
        right: 14%;
        background: linear-gradient(to top, maroon 2%, transparent 7%), linear-gradient(120deg, #ff9dab, #f08080); }
        .piggy .body .foot--back.foot--right {
          right: 8%; }
    .piggy .body .tail {
      position: absolute;
      width: 16%;
      height: 0;
      top: 25%;
      padding-bottom: 16%;
      left: 99%;
      border-top-right-radius: 100%;
      box-shadow: inset -4px 4px 0 2px #f08080;
      transform: rotate(18deg);
      transform-origin: top left; }
      .piggy .body .tail.is-wiggled {
        transform: rotate(-18deg); }

.greetings {
  font-family: 'Knewave', cursive;
  position: absolute;
  bottom: 62%;
  right: 25%; }
  .greetings p {
    padding: 0.5em;
    margin: 0;
    line-height: 1.2;
    font-size: 3.5vw;
    text-align: right;
    background-image: linear-gradient(to right, red, blue);
    text-shadow: outset 1px 1px 1px #000;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }