<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.