style.css

p, button {
	font-size: 1em;
}

body {
	background-color: #96A8C8;
}

div.xkbox {
	margin: 2px;
	border: 1.5px #000 solid;
	border-radius: 12px;
	background-color: #fff;
	padding: 15px;
}

main {
	margin: auto;
}

img {
	margin: 5px;
}

span {
	background-color: #eee;
	font-family: monospace;
}

.top {
	display: flex;
	flex-direction: row;
}

#topleft {
	flex-basis: 166px;
	flex-grow: 0;
	flex-shrink: 0;
}
button {
	display: block;
	background-color: transparent;
	border: none;
	font-family: serif;
}
button:hover {
	background-color: #ddd;
}
button:active {
	background-color: #aaa;
}
#topright {
	flex-basis: 100%;
	flex-grow: 1000;
	flex-shrink: 1000;
}

#frames {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

p:first-child {
	margin-top: 0;
}
p:last-child {
	margin-bottom: 0;
}


@media (min-width: 900px) {
	main {
		width: 80%;
	}
	.top {
		width: 100%;
	}
}


.uwu {
	background-image:
		linear-gradient(90deg,
			#96a8c8 20%,
			#c869a8 20%,
			#c869a8 40%,
			#cccccc 40%,
			#cccccc 60%,
			#c869a8 60%,
			#c869a8 80%,
			#96a8c8 80%
			);
}

/*
@media (min-width: 1000px) {
	body {
		background-image:
			linear-gradient(#96A8C8,#96A8C8),
			linear-gradient(#c896a8,#c896a8),
			linear-gradient(#ccc,#ccc),
			linear-gradient(#c896a8,#c896a8),
			linear-gradient(#96A8C8,#96A8C8);
		background-size:
			20% 100%,
			40% 100%,
			60% 100%,
			80% 100%,
			100% 100%;
		background-repeat: no-repeat;
	}
}*/