body {
	/* background: url("assets/space.gif"); */
	/* background: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fj.gifs.com%2FG65MKL.gif&f=1&nofb=1&ipt=82f63588ca3f620d27b5b65e49b2ddee8e11ae1a08cffe45b44ec6b8220ad042&ipo=images"); */
	background: url("../assets/space2.gif");

	display: flex;
	flex-direction: row;
	
	color: white;
	margin: 0;
	padding: 0;
}

#brain-container {
	display: grid;
	width: 100%;
	height: 100vh;

	padding: 0;
	margin: 0;
	margin-left: 10%;

	justify-items: center;
	align-items: center;
}

#brain, #jar {
	max-width: 100%;
	max-height: 100%;

	grid-column: 1;
	grid-row: 1;
}

#buttons {
	/* padding: 5%; */
	/* margin: 5%; */
	margin-right: 10%;

	display: flex;
	flex-direction: column;
	justify-content: center;

	font-size: calc(0.85rem + 1.25vh);
	align-items: start;

	width: 100%;
	height: 100vh;
}

body:has(.crt-button:hover) #brain {
	animation: crt-button-hover 2s;
}

@keyframes crt-button-hover {
	0% {opacity: 100%;}
	3% {opacity: 45%;}
	6% {opacity: 100%;}
	9% {opacity: 45%;}
	12% {opacity: 100%;}
	30% {opacity: 45%;}
	100% {opacity: 100%;}
}

@media screen and (max-width: 600px) {
	body {
		flex-direction: column;
	}

	#brain-container {
		margin: 0;
		height: auto;
	}

	#buttons {
		margin: 0;
		width: auto;
		height: auto;
		margin-bottom: 5%;
		align-items: center;
	}
}