html {
	color-scheme: dark;
}

html {
	font-family: system-ui;
}

* {
	box-sizing: border-box;
}

.container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(5, auto);
	gap: 10px;
}

.two {
	place-items: center;
}

:where(.two p) {
	width: max-content;
	height: max-content;
}

:where(.container p) {
	padding: 1rem;
	border: .5rem solid rgba(0 0 0 / 0.2);
	white-space: nowrap;
	text-shadow: 0 0 5px black, 0 0 5px black;
	margin: 0px;
	grid-column: 1;
	display: grid;
	place-items: center;
}

.paragraph-1 {
	grid-column: 1 / 4;
	background-color: rgb(60, 255, 60);
}

.paragraph-2 {
	grid-column: 3 / 5;
	background-color: rgb(225, 255, 57);
}

.paragraph-3 {
	grid-column: 2 / 3;
	grid-row: 2 / 4;
	background-color: rgb(52, 232, 245);
}

.paragraph-4 {
	grid-column: 4 / -1;
	background-color: rgb(52, 81, 245);
}

.paragraph-5 {
	grid-column: 1 / 4;
	background-color: rgb(245, 52, 219);
}

.paragraph-6 {
	grid-column: 4 / 7;
	background-color: rgb(168, 52, 245);
}

.paragraph-7 {
	grid-column: 7 / 10;
	background-color: rgb(40, 32, 145);
}

.paragraph-8 {
	grid-column: 10 / 13;
	background-color: rgb(0, 66, 153);
	height: 100px;
}

.paragraph-9 {
	grid-column: 3 / -3;
	height: 400px;
	background-color: rgb(214, 56, 56);
}

.paragraph-10 {
	grid-column: 1 / 3;
	grid-row-end: -1;
	background-color: rgb(255, 179, 36);
}