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

* {
  --color1: #FFA769;
  --color2: #FC4CA0;
  --color3: #7542E5;
  --color4: #FF4AD9;
  --color5: #FF778E;
  --color6: #ffe7ea;
  --color7: #5F2ECA;
  --bcolor1: #e2d9f8;
  --bcolor2: #20123b;
  --bcolor3: #2B1753;
  --bcolor4: #321C64;
  --gradient: linear-gradient(80deg, var(--bcolor2) 0%, var(--color3) 1%, var(--color4) 2%, var(--color5) 3%, var(--color1) 4%, var(--color1) 96%, var(--color5) 97%, var(--color4) 98%, var(--color3) 99%, var(--bcolor2) 100%);
}

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

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

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

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

.footer {
  color: var(--bcolor1);
  background-color: var(--bcolor4);
  font-weight: 600;
}

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

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

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

.folders a {
  font-weight: 500;
  color: var(--bcolor2);
  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;
  color: var(--bcolor1);
  background-color: var(--color3);
}

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

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

#totop {
  background-color: var(--color2);
  color: var(--bcolor2);
  font-weight: 600;
}