<div class="container">
<span class="title">This is a title</span>
<p class="content">This is some content. I could use Lorem Ipsum here, but I was too lazy to google it and I don't believe CodePen has a built in Lorem Ipsum feature.</p>
</div>
:root{
font-family: sans-serif;
--background: #eee;
--color: #222;
}
.container{
width: 300px;
margin: auto;
padding: 1rem;
background: var(--background);
color: var(--color);
}
.title{
font-weight: 600;
font-size: 1.1rem;
}
.content{
font-weight: 300;
font-size: .9rem;
line-height: 150%;
}
@media (prefers-color-scheme: dark){
:root{
--background: #222;
--color: #eee;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.