:root::before {
	color: navy;
	background-color: orange;
	content: "Quasi\2017Satya\AE\20-\20\ff5e\ff5e\20\ff01\ff1f\2263\20\45\78\70\72\65\73\73\20\49\6d\70\6f\72\74\2122\20\ff3d\ff1a\ff02\25a8\25a4\23c2\23c5\25a7\ff02\ff5d\ff09\ff60";
}
:root::after {
	color: navy;
	background-color: orange;
	content: "psy\202E 763\202C\20Stephen\20John\20Miszczyk's\2023/03/2026"
}
* {
	margin: auto;
	padding: auto;
}
body {
	display: none;
	background-image: url("./lines.jpg");
	background-size: cover;
	animation: change-hue 10s alternate-reverse infinite;
}
fieldset {
	text-align: center;
}
fieldset:has(> input) {
	display: none;
}
fieldset:has(> input:checked) {
	display: block;
}
label:has(legend) legend {
	filter: hue-rotate(180deg);
}
h1 {
	width: 88%;
}
div, legend, h2, h3 {
	text-align: center;
	border-radius: 0.5em;
}
legend {
	display: flex;
	flex-wrap: wrap;
	font-size: 1em;
	color: black;
	justify-content: center;
	align-items: center;
	animation: none;
	filter: sepia(100%);
}
.flex {
	display: flex;
	justify-content: center;
}
body, fieldset, div {
	margin: 0;
	padding: 0.5em;
	border: 2px solid;
	border-color: blue yellow red;
	border-radius: 1em;
}
.pointer {
	cursor: pointer;
}
div:has(> a) {
	width: 55%;
	margin: 1em;
	padding: 1em;
	background-color: #FF00FF80;
	 /*#BFFF0080;*/
}
div:has(> a:hover) {
	background-color: #00FFFF80;
	 /*#00FFFF80;*/
}
div:has(> a:active) {
	background-color: #FF000080;
	 /*#FFFF0080;*/
}
div:has(> a:visited) {
	background-color: #FFFF0080;
	 /*#FF00FF80;*/
}
label {	
	display: block;
	width: 88%;
	font-size: 1em;
	color: magenta;
}
label div:not(.flex) {
	width: 0.6em;
	height: 0.8em;
	font-size: 0.5em;
	background-color: white;
	border: 1.5px solid;
	border-color: lime yellow orange red;
}
.media {
	background-color: black;
}
h1 {
	font-size: 1.2em;
	color: lime;
	background-color: red;
	border: 2.5px solid magenta;
	border-radius: 0.5em;
}
h2 {
	font-size: 1em;
	color: yellow;
	background-color: magenta;
	border: 2.5px solid lime;
}
h3 {
	font-size: 0.8em;
	color: magenta;
	background-color: yellow;
	border: 2.5px solid orange;
}
legend div {
	font-size: 1em;
}
legend div:not(.flex) {
	color: red;
	font-weight: 900;
	border: 2.5px solid black darkgrey grey lightgrey;
	background-color: darkgrey;
	filter: sepia(100%);
	text-shadow: black 2px 2px;
}
div:not(legend div) {
	width: 98%;
	animation: twist-hue 20s alternate-reverse infinite;
}
p {
	color: yellow;
	background-color: magenta;
	text-align: center;
}
cool {
	display: block;
	font-size: 10em;
	filter: grayscale(100%) sepia(100%);
}
.pointer {
	color: orange;
}
cool {
	background-image: radial-gradient(circle at center, #0000FF 33%, #FFFF00 66%, #FF0000 100%);
	border-radius: 0.5em;
}
legend .flex div {
	font-size: 1em;
}
.right {
	width: 40%;
	text-align: right;
}
.left {
	width: 88%;
	text-align: left;
}
#rainbow {
	background-image: url("./rainbow.jpeg");
	background-repeat: no-repeat;
	background-position: center;
}
label {
	background-color: gold;
}
label:hover {
	background-color: green;
}
legend {
	width: 88%;
}
.pointer:has(a h2) {
	width: 65%;
}
img {
	filter: sepia(0);
}
@keyframes twirl-left {
	from {
		animation-timing-function: ease-in;
		transform: rotate(720deg);
		filter: hue-rotate(720deg);
	}
	to {
		animation-timing-function: ease-out;
		transform: rotate(0deg);
		filter: hue-rotate(0deg);
	}
}
@keyframes twirl-right {
  from {
  	animation-timing-function: ease-in;
		transform: rotate(0deg);
		filter: hue-rotate(0deg);
	}
	to {
		animation-timing-function: ease-out;
		transform: rotate(720deg);
		filter: hue-rotate(720deg);
	}
}
@keyframes change-hue {
	from {
  	animation-timing-function: ease-in;
		backdrop-filter: invert(100%) saturate(400%) sepia(100%) hue-rotate(0deg);
	}
	to {
		animation-timing-function: ease-out;
		backdrop-filter: invert(100%) saturate(400%) sepia(100%) hue-rotate(720deg);
	}
}
@media (min-width: 320px) {
	body {
		font-size: 8px;
	}
}
@media (min-width: 768px) {
	body {
		font-size: 14px;
	}
}
@media (min-width: 1024px) {
	body {
		font-size: 18px;
	}
}