$main-color: #111;
$origin-eye-color: #eee;
$staring-eye-color: #00ffff;

.head {
  -webkit-backface-visibility: hidden;
  position: relative;
  margin: -250px auto;
  width: 80px;
  height: 80px;
  background-color: $main-color;
  border-radius: 50px;
  box-shadow: inset -4px 2px 0px 0px $origin-eye-color;
  animation: node 1.5s infinite alternate;
  animation-timing-function: ease-out;
}

.eye {
  width: 20px;
  height: 8px;
  background-color: $origin-eye-color;
  border-radius: 0px 0px 20px 20px;
  position: absolute;
  top: 35px;
  box-shadow: 0px 0px 0px 0px $origin-eye-color;
  animation: stare 1.5s infinite alternate;
  animation-timing-function: ease-out;
}

.left-eye {
  composes: eye;
  left: 10px;
}

.right-eye {
  composes: eye;
  left: 50px;
}


.body {
  position: relative;
  margin: 90px auto;
  width: 140px;
  height: 120px;
  background-color: $main-color;
  border-radius: 50px/25px;
  box-shadow: inset -5px 2px 0px 0px;
  color: $origin-eye-color;
  animation: node2 1.5s infinite alternate ease-out;
}

@keyframes breath {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

@keyframes stare {
  0% {
    background-color: $origin-eye-color;
    box-shadow: 0px 0px 0px 0px $staring-eye-color;
  }
  50% {
    background-color: $staring-eye-color;
    box-shadow: 0px 0px 30px 0px $staring-eye-color;
  }
  100% {
    background-color: $origin-eye-color;
    box-shadow: 0px 0px 0px 0px $staring-eye-color;
  }
}

@keyframes node {
  0% {
    top: 0px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0px;
  }
}

@keyframes node2 {
  0% {
    top: -5px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: -5px;
  }
}

.circ {
  -webkit-backface-visibility: hidden;
  margin: 60px auto;
  width: 180px;
  height: 180px;
  background-color: transparent;
  position: relative;
  z-index: -1;
  left: 0%;
  top: 20%;
  overflow: hidden;
}


.load {
  position: absolute;
  width: 100px;
  height: 20px;
  margin: -10px auto;
  -webkit-font-smoothing: antialiased;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: white;
  left: 10%;
  top: 5%;
  animation: breath 0.75s infinite alternate ease-out;
}


