* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html {
	overflow: hidden;
	animation: rainbow 3s;
	animation-iteration-count: infinite;
	background-color: #cc55ee;
}

.grid {
	display: grid;
	gap: 0px;
	grid-template-columns: repeat(3, 1fr);
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
}

.grid > div {
	margin: 10px;
	/* background-color: #ccc; */
	text-align: center;
	background-image: url(/image/martian.svg);
	background-size: contain; /* <-- background size */
	background-position: center; /* <-- background position */
	background-repeat: no-repeat;
	animation: dance 1s;
	animation-iteration-count: infinite;
}

.grid > .two {
	animation: dance 1.1s;
	animation-iteration-count: infinite;
}

@keyframes dance {
	0% {
		transform: rotate(30deg);
	}
	50% {
		transform: rotate(-30deg);
	}
	100% {
		transform: rotate(30deg);
	}
}

@keyframes rainbow {
	0% {
		filter: hue-rotate(1deg);
	}
	50% {
		filter: hue-rotate(180deg);
	}
	100% {
		filter: hue-rotate(1deg);
	}
}

#about {
	position: absolute;
	bottom: 0px;
	left: 0px;
	background-color: black;
	color: #fff;
	padding-left: 12px;
	padding-right: 12px;
	opacity: 0.7;
}