style.css

@import './Components/u-and-i-v2.css';
@import './Docsite-css/docsite-codeDisplay.css';
@import './Docsite-css/docsite-component-display.css';
@import './Docsite-css/docsite-footer.css';
@import './Docsite-css/docsite-nav.css';
@import './Docsite-css/docsite-sidebar.css';

html {
	scroll-behavior: smooth;
}
:root {
	--docSite-sec-color: #e6e6e6;
}

* {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
	word-wrap: break-word;
}

.main {
	padding: 1rem 3rem;
	grid-area: main;
	width: 100%;
	box-sizing: border-box;
	max-width: 100vw;
}

.body-container {
	margin-bottom: 1.5rem;
}

.grid-container-pagelayout {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-areas:
		'header header header header header'
		'sidebar main main main main'
		'sidebar main main main main'
		'sidebar main main main main';
	margin-bottom: 1.5rem;
}

hr {
	margin: 3rem 0 2rem;
}

h2 {
	padding-top: 1rem;
}
.spacer-2rem {
	height: 2rem;
	width: 100%;
}

@media screen and (max-width: 1024px) {
	.main {
		padding: 1rem 1.625rem;
	}

	.grid-container-pagelayout {
		grid-template-columns: 1fr;
		grid-template-areas:
			'header'
			'sidebar'
			'main';
	}
	body {
		width: 100vw;
	}
	.grid-container-pagelayout {
		width: 100%;
	}
}