@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
html,
body {
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  background-color: var(--audium-background);
}

body.inter {
  font-family: "Inter", sans-serif !important;
}

.logo {
  letter-spacing: -1px;
}

.audium-circle {
  border-radius: 100%;
  aspect-ratio: 1/1;
}

.is-absolute {
  position: absolute;
}

.is-top-0 {
  top: 0;
}

.is-left-0 {
  left: 0;
}

.is-right-0 {
  right: 0;
}

:root {
  --audium-base-s: 50%;
  --audium-base-l: 50%;
  --audium-light-l: 90%;
  --audium-dark-l: 30%;
  --audium-lightest-l: 95%;
  --audium-darkest-l: 20%;
  --audium-red-h: 0deg;
  --audium-blue-h: 200deg;
  --audium-pink-h: 310deg;
  --audium-purple-h: 245deg;
  --audium-gray: hsl(0deg 0 var(--audium-base-l));
  --audium-gray-light: hsl(0deg 0 var(--audium-light-l));
  --audium-gray-lightest: hsl(0deg 0 var(--audium-lightest-l));
  --audium-gray-dark: hsl(0deg 0 var(--audium-dark-l));
  --audium-gray-darkest: hsl(0deg 0 var(--audium-darkest-l));
  --audium-pink: hsl(var(--audium-pink-h) var(--audium-base-s) var(--audium-base-l));
  --audium-blue: hsl(var(--audium-blue-h) var(--audium-base-s) var(--audium-base-l));
  --audium-red: hsl(var(--audium-red-h) var(--audium-base-s) var(--audium-base-l));
  --audium-purple: hsl(var(--audium-purple-h) var(--audium-base-s) var(--audium-base-l));
  --audium-blue-bold: hsl(217.22deg 91.22% 59.8%);
  --audium-pink-light: hsl(var(--audium-pink-h) var(--audium-base-s) var(--audium-light-l));
  --audium-blue-light: hsl(var(--audium-blue-h) var(--audium-base-s) var(--audium-light-l));
  --audium-blue-dark: hsl(var(--audium-blue-h) var(--audium-base-s) var(--audium-dark-l));
  --audium-pink-dark: hsl(var(--audium-pink-h) var(--audium-base-s) var(--audium-dark-l));
  --audium-primary: var(--audium-purple);
  --audium-purple-base: var(--audium-primary);
  --audium-purple-light: hsl(var(--audium-purple-h) var(--audium-base-s) var(--audium-light-l));
  --audium-purple-dark: hsl(var(--audium-purple-h) var(--audium-base-s) var(--audium-dark-l));
  --audium-gradient: linear-gradient(90deg, hsl(var(--audium-purple-h), 70%, 50%) 0, hsl(var(--audium-pink-h), 70%, 50%) 100%);
  --audium-gradient-stretch: linear-gradient(90deg, hsl(var(--audium-purple-h), 70%, 50%) 0, hsl(var(--audium-pink-h), 70%, 50%) 150%);
  --audium-accent-color: var(--audium-pink);
  --audium-mellow-start: hsl(61.65, 100%, 50%);
  --audium-melllow-end: hsl(159.1, 64.85%, 53.14%);
  --audium-blue-red-gradient: linear-gradient(110deg, var(--audium-blue) 10%, var(--audium-pink) 80%);
  --audium-orange-gradient: linear-gradient(90deg, var(--audium-gradient-orange-start), var(--audium-gradient-orange-end) 100%);
  --audium-mellow-gradient: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%);
  --audium-disco-gradient: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
  --audium-gradient-primary-start: #FC466B;
  --audium-gradient-primary-midpoint: #FC466B;
  --audium-gradient-primary-end: #3F5EFB;
  --audium-gradient-angle: 150deg;
  --audium-gradient-primary: linear-gradient(var(--audium-gradient-angle), var(--audium-pink) 10%, var(--audium-purple-base) 75%) !important;
  --audium-foreground: var(--bulma-foreground);
  --audium-background: var(--bulma-background);
  --bulma-link-h: var(--audium-a);
  --bulma-modal-background-background-color: transparent;
}

.is-background-red {
  background-color: var(--audium-red);
  color: var(--audium-background-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --audium-background-color: black;
    --audium-foreground-color: white;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --audium-background-color: white;
    --audium-foreground-color: black;
  }
}
body[data-theme=light] :root,
html[data-theme=light] > body :root {
  --audium-background-color: white;
  --audium-foreground-color: black;
}

html[data-theme=dark] > body :root,
body[data-theme=dark] :root {
  --audium-background-color: black;
  --audium-foreground-color: white;
}

body {
  background-color: var(--audium-background-color);
  color: var(--audium-foreground-color);
}

.audium-color-primary {
  color: var(--audium-blue);
}

.audium-color-primary-dark {
  color: var(--audium-purple-dark);
}

.audium-color-secondary {
  color: var(--audium-pink);
}

.audium-background-color-secondary {
  background-color: var(--audium-pink);
}

.audium-background-color-primary {
  background-color: var(--audium-blue);
  color: white;
}

.audium-background-color-primary-dark {
  background-color: var(--audium-purple-dark);
  color: white;
}

.audium-color-pink {
  color: var(--audium-pink);
}
.audium-color-pink.audium-color-light {
  color: var(--audium-pink-light);
}

.audium-color-purple {
  color: var(--audium-purple);
}
.audium-color-purple.audium-color-light {
  color: var(--audium-purple-light);
}

.audium-circle {
  aspect-ratio: 1/1;
  border-radius: 100%;
}

.audium-color-red {
  color: var(--audium-red);
}

.audium-background-red {
  background-color: var(--audium-red);
  color: white;
}

.audium-color-red {
  color: var(--audium-red);
}

.tabs {
  --bulma-tabs-link-active-border-bottom-color: var(--audium-accent-color);
  --bulma-tabs-link-active-color: var(--audium-accent-color);
}

.aud-bullet-after:not(:last-child)::after {
  content: "•";
  color: var(--audium-accent-color);
  margin-left: 0.25em;
  margin-right: 0.25em;
}

.navbar .navbar-brand a.is-active {
  color: var(--audium-accent-color) !important;
}

.is-accent-foreground {
  color: var(--audium-accent-color);
}

.button.is-primary {
  color: white;
  background: var(--audium-gradient);
}

.logo i.fa-icon {
  background-image: var(--audium-gradient);
  color: transparent;
  background-clip: text;
}

.is-accent-background {
  color: var(--audium-background);
  background-color: var(--audium-pink);
}

.is-accent-border {
  color: var(--audium-foreground);
  border-color: var(--audium-blue);
}

.is-gradient-purple {
  color: white !important;
  background-image: var(--audium-gradient-primary);
}
.is-gradient-purple.fa-icon {
  color: transparent !important;
  background-clip: text !important;
}

.is-text-gradient {
  color: transparent !important;
  background-clip: text !important;
}

.gradient-background {
  background-image: var(--audium-gradient);
}

.gradient-foreground {
  background-image: var(--audium-gradient);
  color: transparent;
  background-clip: text;
}

.tabs ul {
  border-bottom-color: transparent !important;
}
.tabs ul li:not(.is-active) a {
  border-bottom-color: transparent !important;
}

.tag {
  background-color: var(--audium-purple-light);
  color: var(--audium-purple-dark);
}

.audium-profile .icon-text {
  color: var(--audium-pink);
}

.fa-icon.fa-spinner,
.loading-icon {
  color: var(--audium-pink);
}

.audium-hover-pointer:hover {
  cursor: pointer;
}

.menu {
  border-right: 1px solid var(--bulma-border);
  box-shadow: var(--bulma-shadow);
}
.menu .menu-list > li ul {
  display: none;
}
.menu .menu-list > li > a {
  padding-right: 2em;
}
.menu .menu-list > li > a.is-active {
  background: var(--audium-gradient);
  color: var(--audium-background);
}
.menu .menu-list > li > a.is-active .fa-icon:not(.audium-color-red) {
  color: white;
}
.menu .menu-list > li > a.is-active ~ ul {
  display: block;
}
.menu .menu-list > li > a.is-active ~ ul a.is-active {
  background-color: var(--audium-pink-light);
}
.menu .menu-list > li > a .fa-icon:not(.audium-color-red) {
  background: var(--audium-gradient-stretch);
  color: transparent;
  background-clip: text;
}

.audium-avatar .image {
  background-color: var(--audium-purple);
  color: white;
}

.audium-gradient-animation {
  background-image: linear-gradient(var(--audium-gradient-angle), var(--audium-blue), var(--audium-pink));
  background-size: 200% 200%;
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

@-webkit-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}
@-moz-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}
@keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}