mark{
  background-color: rgb(244 243 243 / 72%);
}

#scrolling::-webkit-scrollbar {
  width: 10px !important;
height: 10px !important;
}

.my-float {
  padding-top:15px;
  font-size: 30px;
  z-index: 9999;
}

.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 100px;
  right: 25px;
  background-color: #0C9;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #000;
  z-index: 9999;
}


.my-float2 {
  padding-top:15px;
  font-size: 30px;
  z-index: 9999;
}

.float:hover{
  color: #FFF;
  animation: pulse 1.5s infinite;
}

.float2 {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 25px;
  background-color: #00cc10;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #000;
  z-index: 9999;
  transition: ease 2s;
}

.float2:hover
{
  
  color:#FFF;
  animation: buzz-out-on-hover 0.7s infinite;
}


@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
	}
	80% {
		box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
	}
}



@keyframes buzz-out-on-hover {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}


.svgbutton
{
   
}

@media only screen and (max-width: 600px)
{
    .svgbutton
    {
         width:72px;  margin-left:20px; margin-right: 15px;
    }
}

.nav-link
{
transition: ease-in-out 0.2s;
}

.nav-link:hover
{
  font-weight: bold;
}

svg
{
  transition: ease-in-out 0.2s;
}

.nav-link:hover svg
{
  fill:#151515 ;
  animation: shake 1s forwards;
  
}

@keyframes shake
{
  0%{transform: rotate(0deg); fill:#151515}
  10%{transform: rotate(35deg);}
  20%{transform: rotate(18deg);}
  30%{transform: rotate(-18deg);fill:#151515}
  60%{transform: rotate(0deg);fill:#151515}

  80%{transform: rotate(22deg);fill:#151515}
  90%{transform: rotate(-20deg);}
  100%{transform: rotate(0deg);fill: #0437F2;}
}



#Ideas::-webkit-scrollbar-button
{
  background-color: #f8f9fa;
  cursor: grabbing;
}

#Ideas::-webkit-scrollbar {
  width: 12px;
  cursor: grabbing;
}

#Ideas::-webkit-scrollbar-track {
 
  border-radius: 10px;
  cursor: grabbing;
}

#Ideas::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  cursor: grabbing;
}