@import url("https://fonts.cdnfonts.com/css/metropolis-2");

* {
  --color1: #ffa769;
  --color2: #fc4ca0;
  --color3: #7542e5;
  --color4: #ff4ad9;
  --color5: #5f2eca;
  --color6: #7033ca;
  --color7: #ff778e;
  --bcolor1: #e2d9f8;
  --bcolor2: #20123a;
  --bcolor3: #2b1753;
  --bcolor4: #321c64;
  --gradient: linear-gradient(
    80deg,
    var(--bcolor2) 0%,
    var(--color5) 1%,
    var(--color3) 2%,
    var(--color2) 3%,
    var(--color1) 4%,
    var(--color1) 96%,
    var(--color2) 97%,
    var(--color3) 98%,
    var(--color5) 99%,
    var(--bcolor2) 100%
  );
}

body {
  color: var(--bcolor1);
  background-color: var(--bcolor3);
  font-family: "Metropolis", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.navbar {
  font-weight: 800;
  color: var(--bcolor1);
  background-color: var(--color3);
  background-image: var(--gradient);
}

.navbar li a {
  font-weight: 800;
  color: var(--bcolor1);
}

.navbar li a:hover {
  text-decoration: none;
  background-color: var(--color4);
}

.footer {
  color: var(--bcolor2);
  background-color: var(--color1);
  font-weight: 600;
}

.footer a {
  color: var(--color2);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: none;
}

.foldericon {
  content: "themes/icons/catpuccin.svg.j2";
}

.folders a {
  font-weight: 500;
  color: var(--bcolor1);
  text-decoration: none;
}

.folders a:hover {
  text-decoration: none;
}

.row a {
  font-weight: 500;
  color: var(--color7);
  text-decoration: none;
}

.row a:hover {
  text-decoration: underline;
}

.tooltiptext {
  font-weight: 500;
  background-color: var(--color6);
}

.tagentry label:hover {
  background-color: var(--color3);
}

.tagentry .tagtoggle:hover {
  background-color: var(--color3);
}

.column img {
  background-color: var(--bcolor2);
}

#totop:hover {
  background-color: var(--color6);
}

#totop {
  background-color: var(--bcolor4);
  color: var(--bcolor1);
  font-weight: 600;
}

.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 3px solid var(--bcolor1);
  border-right: 3px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}