.mascot-container{
    position:absolute;
    bottom:-10;
    right: 20;
    width:150px;
    height:150px;
    z-index:100;
}

.mascot-container .mascot-image{
    width:150px;
    height:150px;
    z-index:1001;
    cursor:grabbing;
}

.mascot-container .mascot-fart-cloud{
    background-size: 100% 100% ;
    width: 174px;
    height: 178px;
    position:absolute;
    z-index: 1000;
    top: 40px;
    left: -120px;
}

.correct-anwer-image{
    background-image: url("media/shibaHappy.png");
}
.incorrect-anwer-image{
    background-image: url("media/shibaSad.png");
}
.confused-image{
   background-image: url("media/shibaConfused.png");
}
.bubble {
    position: absolute;
    bottom:120px;
    right:10px;
    font-family: sans-serif;
    font-size: 1.125rem;
    line-height: 24px;
    min-width: 300px;
    background: #fff;
    border-radius: 30px;
    padding: 24px;
    text-align: center;
    color: #000;
    z-index:101;
    opacity:.80 
}
.bubble-bottom-left:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 24px solid #fff;
    border-right: 12px solid transparent;
    border-top: 12px solid #fff;
    border-bottom: 20px solid transparent;
    left: 32px;
    bottom: -32px;
    z-index:101;
    opacity:.80 
}
.bubble-bottom-right:before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 24px solid #fff;
    border-right: 12px solid transparent;
    border-top: 12px solid #fff;
    border-bottom: 20px solid transparent;
    right: 32px;
    bottom: -24px;
    z-index:101;
    opacity:.80 
}

.leave-right {
    animation: leave-right 5s linear;
    animation-iteration-count: 1;
  }
  @keyframes leave-right {
      0% {
      opacity: 1;
      transform: translateX(0px) rotate(0deg);
    }
    100% {
      opacity: 0;
      transform: translateX(100%) translateY(-300%) rotate(120deg);
    }
}

.hit-impact {
    animation: hit-impact 0.05s linear 1;
  }
  @keyframes hit-impact {
    0% {
        opacity: 1;
    }
    50% {
        transform:translateY(-15%);
        transform: scale(.80);
    }
      100% { transform:translateY(0); }
  }

  @keyframes idle-dance {
    from, to { transform: scale(1, 1); }
    25% { transform: scale(0.9, 1.1); }
    50% { transform: scale(1.1, 0.9); }
    75% { transform: scale(0.95, 1.05); }
}

.close-speech-link{
    text-decoration: underline;
    color: #04AA6D;
    cursor:pointer;
}