/*-------------------------------------------------------------*/
/* GENERAL PAGE SETTINGS
/*-------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
body{
    font-family: 'Indie Flower', 'Roboto';
}

/*-------------------------------------------------------------*/
/* PROGRESS BAR
/*-------------------------------------------------------------*/

.progress-bar{
    width: 100%;
    height: 50px;
    margin-bottom: 30px;
    line-height: 50px;
    font-size: 2em;
    border: 3px solid #555;
    border-radius: 20px;
}

.progress-bar-fill{
    border-radius: 15px 0px 0px 15px;
    background-color: #ff0000;
    height: 100%;
    float: left;
    transition: width 2s;
}

.progress-bar-fill span{
    padding-left: 10px;
    color: #fff;
}

.progress-bar-empty{
    background-color: #ddd;
    border-radius: 0px 15px 15px 0px;
    height: 100%;
    float: left;
    width: auto;
    transition: width 2s;
}

.animated-gradient {
    /* background: repeating-linear-gradient(to right, red 0%, blue 50%, red 100%); */
    width: 100%;
    background-size: 200% auto;
    background-position: 0 100%;
    animation: gradient 5s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
  }
  
/*-------------------------------------------------------------*/
/* HEAD IMAGE
/*-------------------------------------------------------------*/

.head-wrapper{
    height: 100px;
    width: 0px;
    float: left;
}

.head-wrapper img{
    position: relative;
    top: -20px;
    left: -40px;
    max-height: 100%;
    animation: shake 15s infinite linear;
}

/*-------------------------------------------------------------*/
/* ANIMATIONS
/*-------------------------------------------------------------*/

@keyframes shake {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    5% { transform: translate(1px, 1px) rotate(3deg); }
    10% { transform: translate(0px, -1px) rotate(2deg); }
     15% { transform: translate(-1px, 1px) rotate(3deg); }
    20% { transform: translate(-1px, 1px) rotate(-5deg); }
    20% { transform: translate(1px, 0px) rotate(-3deg); }
    25% { transform: translate(0px, 1px) rotate(-2deg); }
    30% { transform: translate(1px, 0px) rotate(3deg); }
    35% { transform: translate(0px, 1px) rotate(5deg); }
    40% { transform: translate(1px, -1px) rotate(3deg); }
    45% { transform: translate(0px, 1px) rotate(8deg); }
    50% { transform: translate(-1px, 0px) rotate(-4deg); }
    55% { transform: translate(0px, 1px) rotate(-2deg); }
    60% { transform: translate(-1px, -1px) rotate(3deg); }
    65% { transform: translate(0px, 1px) rotate(-2deg); }
    70% { transform: translate(0px, 0px) rotate(-3deg); }
    75% { transform: translate(0px, 1px) rotate(3deg); }
    80% { transform: translate(-1px, 1px) rotate(4deg); }
    85% { transform: translate(0px, 1px) rotate(6deg); }
    90% { transform: translate(1px, 1px) rotate(3deg); }
    95% { transform: translate(0px, 1px) rotate(1deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
  }

  @keyframes gradient { 
    0%   { background-position: 0 0; }
    100% { background-position: -200% 0; }
  }