.body {
  background-color: #242424;
}

.wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100vh;
  height: 100vh;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.circle {
  position: relative;
  display: -ms-grid;
  display: grid;
  width: 80vh;
  height: 80vh;
  padding: 20px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-auto-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  border-style: none;
  border-width: 10px;
  border-color: #000;
  border-radius: 100%;
  background-color: #c93d3d;
  background-image: radial-gradient(circle farthest-corner at 60% 60%, #a32828 44%, #581a1a 72%, #000);
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  -webkit-transition: -webkit-transform 600ms cubic-bezier(.655, .212, .32, 1.275);
  transition: -webkit-transform 600ms cubic-bezier(.655, .212, .32, 1.275);
  transition: transform 600ms cubic-bezier(.655, .212, .32, 1.275);
  transition: transform 600ms cubic-bezier(.655, .212, .32, 1.275), -webkit-transform 600ms cubic-bezier(.655, .212, .32, 1.275);
}

.circle:hover {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.circle:active {
  background-image: radial-gradient(circle farthest-corner at 60% 60%, #a39528 44%, #53581a 72%, #fff);
  -webkit-transform: scale(1.1) rotate(180deg);
  -ms-transform: scale(1.1) rotate(180deg);
  transform: scale(1.1) rotate(180deg);
}

.inner-circle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 50%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-width: 30px 10px 10px;
  border-color: #000;
  border-top-style: solid;
  border-right-style: none;
  border-left-style: none;
  border-radius: 100%;
  background-color: #3c90f0;
  -webkit-transition: -webkit-transform 500ms ease;
  transition: -webkit-transform 500ms ease;
  transition: transform 500ms ease;
  transition: transform 500ms ease, -webkit-transform 500ms ease;
}

.inner-circle:hover {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.inner-circle:active {
  background-color: #9f3cf0;
}

.inner-circle._2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #15f689;
}

.inner-circle._2:active {
  background-color: #695a49;
}

.inner-circle.eye {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 60%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-style: solid none;
  border-color: #000;
  border-top-width: 2px;
  border-bottom-width: 5px;
  border-radius: 10px 100% 0%;
  background-color: #fff;
  background-image: radial-gradient(circle farthest-corner at 50% 50%, #c7c7c7 41%, #fff);
  -webkit-transform: rotate(143deg);
  -ms-transform: rotate(143deg);
  transform: rotate(143deg);
  -webkit-transition: -webkit-transform 1000ms cubic-bezier(.175, .885, .32, 1.275);
  transition: -webkit-transform 1000ms cubic-bezier(.175, .885, .32, 1.275);
  transition: transform 1000ms cubic-bezier(.175, .885, .32, 1.275);
  transition: transform 1000ms cubic-bezier(.175, .885, .32, 1.275), -webkit-transform 1000ms cubic-bezier(.175, .885, .32, 1.275);
}

.inner-circle.eye:hover {
  -webkit-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  transform: rotate(-40deg);
}

.inner-circle.pupil {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 70%;
  height: 70%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-style: none;
  background-color: #000;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.inner-circle.pupil:active {
  background-color: #853b5d;
  background-image: radial-gradient(circle farthest-corner at 20% 50%, #682f4b, #350f24);
}

.inner-circle.pupil._2 {
  width: 50%;
  height: 50%;
}

.inner-circle.pupil._2:active {
  background-image: radial-gradient(circle farthest-corner at 20% 50%, #ec499b, #25161f 89%);
}

.inner-circle.iris {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  height: 60%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-style: none;
  background-color: #1d9e60;
  background-image: radial-gradient(circle farthest-corner at 50% 50%, #1ebd66 42%, #31664a 80%, #184e34);
  -webkit-transform: rotate(123deg);
  -ms-transform: rotate(123deg);
  transform: rotate(123deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.inner-circle.iris:hover {
  -webkit-transform: translate3d(-33px, -29px, -33px);
  transform: translate3d(-33px, -29px, -33px);
}

.inner-circle.iris:active {
  background-image: radial-gradient(circle farthest-corner at 50% 50%, #ff1fc3 42%, #9b212b 80%, #000);
}

.inner-circle.iris._2 {
  background-color: #295d97;
  background-image: radial-gradient(circle farthest-corner at 50% 50%, #693cf0 47%, #3d597f 71%, #1a2958 99%);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.inner-circle.iris._2:hover {
  -webkit-transform: translate3d(35%, 25%, -33px);
  transform: translate3d(35%, 25%, -33px);
}

.inner-circle.iris._2:active {
  background-image: radial-gradient(circle farthest-corner at 50% 50%, #f03c90 47%, #6e1a35 71%, #5c1c4f 99%);
}

.mouth {
  position: absolute;
  left: 0%;
  top: 13%;
  right: 0%;
  bottom: auto;
  width: 15%;
  height: 10%;
  margin-right: auto;
  margin-left: auto;
  border-bottom-left-radius: 110px;
  border-bottom-right-radius: 110px;
  background-color: #000;
  -webkit-transition: -webkit-transform 200ms linear;
  transition: -webkit-transform 200ms linear;
  transition: transform 200ms linear;
  transition: transform 200ms linear, -webkit-transform 200ms linear;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.mouth:hover {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.mouth:active {
  -webkit-transform: scale3d(1.1, 1.4, 1) rotate(180deg);
  transform: scale3d(1.1, 1.4, 1) rotate(180deg);
}

.div-block {
  position: absolute;
  left: 7%;
  top: auto;
  right: auto;
  bottom: 26%;
  width: 38%;
  height: 60px;
  background-color: #000;
}

.eyebrow {
  position: absolute;
  left: 7%;
  top: auto;
  right: auto;
  bottom: 26%;
  width: 38%;
  height: 9%;
  background-color: #000;
  -webkit-transition: -webkit-transform 600ms cubic-bezier(.95, .05, .795, .035);
  transition: -webkit-transform 600ms cubic-bezier(.95, .05, .795, .035);
  transition: transform 600ms cubic-bezier(.95, .05, .795, .035);
  transition: transform 600ms cubic-bezier(.95, .05, .795, .035), -webkit-transform 600ms cubic-bezier(.95, .05, .795, .035);
}

.eyebrow:hover {
  -webkit-transform: translate(-13%, 0px) rotate(14deg);
  -ms-transform: translate(-13%, 0px) rotate(14deg);
  transform: translate(-13%, 0px) rotate(14deg);
}

.eyebrow:active {
  -webkit-transform: translate(-6%, 138%) rotate(14deg);
  -ms-transform: translate(-6%, 138%) rotate(14deg);
  transform: translate(-6%, 138%) rotate(14deg);
}

.eyebrow._2 {
  left: 55%;
}