[hidden] {
  display: none;
}

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);
}

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

  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: 768px) {
  #categories { grid-template-columns: repeat(4, 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: linear-gradient(135deg, #f0abfc, #d946ef); }
.category:nth-of-type(2) { background: linear-gradient(135deg, #d946ef, #a855f7); }
.category:nth-of-type(3) { background: linear-gradient(135deg, #a855f7, #818cf8); }
.category:nth-of-type(4) { background: linear-gradient(135deg, #818cf8, #60a5fa); }
.category:nth-of-type(5) { background: linear-gradient(135deg, #60a5fa, #22d3ee); }
.category:nth-of-type(6) { background: linear-gradient(135deg, #22d3ee, #34d399); }
.category:nth-of-type(7) { background: linear-gradient(135deg, #34d399, #4ade80); }
.category:nth-of-type(8) { background: linear-gradient(135deg, #4ade80, #facc15); }
.category:nth-of-type(9) { background: linear-gradient(135deg, #facc15, #fbbf24); }
.category:nth-of-type(10) { background: linear-gradient(135deg, #fbbf24, #fb923c); }
.category:nth-of-type(11) { background: linear-gradient(135deg, #fb923c, #f87171); }
.category:nth-of-type(12) { background: linear-gradient(135deg, #f87171, #f472b6); }
.category:nth-of-type(13) { background: linear-gradient(135deg, #f472b6, #f0abfc); }

@media (prefers-color-scheme: dark) {

  .category:nth-of-type(1) { background: linear-gradient(135deg, #e879f9, #c026d3); }
  .category:nth-of-type(2) { background: linear-gradient(135deg, #c026d3, #7c3aed); }
  .category:nth-of-type(3) { background: linear-gradient(135deg, #7c3aed, #4f46e5); }
  .category:nth-of-type(4) { background: linear-gradient(135deg, #4f46e5, #2563eb); }
  .category:nth-of-type(5) { background: linear-gradient(135deg, #2563eb, #0891b2); }
  .category:nth-of-type(6) { background: linear-gradient(135deg, #0891b2, #059669); }
  .category:nth-of-type(7) { background: linear-gradient(135deg, #059669, #16a34a); }
  .category:nth-of-type(8) { background: linear-gradient(135deg, #16a34a, #ca8a04); }
  .category:nth-of-type(9) { background: linear-gradient(135deg, #ca8a04, #d97706); }
  .category:nth-of-type(10) { background: linear-gradient(135deg, #d97706, #ea580c); }
  .category:nth-of-type(11) { background: linear-gradient(135deg, #ea580c, #dc2626); }
  .category:nth-of-type(12) { background: linear-gradient(135deg, #dc2626, #db2777); }
  .category:nth-of-type(13) { background: linear-gradient(135deg, #db2777, #e879f9); }

}