html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  padding: 0;
  margin: 0;
  background-color: #f0f0f0;
}

.container {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  PADDING-TOP: 200PX;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}

.avatar {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  margin-right: 5vmax;
  margin-top: 3vmax;
  margin-left: 5vmax;
  margin-bottom: 2vmax;
  overflow: hidden;
  opacity: 1;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3);
}

.avatar--green {
  background: linear-gradient(to right, #bcc8ff, #c466e7);
}

.avatar--orange {
  background: linear-gradient(to right, rgba(252, 110, 149, 0.6), #d95413 95%);
}

.avatar--pinkish {
  background: linear-gradient(to right, #dabeeb, #b60ebf);
}

.avatar--blue {
  background: linear-gradient(to right, #de9eff, #7047fe);
}

.avatar--magenta {
  background: linear-gradient(to right, #f8c0e8, #da34dd);
}

.avatar--skyBlue {
  background: linear-gradient(to right, #e0e8e9, #397ffe);
}

.avatar-body {
  position: relative;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 80%;
  box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}

.avatar-body--round {
  width: 75%;
  border-radius: 90%;
}

.body--green {
  background: linear-gradient(to right, #e6f4ca, #11513a);
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

.body--pink {
  background: linear-gradient(125deg, #fbc5d3, #a5156f);
}

.body--violet {
  background: linear-gradient(65deg, #ecc1eb, #411695);
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

.body--darkPink {
  background: linear-gradient(135deg, #ec9ca7, #ae0486);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.body--pinkishViolet {
  background: linear-gradient(45deg, #f295e3, #6008a6);
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

.body--limeGreen {
  background: linear-gradient(to top, #f4de39, #228d36);
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  box-shadow: none;
}

.avatar-eye {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 65px;
  height: 65px;
  background: linear-gradient(105deg, white, #cb87f4);
  border-radius: 100%;
  box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
  margin: 5px;
  transform: translateX(-50%);
}

.avatar-eye--orange {
  background: linear-gradient(to bottom, #fdfdfd, #fac798);
}

.avatar-eye--green {
  background: linear-gradient(to bottom, #fdfdfd, #c3efea);
}

.avatar-eye--violet {
  background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
}

.avatar-eye--magenta {
  background: linear-gradient(to bottom, #fdfdfd, #d195fd);
}

.eye--left {
  left: 10%;
}

.eye--right {
  left: 85%;
}

.eye--center {
  left: 45%;
  top: 10%;
}

.eye--center-top {
  left: 45%;
  top: -15%;
}

.body--violet .avatar-eye {
  top: -20%;
  width: 55px;
  height: 55px;
}

.body--violet > .eye--left {
  left: 15%;
}

.body--violet > .eye--right {
  left: 80%;
}

.avatar-eye-pupil {
  position: absolute;
  width: 55%;
  height: 55%;
  left: 50%;
  top: 25%;
  transform: translate(-50%);
  z-index: 100;
  border-radius: 100%;
}

.pupil--purple {
  background: linear-gradient(135deg, #daabe5, #682d9d 75%);
}

.pupil--purple::after {
  content: "";
}

.pupil--green {
  background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
}

.pupil--pink {
  background: linear-gradient(135deg, #f1a183, #8535cd);
}

.pupil--limeGreen {
  background: linear-gradient(135deg, #89e1a0, #3ba8af 75%);
}

.pupil--orange {
  background: linear-gradient(135deg, #fbdbb5, #d58138 75%);
}

.avatar-eye-pupil-blackThing {
  position: absolute;
  width: 55%;
  height: 55%;
  left: 50%;
  top: 25%;
  background: #2c2f32;
  transform: translate(-50%);
  border-radius: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.avatar-eye-pupil-lightReflection {
  position: absolute;
  width: 7px;
  height: 7px;
  left: 25%;
  top: 10%;
  background: #ebebeb;
  transform: translate(-50%);
  border-radius: 100%;
  box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
}

.avatar-smile {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%);
  padding: 0.2em;
  transition: 0.2s all linear;
  width: 60px;
  height: 23px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #60a38a;
  border-radius: 10px;
}

.body--pink > .avatar-smile {
  top: 60%;
  width: 50px;
  height: 10px;
  border-color: rgba(243, 166, 222, 0.5);
  border-radius: 10px;
}

.body--violet > .avatar-smile {
  background: #8f3c93;
  height: 50px;
  width: 40px;
  border: 5px solid #c67fe8;
  top: 20%;
  border-radius: 100%;
}

.body--darkPink > .avatar-smile {
  border: 10px solid #a42883;
  top: 20%;
  width: 70px;
  height: 70px;
  background: transparent;
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
}

.body--pinkishViolet > .avatar-smile {
  border: 10px solid #7b408e;
  top: 60%;
  width: 70px;
  height: 70px;
  background: transparent;
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.body--limeGreen > .avatar-smile {
  background: #1e8124;
  height: 30px;
  width: 25px;
  border: 10px solid #2ca446;
  top: 40%;
  border-radius: 100%;
}

.avatar-tongue {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%);
  width: 50%;
  height: 300%;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  background: #b44390;
}

.avatar-horn {
  position: absolute;
  left: 65%;
  top: -10%;
  transform: translate(-50%);
  width: 15px;
  height: 35px;
  background: linear-gradient(to top, #d476a6, #a40f66);
}

.horn--right {
  border-top-left-radius: 100%;
}

.horn--left {
  left: 35%;
  border-top-right-radius: 100%;
}

.body--limeGreen > .avatar-horn {
  left: 0%;
  transform: rotate(-45deg);
  width: 5px;
  border-top-right-radius: 100%;
  background: linear-gradient(to top, #3bcf96, #62f0a0);
}

.avatar-tooth {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #d2ede3;
  border-radius: 2px;
  top: 61%;
  transform: translate(-50%);
}

.tooth--right {
  left: 45%;
}

.tooth--left {
  left: 55%;
}

.body--darkPink > .tooth--right {
  top: 58%;
  left: 50%;
  width: 15px;
  height: 13px;
}

.avatar-ear {
  position: absolute;
  top: 0%;
  left: 10%;
  width: 3px;
  height: 27px;
  background: green;
  transform: rotate(-35deg);
  background: #29a047;
}

.ear--right {
  left: 85%;
  transform: rotate(30deg);
}

.avatar-ear::before {
  content: "";
  width: 30px;
  height: 30px;
  background: green;
  border-radius: 100%;
  position: absolute;
  top: -100%;
  left: -400%;
  background: linear-gradient(235deg, #40daac, #3bbdba);
}