CSS Variables and Media Queries

A custom property such as --accent is defined once, often on :root, and read with var(--accent). A media query applies its rules only when its condition holds, so a button can become full width on small screens.

:root {
  --accent: #0b5fff;
}

.button {
  background: var(--accent);
  color: white;
}

@media (max-width: 40rem) {
  .button {
    width: 100%;
  }
}