<div class="wrapper-light">
  <p>She walked the earth and exacted an oath from each thing that she encountered never to harm Balder the beautiful. She spoke to fire, and it promised it would not burn him; water gave its oath never to drown him; iron would not cut him, nor would any of the other metals. Stones promised never to bruise his skin</p>
</div>
<div class="wrapper-dark">
  <p>She walked the earth and exacted an oath from each thing that she encountered never to harm Balder the beautiful. She spoke to fire, and it promised it would not burn him; water gave its oath never to drown him; iron would not cut him, nor would any of the other metals. Stones promised never to bruise his skin</p>
</div>
* {
  box-sizing: border-box;
}

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

body {
  display: flex;
  flex-direction: column;
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-weight: 400;
}

[class*="wrapper"] {
  display: grid;
  place-items: center;
  height: 50vh;
  width: 100vw;
  font-size: 14vh;
  padding: 20px;
  wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 400;
}

.wrapper-dark {
  background-color: #111;
  color: white;
  font-weight: 350;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.