body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--body-bg) !important;
}

#main, #main-container {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

.profile-pic {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.shake-hover:hover {
    animation: shake 0.5s;
    animation-iteration-count: infinite;

}


.text-white, .text-white  {
  color: aliceblue;
}


.bkgrd-image {
  background: url("/Assets/photos/bkgrd-img1.jpg");
  background-repeat:no-repeat;
  background-size: cover;
  flex: 1 0 auto;
}

.bg-trans-black {
  background-color: rgba(0, 0, 0, 0.8)
;} 


.btn {
    transition: transform 10s;
}
.btn-shake:hover , .bi:hover{
    animation: shake 1.2s;
    /* animation: shake 1s; */
    animation-iteration-count: infinite;
    /* animation-fill-mode: both; */
    transform: translate(-10, -10px);
    @media (min-width: 992px) { 
        transform: translate(-10, -10px);
        

     }
}
  
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); } 
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

  @keyframes hover-Animation {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    0% { transform: translate(-10px, 1px) rotate(0deg); }
  }


@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}

.btn-treelinks {
    @media (min-width: 992px) { 
        width: 25%;
     }
}