/* *{
    box-sizing: border-box;
}


section.top h1{
    font-size: 25px;
} */
button {
  transition: all 0.15s ease;
}
.buttons button:hover {
  background: #007acc;
}

.add-button {
  padding: 8px 16px;
  border: none;
  outline: none;
  color: rgb(2, 131, 167);
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 0px;
}
.add-button::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #333;
  left: 0;
  top: 0;
  border-radius: 0px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: all 0.25s ease-in-out;
}
.add-button::before {
  content: "";
  background: linear-gradient(
    45deg,
    rgb(255, 115, 0),
    rgb(255, 0, 0),
    rgb(119, 255, 0),
    rgb(0, 255, 166),
    rgb(0, 85, 255),
    rgb(144, 0, 255),
    rgb(255, 0, 191)
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 2px);
  height: calc(100% + 5px);
  filter: blur(8px);
  transition: all 0.15s ease-in-out;
  border-radius: 0px;
  opacity: 0;
  animation: glowing 30s linear infinite;
}
.add-button:hover::before {
  opacity: 1;
}
.add-button:active::after {
  opacity: 0;
}
.add-button:active::before {
  filter: blur(8px);
}
@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}