#animate {
    z-index: 1;
    color: black;
    outline: none;
    border: none;
}
  
#animate:hover {
    cursor: pointer;
    animation: jelly 0.5s;
}
  
@keyframes jelly {
    0%,
    100% {
      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);
    }
}

    body{
        background-color: #f0ecff;
        font-family: 'Work Sans', sans-serif;
    }
    .alert {
        position: fixed;
        bottom: 0;
        right: 5px;
        width: 27%;
        z-index: 9999;
    }
    #comments .comment {
        margin: 0;
        border-bottom: 4px solid #ddd;
      }
      #comments .comment:last-child {
        border-bottom: none;
        margin-bottom: 8px;
    }

    #loader {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 99999;
      display: flex !important;
      justify-content: center;
      align-items: center;
      background-color: rgba(2, 2, 2, 0.336);
    }

    .lds-ripple,
    .lds-ripple div {
      box-sizing: border-box;
    }
    .lds-ripple {
      display: inline-block;
      position: relative;
      width: 96px;
      height: 96px;
    }
    .lds-ripple div {
      position: absolute;
      border: 4px solid currentColor;
      opacity: 1;
      border-radius: 50%;
      animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }
    .lds-ripple div:nth-child(2) {
      animation-delay: -0.5s;
    }
    @keyframes lds-ripple {
      0% {
        top: 36px;
        left: 36px;
        width: 8px;
        height: 8px;
        opacity: 0;
      }
      4.9% {
        top: 36px;
        left: 36px;
        width: 8px;
        height: 8px;
        opacity: 0;
      }
      5% {
        top: 36px;
        left: 36px;
        width: 8px;
        height: 8px;
        opacity: 1;
      }
      100% {
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0;
      }
    }