<div class="wrapper-light">
    <p>During my researches in the Leviathanic histories, I stumbled upon an ancient Dutch volume, which, by the musty whaling smell of it, I knew must be about whalers. The title was, “Dan Coopman,” wherefore I concluded that this must be the invaluable memoirs of some Amsterdam cooper in the fishery, as every whale ship must carry its cooper. I was reinforced in this opinion by seeing that it was the production of one “Fitz Swackhammer.” But my friend Dr. Snodhead, a very learned man, professor of Low Dutch and High German in the college of Santa Claus and St. Pott’s, to whom I handed the work for translation, giving him a box of sperm candles for his trouble—this same Dr. Snodhead, so soon as he spied the book, assured me that “Dan Coopman” did not mean “The Cooper,” but “The Merchant.”</p>
  </div>
  <div class="wrapper-dark">
    <p>During my researches in the Leviathanic histories, I stumbled upon an ancient Dutch volume, which, by the musty whaling smell of it, I knew must be about whalers. The title was, “Dan Coopman,” wherefore I concluded that this must be the invaluable memoirs of some Amsterdam cooper in the fishery, as every whale ship must carry its cooper. I was reinforced in this opinion by seeing that it was the production of one “Fitz Swackhammer.” But my friend Dr. Snodhead, a very learned man, professor of Low Dutch and High German in the college of Santa Claus and St. Pott’s, to whom I handed the work for translation, giving him a box of sperm candles for his trouble—this same Dr. Snodhead, so soon as he spied the book, assured me that “Dan Coopman” did not mean “The Cooper,” but “The Merchant.”</p>
  </div>
* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  font-family: "Literata", serif;
  overflow: hidden;
  color: #222;
}

[class*="wrapper"] {
  display: grid;
  place-items: center;
  width: 50vw;
  padding: 40px;
  overflow: hidden;
}

p {
  line-height: 1.43;
  font-size: 20px;
  max-width: 640px;
  font-weight: 500;
}

.wrapper-dark {
  background-color: #111;
  color: white;
}

.wrapper-dark p {
  font-weight: 400;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.