@import url('https://fonts.googleapis.com/css2?family=Agbalumo&family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Agbalumo&display=swap');
.agbalumo-regular {
    font-family: "Agbalumo", system-ui;
    font-weight: 400;
    font-style: normal;
}

.braket{
    color:#808080
}
.tag-name{
    color:#569cd6;
}
.attr-name{
    color:#9cdcfd;
}
.string-text{
    color:#ce9178;
}
.comment-text{
    color:#6a9955;
}
.php-function-name{
    color:#dcdcaa;
}
.php-number{
    color:#b5cea8;
}
.php-for{
    color:#c586c0;
}
.php-class{
    color:#4ec9b0;
}
.niceText {
    background: -webkit-linear-gradient(-180deg,#0d6efd, #cb70d5);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.niceTextp {
    color: #cb70d5;
}

.right-0{
    right: 0;
}
.card-code .card-body p {
    word-break: keep-all;
}



.corner-progress{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 140px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
  z-index: 9999;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

.corner-progress::before{
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  border-radius: 999px;
  background: currentColor; /* set color via `color:` */
  animation: cornerProgress 0.5s ease-in-out infinite;
}

@keyframes cornerProgress{
  0%   { transform: translateX(-120%); opacity: .35; }
  50%  { opacity: 1; }
  100% { transform: translateX(260%); opacity: .35; }
}

/* example color */
.corner-progress{ color: #4ec9b0; }