body {margin: 0;padding: 0;background-color: #fff6e6;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: #363030;font-family: 'Roboto', sans-serif;font-size: 16px;-webkit-box-sizing: border-box;box-sizing: border-box;min-width: 320px;overflow: hidden;}.header {height: 40vh;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0;}.title {font-family: 'Roboto Mono', monospace;text-align: center;font-size: 35px;margin: 0;max-width: 315px;position: relative;}.eat {color: orangered;}.main {height: 40vh;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.main:hover .armleft {left: -50px;-webkit-transition: all ease 2s;transition: all ease 2s;}.main:hover .armright {left: 50px;-webkit-transition: all ease 2s;transition: all ease 2s;}.footer {height: 20vh;width: 100%;text-align: center;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.footer_text {font-size: 16px;margin: 0;padding: 0 15px;}.first-dialogue_wrapper {-webkit-animation-name: dialogue-blink;animation-name: dialogue-blink;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: 3;animation-iteration-count: 3;-webkit-animation-fill-mode: inherit;animation-fill-mode: inherit;}.hide-first-dialogue_wrapper {display: none;}.first_dialogue {position: absolute;top: -45px;left: 70px;width: 140px;padding: 5px;border-radius: 5px;border: 1px solid #363030;text-align: center;background-image: -webkit-gradient(linear, left bottom, left top, from(white), to(#fff6e6));background-image: linear-gradient(to top, white, #fff6e6);}.triangle {position: absolute;top: -15px;left: 105px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #363030;}.triangle-small {position: absolute;top: -16px;left: 106px;width: 0;height: 0;border-left: 9px solid transparent;border-right: 9px solid transparent;border-top: 9px solid white;}.hugme,.cursor_eye {visibility: hidden;position: absolute;padding: 5px;border-radius: 5px;-webkit-transition: background-color ease 2s, border-bottom ease 1s;transition: background-color ease 2s, border-bottom ease 1s;}.hugme {top: -60px;left: 20px;}.cursor_eye1 {top: -65px;left: -100px;width: 120px;}.cursor_eye2 {top: -40px;left: -60px;width: 150px;}.cursor_eye3 {top: -60px;width: 120px;}.body_monstruo {position: absolute;background-color: orange;width: 150px;height: 150px;border-radius: 50%;-webkit-box-shadow: inset 0 0 10px #f6e9f8;box-shadow: inset 0 0 10px #f6e9f8;}.body_eye {width: 20px;height: 20px;border-radius: 50%;background-image: radial-gradient(white 1%, black 10%, black 30%, white 40%);border: 3px solid purple;cursor: pointer;}.eye1 {position: relative;top: 10px;left: 20px;}.eye1:hover .cursor_eye1 {visibility: visible;border-bottom: 2px solid #441e18;background-color: white;}.eye2 {position: relative;top: -30px;left: 60px;}.eye2:hover .cursor_eye2 {visibility: visible;border-bottom: 2px solid #441e18;background-color: white;}.eye3 {position: relative;top: -40px;left: 100px;}.eye3:hover .cursor_eye3 {visibility: visible;border-bottom: 2px solid #441e18;background-color: white;}.body_eyelidup,.body_eyeliddown {width: 20px;height: 9px;background-color: purple;border: 3px solid purple;-webkit-animation-name: eyelid-dinamic;animation-name: eyelid-dinamic;-webkit-animation-duration: 2.5s;animation-duration: 2.5s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}.body_eyelidup {border-top-left-radius: 90px;border-top-right-radius: 90px;}.body_eyeliddown {border-bottom-left-radius: 90px;border-bottom-right-radius: 90px;}.eyelid1 {position: relative;top: -6px;left: -3px;}.eyelid2 {position: relative;top: -6px;left: -3px;}.eyelid3 {position: relative;top: -6px;left: -3px;}.eyelid4 {position: relative;top: -8px;left: -3px;}.eyelid5 {position: relative;top: -10px;left: -3px;}.eyelid6 {position: relative;top: -10px;left: -2px;}.mouth {border: 5px solid black;background-color: black;padding: 1px;border-top: transparent;width: 100px;height: 50px;border-bottom-left-radius: 90px;border-bottom-right-radius: 90px;position: relative;left: 20px;bottom: 20px;-webkit-transition: background-color ease 2s, -webkit-transform ease 5s;transition: background-color ease 2s, -webkit-transform ease 5s;transition: background-color ease 2s, transform ease 5s;transition: background-color ease 2s, transform ease 5s, -webkit-transform ease 5s;-webkit-animation-duration: 1s;animation-duration: 1s;cursor: pointer;}.mouth:hover {background-color: red;border-color: green;-webkit-transform: scale(4);transform: scale(4);}.mouth:hover .tooth {display: none;}.tooth {background-color: azure;-webkit-box-shadow: inset 10px 0 10px moccasin;box-shadow: inset 10px 0 10px moccasin;width: 10px;height: 15px;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;position: relative;left: 30px;}.seed {border-left: 3px solid transparent;border-right: 3px solid transparent;border-bottom: 6px solid black;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;position: absolute;}.seed1 {top: 20px;left: 15px;}.seed2 {top: 20px;left: 60px;}.seed3 {top: 34px;left: 45px;}.seed4 {top: 17px;left: 30px;}.seed5 {top: 28px;left: 75px;}.arm {width: 100px;height: 10px;background-color: purple;-webkit-box-shadow: 0 0 4px #46144e;box-shadow: 0 0 4px #46144e;position: relative;-webkit-animation-duration: 2.5s;animation-duration: 2.5s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;cursor: pointer;}.arm:hover .hugme {visibility: visible;border-bottom: 2px solid #441e18;background-color: white;}.armleft {-webkit-transform: rotate(35deg);transform: rotate(35deg);top: -30px;left: -5px;-webkit-animation-name: arm-left-dinamic;animation-name: arm-left-dinamic;}.armright {-webkit-transform: rotate(-35deg);transform: rotate(-35deg);top: -30px;left: 5px;-webkit-animation-name: arm-right-dinamic;animation-name: arm-right-dinamic;}.finger {width: 20px;height: 10px;background-color: purple;position: relative;border-top-left-radius: 50px;border-bottom-left-radius: 50px;}.finger1 {top: -9px;left: -10px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}.finger2 {top: -10px;left: -15px;}.finger3 {top: -11px;left: -10px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}.finger4 {top: -9px;left: 90px;-webkit-transform: rotate(-230deg);transform: rotate(-230deg);}.finger5 {top: -10px;left: 98px;-webkit-transform: rotate(-180deg);transform: rotate(-180deg);}.finger6 {top: -13px;left: 90px;-webkit-transform: rotate(-140deg);transform: rotate(-140deg);}@media all and (min-width: 768px) {.title {max-width: 520px;font-size: 45px;}}@-webkit-keyframes dialogue-blink {0% {opacity: 0;}50% {opacity: 1;}}@keyframes dialogue-blink {0% {opacity: 0;}50% {opacity: 1;}}@-webkit-keyframes eyelid-dinamic {0% {opacity: 0;}90% {opacity: 0;}95% {opacity: 1;}100% {opacity: 1;}}@keyframes eyelid-dinamic {0% {opacity: 0;}90% {opacity: 0;}95% {opacity: 1;}100% {opacity: 1;}}@-webkit-keyframes arm-right-dinamic {0% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg);}50% {-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}70% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg);}100% {-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}}@keyframes arm-right-dinamic {0% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg);}50% {-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}70% {-webkit-transform: rotate(-10deg);transform: rotate(-10deg);}100% {-webkit-transform: rotate(-5deg);transform: rotate(-5deg);}}@-webkit-keyframes arm-left-dinamic {0% {-webkit-transform: rotate(10deg);transform: rotate(10deg);}50% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}70% {-webkit-transform: rotate(10deg);transform: rotate(10deg);}100% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}}@keyframes arm-left-dinamic {0% {-webkit-transform: rotate(10deg);transform: rotate(10deg);}50% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}70% {-webkit-transform: rotate(10deg);transform: rotate(10deg);}100% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}}