/* AND condition */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet styles */
}

/* OR condition */
@media (max-width: 480px), (min-width: 1200px) {
  /* Mobile or large desktop */
}

/* NOT condition */
@media not print {
  /* Everything except print */
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #ffffff;
  }
}

/* Light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #1a1a1a;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast */
@media (prefers-contrast: high) {
  .button {
    border: 2px solid currentColor;
  }
}

/* Screen resolution */
@media (min-resolution: 2dppx) {
  /* Retina displays */
}

/* Orientation */
@media (orientation: portrait) {
  /* Portrait mode */
}

@media (orientation: landscape) {
  /* Landscape mode */
}

/* Hover capability */
@media (hover: hover) {
  .button:hover {
    background-color: #0056b3;
  }
}

@media (hover: none) {
  .button:active {
    background-color: #0056b3;
  }
}

@media (min-aspect-ratio: 16/9) {
  /* Wide screens */
}

@media (aspect-ratio: 4/3) {
  /* 4:3 screens */
}

/* Modern syntax */
@media (width >= 768px) {
  /* Min-width */
}

@media (480px <= width <= 768px) {
  /* Between 480px and 768px */
}