<p>Resize your browser</p>
<div class="box"></div>
* {
	box-sizing: border-box;
}

body {
	padding: 1em;
}

:root {
	@media (min-width: 40em) {
		--bg: rebeccaPurple;
	}
}

.box {
	width: 50vw;
	height: 30vw;
	margin: 3em auto;
	background-color: var(--bg, red);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.