<section>
  <h1>Hello World</h1>
</section>
<h2>Lorem ipsum dolor sit amet</h2>
<p>
  Sed sit amet tellus id est ornare fermentum. Nam feugiat diam in eros posuere, nec malesuada leo ultricies. Ut massa urna, aliquet ac tincidunt in, varius nec magna. Nam a scelerisque neque, eu imperdiet lorem. Praesent porttitor lobortis dolor feugiat iaculis. Cras feugiat feugiat risus.
</p>

:root {
  --main-text: #333;
  --main-bg: #fff;
}
 
body {
  color: var(--main-text);
  background-color: var(--main-bg);
}
section {
  background-image: url('https://images.unsplash.com/photo-1452827073306-6e6e661baf57?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njc3ODczOTI&ixlib=rb-4.0.3&q=80');
  background-size: cover;
  display: grid;
  place-items: center start;
  padding-left: 5rem;
  margin-bottom: 3rem;
  height: 500px;
  font-size: 3rem;
}
h2,
p {
  text-align: center;
}
h2 {
  font-size: 2rem;
}
p {
  padding: 2rem;
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-text: #ddd;
    --main-bg: #000;
  }
  section {
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
  }
}