[data-theme="winter"] .hero{ background: linear-gradient(120deg, rgba(12,16,20,0.87), rgba(20,50,75,0.55)), url('https://images.unsplash.com/photo-1560179524-382d0d0f27f9?auto=format&fit=crop&w=1600&q=80'); }
[data-theme="spring"] .hero{ background: linear-gradient(120deg, rgba(12,18,16,0.85), rgba(25,55,50,0.5)), url('https://images.unsplash.com/photo-1560179524-382d0d0f27f9?auto=format&fit=crop&w=1600&q=80'); }
[data-theme="summer"] .hero{ background: linear-gradient(120deg, rgba(14,18,22,0.85), rgba(20,45,66,0.55)), url('https://images.unsplash.com/photo-1560179524-382d0d0f27f9?auto=format&fit=crop&w=1600&q=80'); }
[data-theme="autumn"] .hero{ background: linear-gradient(120deg, rgba(14,18,22,0.85), rgba(20,45,66,0.55)), url('https://images.unsplash.com/photo-1560179524-382d0d0f27f9?auto=format&fit=crop&w=1600&q=80'); }

body{
  background-image: radial-gradient(circle at 1px 1px, rgba(237,241,245,0.045) 1px, transparent 0);
  background-size: 22px 22px;
}