.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #ddbea8!important;
}
.bg-nav {
    --bs-bg-opacity: 1;
    background-color: #160f29!important;
}
.bg-button {
    --bs-bg-opacity: 1;
    background-color: #368f8b!important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.bg-ming {
    --bs-bg-opacity: 1;
    background-color: #246a73!important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.bg-light {
    --bs-bg-opacity: 1;
    background-color: #f3dfc1!important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.mainpage {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 height: 100%;
 width: 100%;
 z-index: 1000000;
 background: rgba(0, 0, 0, 0.9);
}
.tech-svg {
  height: 50px;
  width: 50px;
}

#particles-js {
  width: 100%;
  height: 100%;
  background-color: #ddbea8;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.animate {
  animation-duration: 0.5s;
  animation-name: animate-fade;
  animation-delay: 0.5s;
  animation-fill-mode: backwards;
}

@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.button-animation:hover
{
  animation-duration: 2s;
  animation-name: animate-pulse;
  animation-delay: 0s;
  animation-fill-mode: backwards;
  animation-iteration-count: infinite;
}

@keyframes animate-pulse {
  0% { border-radius: 0px; }
  30% {  transform: scale(1.05,1.05); }
  50% {  }
  70% { border-radius: 0px; }
  100% { border-radius: 0px; }
}