#heading {
    margin-bottom: 100px;
    font-size: xx-large;
    text-align: center;
}

#balloon-map {
    width: 650px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.balloon {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    animation: float 6s ease-in-out infinite;
}

.balloon.popped {
    visibility: hidden;
}

.balloon:after {
    position: absolute;
    background: inherit;
    bottom: -8px;
    left:19px;
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 20px solid white;
  }
  
  .balloon:hover{ animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; }
  
  /* ANIMATIONS */
  @keyframes float {
      0% {
          box-shadow: 0 5px 5px 0px rgba(0,0,0,0.6);
          transform: translatey(0px);
      }
      50% {
          box-shadow: 0 5px 5px 0px rgba(0,0,0,0.2);
          transform: translatey(-20px);
      }
      100% {
          box-shadow: 0 5px 5px 0px rgba(0,0,0,0.6);
          transform: translatey(0px);
      }
  }
  
  @keyframes shake {
      10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }
      
      20%, 80% {
        transform: translate3d(2px, 0, 0);
      }
    
      30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
      }
    
      40%, 60% {
        transform: translate3d(4px, 0, 0);
      }
    }