.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hourglass {
  height: 100px;
  width: 50px;
  border-bottom: 5px solid #5b4c34;
  border-top: 5px solid #5b4c34;
  position: relative;
  overflow: hidden;
  background: #005eff6b;
  animation:  rotateGlass 6s infinite linear;
}

.hourglass::after {
  content: '';
  border: 50px solid transparent;
  border-left: 25px solid white;
  border-right: 25px solid white;
  position: absolute;
  bottom: 0;
  left: 0px;
}

.sand::before {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  background-color: #f0ca7d;    
  -webkit-animation: dropsand 6s infinite linear;
}

.sand::after {
  content: '';
  position: absolute; 
  border-right: 25px solid transparent;
  border-top: 200px solid rgba(255,255,255, 0.4);
}

@keyframes rotateGlass {
  40%, 100% {transform: rotate(0deg);}
  50%, 90% {transform: rotate(180deg);}
}

@-webkit-keyframes dropsand {
  25%, 50% {
    bottom: 0;
    top: 50%;
  }
  0%, 75% {
    top: 0;
    bottom: 50%; 
  }
}