body {
    padding-bottom: 20px;
}
  
.navbar {
    margin-bottom: 20px;
}
  
i {
    padding: .5em;
    align-items: flex-start;
}

i.fa-house {
    color:#ff00aa;
}


li a {
    color:rgb(167, 255, 255) !important;
}

li :hover{
    color: rgb(255, 221, 238) !important;
}

/*animation to change color and expand*/
.expandAnimation {
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(203, 253, 255, 0.356));
    /* background-color: rgb(0, 247, 255); */
    /* border-left: 3px solid rgba(95, 250, 255, 0.767); */
    border-top: 2px solid rgba(227, 254, 255, 0.212);
    border-bottom: 3px solid rgba(73, 73, 73, 0.322);
    border-radius: 50px;
    width: 120px;
    height: 50px;
    transition: width 1s !important;
}

.expandAnimation:hover {
    background-color: rgb(255, 29, 146);
    box-shadow: 3px 5px 8px 2px #97376f9f;
    border-top: 2px solid rgba(255, 176, 217, 0.685);
    border-bottom: 3px solid rgba(146, 47, 98, 0.514);
    width: 220px !important;
    transition-timing-function: ease !important;
    
}

/*class to make background blur effect to navbar/ offcanvas*/
/* .navbarBlurredBackground {
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(0, 247, 255, 0.781)) !important;
    backdrop-filter: blur(10px);
    -webkit-filter: blur(8px);
} */


.bg-bubbles {
    height:200px;
    width: 200px;
    border-radius: 100px;
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(0, 247, 255, 0.781)) !important;
    background: transparent;
    backdrop-filter: blur(10px);
    -webkit-filter: blur(8px);
}

.offcanvas-backdrop.show {
    opacity: 1;
    background-color: rgba(61, 61, 61, 0.171);
    backdrop-filter: blur(8px); 
  }