@import "./classful.css";
@import "./prism.css";

.landing {
	margin: 5rem 0;
}

.text-center {
	text-align: center;
}

.code-and-preview {
	display: flex;
	margin-bottom: 5rem;
}

.preview {
	padding: 2.5rem;
}

.code-and-preview .preview,
.code-and-preview .code {
	width: 50%;
}

.code-and-preview pre {
	margin: 0;
	height: auto;
	margin: auto 0;
}

.centered,
.code-and-preview .preview {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.code-and-preview .preview button {
	margin: 0.5rem;
}

.nav-link {
	display: inline-block;
}

.nav-link.active {
	color: var(--code-span-color);
}

@media (max-width: 768px) {
	.code-and-preview {
		flex-direction: column;
	}

	.code-and-preview .preview,
	.code-and-preview .code {
		width: 100%;
	}
}