.link-badge{
  display: inline flex;
  gap: 10px;

  /* background-color: var(--color-invert-secondary, white); */
  background-color: var(--color-accent);
  /* color: var(--color-invert-text, black); */
  color: black;

  width: fit-content;
  padding: 7px 15px 7px 15px;

  border-radius: 1000px;
  transition: 
    color 0.5s,
    background-color 0.5s;

  /* border: solid 1px #9b9b9b; */
}

/* .link-badge:hover{
  color: var(--color-text);
} */

.list-item > a, .link-badge > a{
  display:block;
  text-decoration:none;
  color: inherit;
}

.list-container{
  --color-even: attr(data-primary type(*), var(--color-accent));
  --color-odd: attr(data-secondary type(*), hsl(from var(--color-accent) h s calc(l + 5)));
  background-color: var(--color-even);
  transition: background-color 0.5s;
}
.list-item:nth-child(even){
  background-color: var(--color-even);
}
.list-item:nth-child(odd){
  background-color: var(--color-odd);
}

.list-item{
  padding: 5px 10px 5px 10px;
  color: black;
  text-align: initial;
  transition: 
    color 0.5s,
    background-color 0.5s;
}

.list-item:hover{
  color: black;
}


@media screen and (min-width: 769px) {
  .columns{
    display: flex;
    gap: 1rem;
  }
}

.column{
  display: block flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.loader {
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid white;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}
@keyframes l20-1{
  0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
  12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
  25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
  50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
  62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
  75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
  100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}

input[type="checkbox"].check-regular {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff0;
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: solid white 2px;
  border-radius: 0.15em;
  box-shadow: 5px 0 10px rgb(12, 12, 12);
  transform: translateY(0.2em);
}

input[type = "checkbox"].check-regular:checked{
  background-color: white;
}