[hidden] {
  display: none;
}

.admin_nav {
  text-decoration: underline !important;
}

details summary {
  min-height: fit-content;
}

@media (min-width: 1281px) {
  .mobile-only { display: none !important;}
  :host, :root {
    --pico-font-size: 100%  !important;
  }
}

@media (max-width: 1280px) {
  .desktop-only { display: none !important;}
}

@media (min-width:1536px) {
  .container {
    max-width: 1200px !important;
  }
}

.newsletter-form {
  border: 1px solid gray;
  padding: 1rem;
  max-width: 700px;
  margin: 2rem auto 2rem auto;
}

#categories {
  display: grid;
  gap: 1rem;

  /* Depends on screen size */
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}

.category {
  aspect-ratio: 1;
  max-height: 180px;
  height: 100%;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  /* No link styling */
  color: white;
  text-decoration: unset;
}

.category-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  margin: 0.25rem;
}

.category-content i {
  line-height: 1;

  /* Depends on screen size */
  font-size: 2rem;
}
@media (min-width: 480px) {
  #categories { grid-template-columns: repeat(3, 1fr) }
  .category i { font-size: 3rem }
}

@media (min-width: 1280px) {
  #categories { grid-template-columns: repeat(6, 1fr) }
  .category i { font-size: 2rem }
}

.category:nth-of-type(1) { background: #eb4c54; }
.category:nth-of-type(2) { background: #fd8a4d; }
.category:nth-of-type(3) { background: #fdcc46; }
.category:nth-of-type(4) { background: #00ad59; }
.category:nth-of-type(5) { background: #429c8a; }
.category:nth-of-type(6) { background: #5d6fb9; }
.category:nth-of-type(7) { background: #eb4c54; }
.category:nth-of-type(8) { background: #fd8a4d; }
.category:nth-of-type(9) { background: #fdcc46; }
.category:nth-of-type(10) { background: #00ad59; }
.category:nth-of-type(11) { background: #429c8a; }
.category:nth-of-type(12) { background: #5d6fb9; }

/*
 This stinks, but I have the flu and not the brain capacity to make it better right now.
 Code duplication from channels.css
*/
.channel-tag-wrapper {
  display: flex;
  justify-content: space-around;

  & .channel {
    flex-grow: 1;
    margin: 0;
  }

  @media (min-width: 1280px) {
    & .channel{
      max-width: calc(50% - 0.5rem); /* #channels gap */
    }
  }

  & .channel header {
    display: flex;
    align-items: center;
  }

  & .channel .flex-spacer {
    flex-grow: 9999;
  }

  & .channel-categories {
    padding-left: 1rem;
  }

  & .channel span {
    display: block;
  }
  & .channel-yt-description {
    white-space: break-spaces;
  }

  & .channel-image {
    width: 80px;
    margin-right: 1rem;
  }

  & .channel-image img {
    max-width: 100%;
    border-radius: 999px;
    border: 1px solid black;
  }

  & .additional-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  @media (max-width: 420px) {
    & .additional-info {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  }

  & .info-tile {
    padding: 0.25rem;
  }

  & .info-tile-body {
    background: var(--pico-card-sectioning-background-color);
    border: 1px solid var(--pico-muted-border-color);
    padding: 0.5rem;
    border-radius: var(--pico-border-radius);
  }

  & .info-tile-title {
    padding: 0.25rem;
  }

  & .channel-link {
    text-align: end;
  }

  & i.fa-trash {
    display: none;
  }

}