/* for demo purposes only */
body {
	background: var(--bg_level_1) !important;
}

html {
	scroll-behavior: smooth;
}

/* define offset for anchor links */
:target:before {
	content: "";
	display: block;
	height: 50px;
	margin: -50px 0 0;
}

.demo-spacing>div {
	background: var(--color_tw_gray300);
	border-bottom: 5px solid var(--bg_level_1);
}

.demo-flexbox-grid div[class*="col-"] {
	background: var(--color_tw_gray300);
	border: 1px solid var(--bg_level_1);
	padding: 10px;
}

.demo-grey-background {
	background: var(--bg_level_0);
	padding: 20px;
}

.style-guide {
	padding: 20px;
	margin-top: 50px;
}

.style-guide__toc-H1 {
	font-weight: bold;
	font-size: 15px;
	margin-top: 10px;
}

.style-guide__toc-H2 {
	padding-left: 10px;
}

.style-guide__block {
	margin: 10px 0;
	clear: both;
}

.style-guide__block::after {
	content: "";
	clear: both;
	display: table;
}

.style-guide__preview {
	box-sizing: border-box;
}

.style-guide__code {
	box-sizing: border-box;
	max-height: 700px;

	/* override prism default styles */
	font-size: 13px !important;
	margin-top: 10px !important;
}
@media only screen and (min-width: 48em) {
	.style-guide__preview {
		width: 48%;
		float: left;
	}

	.style-guide__code {
		width: 48%;
		float: right;

		/* override prism default styles */
		margin-top: 0 !important;
	}
}

#style-guide-css-components > h1 {
	border-bottom: 2px solid #eee;
	padding: 10px 0;
	margin-top: 50px;
}


/* Colors */

.colorblock {
	width: 220px;
	height: 200px;
	float: left;
}

.colorblock__color {
	width: 200px;
	height: 100px;
	border-radius: 5px;
}

.colorblock__definition {
	font-size: 95%;
	margin-top: 3px;
}

.colorblock__name {
	font-weight: bold;
	font-size: 110%;
	padding: 6px 0;
}

.colorblock__parents {
	color: #555;
}

.colorblock__hex {
	background: var(--color_white);
	border-radius: 3px;
	padding: 5px;
	display: inline-block;
	margin: 5px;
}


/* Icons */

.iconblock {
	width: 150px;
	height: 120px;
	float: left;
	text-align: center;
}

.iconblock__icon {
	font-size: 200%;
}

.iconblock__name {
	font-size: 120%;
	margin: 5px 0;
}

.iconblock__tags {
	font-size: 90%;
	color: #ddd;
}

/* Logos */

.styleguide__logo {
	border: 1px solid var(--color_tw_gray300);
	text-align: center;
	margin-bottom: 40px;
	margin-right: 40px;
	float: left;
	border-radius: 5px;
}

.styleguide__logo-img {
	width: 380px;
	height: 200px;
	background: white;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.styleguide__logo-img--inverted {
	background: #1A202C;
}

.styleguide__logo-img img {
	margin: 70px 40px;
	max-width: 300px;
	max-height: 60px;
}

.styleguide__logo-download {
	padding: 10px;
	border-top: 1px solid var(--color_tw_gray300);
}

.styleguide__logo-download a {
	margin-left: 5px;
}