#character {
    position: relative;
    width: 500px;
    height: 500px;
    
    margin: 0 auto;
    
    
    
}


.character-wrapper {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-65%) scale(.5);
}

@media (max-width: 420px) {
    .character-wrapper {
        transform: translate(-60%, 10%) scale(.3);
    }
}

#character img {
  position: absolute;
}

#man {
  left: 0px;
  top: 0px;
  z-index: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}

#eyes {
  left: 338px;
  top: 150px;
  z-index: 2;


}

#glasses {
  left: 311px;
  top: 145px;
  z-index: 3;



}
#animation {
  left: 120px;
  top: 205px;
  z-index: 3;
  scale: .5;
  opacity: 1;
}
#book {
  left: -600px;
  top: -500px;
  
  scale: .7;
  opacity: 1;
  z-index: 4;
}