html, body {  height: 100%;}body {  align-items: center;  background-color: wheat;  display: flex;  justify-content: center;  overflow: hidden;}.container {  border-radius: 50%;  margin: 1em auto;  align-items: center;  width: 90vh;  height: 90vh;  display: flex;  justify-content: center;  overflow: hidden;  position: relative;  -webkit-transform: translate3d(0, 0, 0);          transform: translate3d(0, 0, 0);}.center {  align-items: center;  background-color: wheat;  border-radius: 50%;  box-shadow: inset 0px 0px 50px -5px rgba(0, 0, 0, 0.45);  display: flex;  height: 75%;  justify-content: center;  position: relative;  overflow: hidden;  width: 75%;  z-index: 10;}.panda {  width: 80%;  z-index: 10;}.body {  position: absolute;  width: 85%;  height: 85%;  background: black;  border-radius: 50%;  pointer-events: none;  top: 50%;}.chest {  position: absolute;  width: 70%;  height: 70%;  background: white;  border-radius: 50%;  pointer-events: none;  top: 85%;}.key {  overflow: hidden;  position: absolute;  top: 0;  right: 0;  -webkit-transform-origin: 0% 100%;          transform-origin: 0% 100%;  width: 50%;  height: 50%;  transition: background 100ms ease-in-out;}.key:before {  border-radius: 50%;  content: '';  display: block;  height: 200%;  left: -100%;  position: absolute;  text-align: center;  width: 200%;}.key:nth-child(1) {  background: #40a4d8;  -webkit-transform: rotate(-45deg) skewX(-45deg);          transform: rotate(-45deg) skewX(-45deg);  z-index: 8;}.key:nth-child(1):hover {  background: #80c2e5;}.key:nth-child(2) {  background: #b2c225;  -webkit-transform: rotate(0deg) skewX(-45deg);          transform: rotate(0deg) skewX(-45deg);  z-index: 7;}.key:nth-child(2):hover {  background: #d1df55;}.key:nth-child(3) {  background: #fecc2f;  -webkit-transform: rotate(45deg) skewX(-45deg);          transform: rotate(45deg) skewX(-45deg);  z-index: 6;}.key:nth-child(3):hover {  background: #fedf7b;}.key:nth-child(4) {  background: #f9a228;  -webkit-transform: rotate(90deg) skewX(-45deg);          transform: rotate(90deg) skewX(-45deg);  z-index: 5;}.key:nth-child(4):hover {  background: #fbc272;}.key:nth-child(5) {  background: #f6621f;  -webkit-transform: rotate(135deg) skewX(-45deg);          transform: rotate(135deg) skewX(-45deg);  z-index: 4;}.key:nth-child(5):hover {  background: #f99669;}.key:nth-child(6) {  background: #db3838;  -webkit-transform: rotate(180deg) skewX(-45deg);          transform: rotate(180deg) skewX(-45deg);  z-index: 4;}.key:nth-child(6):hover {  background: #e77979;}.key:nth-child(7) {  background: #ee657a;  -webkit-transform: rotate(225deg) skewX(-45deg);          transform: rotate(225deg) skewX(-45deg);  z-index: 3;}.key:nth-child(7):hover {  background: #f6aab6;}.key:nth-child(8) {  background: #a363d9;  -webkit-transform: rotate(270deg) skewX(-45deg);          transform: rotate(270deg) skewX(-45deg);  z-index: 2;}.key:nth-child(8):hover {  background: #c7a1e8;}.mouth {  transition: ry 150ms ease;}.idle .feature {  -webkit-animation: idleFace 3s ease-in-out infinite alternate;          animation: idleFace 3s ease-in-out infinite alternate;}.idle .ear {  -webkit-animation: idleEars 3s ease-in-out infinite alternate;          animation: idleEars 3s ease-in-out infinite alternate;}.idle .eye {  -webkit-animation: idleFace 3s ease-in-out infinite alternate;          animation: idleFace 3s ease-in-out infinite alternate;}.idle .mouth {  -webkit-transform: scaleX(1.3) scaleY(2);          transform: scaleX(1.3) scaleY(2);  -webkit-animation: idleMouth 3s ease-in-out infinite alternate;          animation: idleMouth 3s ease-in-out infinite alternate;  -webkit-transform-origin: center 80%;          transform-origin: center 80%;}@-webkit-keyframes idleMouth {  20% {    -webkit-transform: scaleX(1.3) scaleY(2);            transform: scaleX(1.3) scaleY(2);  }  90% {    -webkit-transform: scaleX(0.7);            transform: scaleX(0.7);  }  100% {    -webkit-transform: scaleX(0.7);            transform: scaleX(0.7);  }}@keyframes idleMouth {  20% {    -webkit-transform: scaleX(1.3) scaleY(2);            transform: scaleX(1.3) scaleY(2);  }  90% {    -webkit-transform: scaleX(0.7);            transform: scaleX(0.7);  }  100% {    -webkit-transform: scaleX(0.7);            transform: scaleX(0.7);  }}@-webkit-keyframes idleFace {  20% {    -webkit-transform: translateY(0);            transform: translateY(0);  }  80% {    -webkit-transform: translateY(7px);            transform: translateY(7px);  }  100% {    -webkit-transform: translateY(7px);            transform: translateY(7px);  }}@keyframes idleFace {  20% {    -webkit-transform: translateY(0);            transform: translateY(0);  }  80% {    -webkit-transform: translateY(7px);            transform: translateY(7px);  }  100% {    -webkit-transform: translateY(7px);            transform: translateY(7px);  }}@-webkit-keyframes idleEars {  20% {    -webkit-transform: translateY(0);            transform: translateY(0);  }  80% {    -webkit-transform: translateY(-5px);            transform: translateY(-5px);  }  100% {    -webkit-transform: translateY(-5px);            transform: translateY(-5px);  }}@keyframes idleEars {  20% {    -webkit-transform: translateY(0);            transform: translateY(0);  }  80% {    -webkit-transform: translateY(-5px);            transform: translateY(-5px);  }  100% {    -webkit-transform: translateY(-5px);            transform: translateY(-5px);  }}.twitter__link {  cursor: pointer;  position: absolute;  right: 10px;  top: 12px;  z-index: -1;  background: #00aced;  border-radius: 20px;  height: 30px;  text-decoration: none;  padding-right: 10px;  justify-content: space-between;  font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';  font-weight: 600;  display: flex;  align-items: center;  color: #fff;  font-size: 14px;  width: 74px;  opacity: 0.4;  z-index: 10;}.twitter__link:hover {  opacity: 1;}.twitter__icon {  height: 30px;}