html {
  overflow-x: hidden;
}

main {
  width: 100vw;
  height: 100vh;
  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;
}

/* ----- AVATAR ----------------------------------- */
.avatar {
  max-width: 100%;
  height: 85vh;
}

@media (max-width: 768px) {
  .avatar {
    height: 60vh;
  }
}

.avatar #icon-javascript,
.avatar #icon-php,
.avatar #icon-css,
.avatar #icon-git,
.avatar #icon-html,
.avatar #icon-react,
.avatar #hair-1,
.avatar #hair-2,
.avatar #hair-4,
.avatar #hair-3,
.avatar #hair-5,
.avatar #hair-7,
.avatar #hair-8,
.avatar #hair-1-shadow,
.avatar #hair-2-shadow,
.avatar #hair-4-shadow,
.avatar #hair-3-shadow,
.avatar #hair-5-shadow {
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  transform-box: fill-box;
}

.avatar #head {
  transform-box: fill-box;
  -webkit-transform-origin: 50% 80%;
          transform-origin: 50% 80%;
  /*animation: head-move 6s ease-in-out infinite forwards;*/
}

.avatar #hair-1, .avatar #hair-2, .avatar #hair-3, .avatar #hair-4, .avatar #hair-5, .avatar #hair-7, .avatar #hair-8 {
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
}

.avatar #hair-1-shadow, .avatar #hair-2-shadow, .avatar #hair-4-shadow, .avatar #hair-3-shadow, .avatar #hair-5-shadow {
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}

.avatar #hair-1, .avatar #hair-1-shadow {
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-animation: hair-move 5s 0.5s ease-in-out infinite both;
          animation: hair-move 5s 0.5s ease-in-out infinite both;
}

.avatar #hair-2, .avatar #hair-2-shadow {
  -webkit-transform-origin: 25% 0;
          transform-origin: 25% 0;
  -webkit-animation: hair-move 5s 0.1s ease-in-out infinite both;
          animation: hair-move 5s 0.1s ease-in-out infinite both;
}

.avatar #hair-4, .avatar #hair-4-shadow {
  -webkit-transform-origin: 25% 0;
          transform-origin: 25% 0;
  -webkit-animation: hair-move 5s 0.4s ease-in-out infinite both;
          animation: hair-move 5s 0.4s ease-in-out infinite both;
}

.avatar #hair-3, .avatar #hair-3-shadow {
  -webkit-transform-origin: 25% 0;
          transform-origin: 25% 0;
  -webkit-animation: hair-move 5s 0.2s ease-in-out infinite both;
          animation: hair-move 5s 0.2s ease-in-out infinite both;
}

.avatar #hair-5, .avatar #hair-5-shadow {
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation: hair-move 5s 0.6s ease-in-out infinite both;
          animation: hair-move 5s 0.6s ease-in-out infinite both;
}

.avatar #hair-7, .avatar #hair-7-shadow {
  -webkit-transform-origin: 80% 100%;
          transform-origin: 80% 100%;
  -webkit-animation: hair-move 8s 0.6s ease-in-out infinite both;
          animation: hair-move 8s 0.6s ease-in-out infinite both;
}

.avatar #hair-8, .avatar #hair-8-shadow {
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-animation: hair-move 10s 0.2s ease-in-out infinite both;
          animation: hair-move 10s 0.2s ease-in-out infinite both;
}

.avatar #eyes-closed {
  opacity: 0;
  -webkit-animation: blink-close 6s infinite forwards;
          animation: blink-close 6s infinite forwards;
}

.avatar #eyes-open {
  opacity: 1;
  -webkit-animation: blink-open 6s infinite forwards;
          animation: blink-open 6s infinite forwards;
}

.avatar .hexagon-shape {
  stroke: teal;
  -webkit-animation: hexagon 10s ease-in-out infinite both;
          animation: hexagon 10s ease-in-out infinite both;
}

.avatar .icon {
  fill: teal;
}

.avatar #icon-javascript {
  -webkit-animation: icon-rotate 10s linear infinite both;
          animation: icon-rotate 10s linear infinite both;
}

.avatar #icon-php {
  -webkit-animation: icon-rotate 10s linear infinite both;
          animation: icon-rotate 10s linear infinite both;
}

.avatar #icon-css {
  -webkit-animation: icon-rotate 10s linear infinite both;
          animation: icon-rotate 10s linear infinite both;
}

.avatar #icon-git {
  -webkit-animation: icon-rotate 10s linear infinite both;
          animation: icon-rotate 10s linear infinite both;
}

.avatar #icon-html {
  -webkit-animation: icon-rotate 10s linear infinite both;
          animation: icon-rotate 10s linear infinite both;
}

.avatar #icon-react {
  -webkit-animation: icon-rotate 10s linear infinite both;
          animation: icon-rotate 10s linear infinite both;
}

@-webkit-keyframes head-move {}

@keyframes head-move {}@-webkit-keyframes hair-move {
  10% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  25% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  50% {
  }
  75% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}@keyframes hair-move {
  10% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  25% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  50% {
  }
  75% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@-webkit-keyframes blink-open {
  98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes blink-open {
  98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes blink-close {
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink-close {
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes hexagon {
  0%,
  100% {
    stroke: teal;
  }
  50% {
    stroke: #004280;
  }
}

@keyframes hexagon {
  0%,
  100% {
    stroke: teal;
  }
  50% {
    stroke: #004280;
  }
}

@-webkit-keyframes icon-rotate {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(0.8);
            transform: rotate(0deg) scale(0.8);
  }
  25% {
    -webkit-transform: rotate(-10deg) scale(0.9);
            transform: rotate(-10deg) scale(0.9);
  }
  50% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  75% {
    -webkit-transform: rotate(10deg) scale(0.9);
            transform: rotate(10deg) scale(0.9);
  }
}

@keyframes icon-rotate {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(0.8);
            transform: rotate(0deg) scale(0.8);
  }
  25% {
    -webkit-transform: rotate(-10deg) scale(0.9);
            transform: rotate(-10deg) scale(0.9);
  }
  50% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  75% {
    -webkit-transform: rotate(10deg) scale(0.9);
            transform: rotate(10deg) scale(0.9);
  }
}
/*# sourceMappingURL=style.css.map */