CSS Media Queries

@media media-type and (condition) {
  /* CSS rules here only apply when condition is true */
}

/* Most common: screen width */
@media (min-width: 768px) {
  .sidebar { display: block; }
}

/* min-width — mobile first (recommended) */
/* Styles apply when screen is AT LEAST this wide */
@media (min-width: 768px) { /* tablet and up */ }
@media (min-width: 1024px) { /* desktop and up */ }

/* max-width — desktop first (old approach) */
/* Styles apply when screen is AT MOST this wide */
@media (max-width: 767px) { /* mobile only */ }
@media (max-width: 1023px) { /* tablet and below */ }

/* New syntax — supported in all modern browsers */
@media (480px <= width < 768px) {
  /* tablet only */
}

/* Old equivalent */
@media (min-width: 480px) and (max-width: 767px) { }

@media (orientation: portrait) {
  /* taller than wide — most phones held vertically */
}
@media (orientation: landscape) {
  /* wider than tall — phone sideways, most desktops */
}

@media (prefers-color-scheme: dark) {
  body { background: #0f0f0f; color: #e8e8e8; }
}
@media (prefers-color-scheme: light) {
  body { background: #fff; color: #333; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* Respects OS setting for users with motion sensitivity */

@media print {
  header, footer, nav, .ads { display: none; }
  body { font-size: 12pt; color: black; }
  a { color: black; text-decoration: none; }
  a[href]::after { content: " (" attr(href) ")"; }
}