main {
	display: grid;
	/*												v---- NOTE: Magic number is magic. */
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-auto-rows: minmax(min-content, max-content);
	gap: 20px;
}

.column {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.infobox {
	animation: 1s 0.11s backwards expand-in cubic-bezier(.77,0,.18,1);
}

.infobox > div {
	animation: 1s 0.15s backwards fade-in ease-out;
}

/* Temp until homepage has an img. */
#img {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	animation: 1.2s 0.8s backwards blink-in;
	p {
		animation: 300s 1.6s infinite glitch-randomly;
		text-align: center;
	}

	/* For single-column on mobile. */
	min-height: 200px;
}

@keyframes glitch-randomly {
	0%, 0.99% {
		transform: skew(0deg) translate(0px, 0px);
	}

	1%, 1.79% {
		transform: skew(15deg);
	}
	1.80%, 3.49% {
		transform: skew(-1deg);
	}

	3.50%, 3.99% {
		transform: skew(0deg) translate(10px, 0px);
	}
	4%, 4.06% {
		transform: translate(-4px, 0px);
	}
	4.07%, 6.99% {
		transform: translate(0px, 0px) skew(0deg);
	}

	7%, 7.49% {
		transform: skew(5deg);
	}
	7.50%, 10.99% {
		transform: skew(3deg) scale(1, 1);
	}

	11%, 11.49% {
		transform: scale(1.1, 1) skew(0deg);
	}
	11.50%, 14.99% {
		transform: scale(1.07, 1) skew(-1deg);
	}

	15%, 15.05% {
		transform: scale(1, 1) skew(18deg);
	}
	15.06%, 19.49% {
		transform: skew(0deg) translate(0px, 0px);
	}

	19.50%, 19.5699% {
		transform: translate(-39px, 0px) skew(0deg);
	}
	19.57%, 19.7999% {
		transform: skew(-2deg) translate(53px, 0px);
	}
	19.80%, 23.99% {
		transform: translate(0px, 0px);
	}

	24%, 24.99% {
		transform: skew(-3deg);
	}
	25%, 30.9999% {
		transform: rotate(0deg) skew(0deg);
	}

	31%, 31.0799% {
		transform: rotate(90deg) translate(0px, 0px);
	}
	31.08%, 31.0999% {
		transform: rotate(90deg) translate(-7px, 0px);
	}
	31.10%, 31.3999% {
		transform: rotate(90deg) translate(0px, 0px);
	}
	31.40%, 38.99% {
		transform: rotate(0.5deg) skew(0deg);
	}

	39%, 40.49% {
		transform: rotate(0deg) skew(-15deg);
	}
	40.50%, 45.99% {
		transform: skew(-1deg);
	}

	46%, 46.49% {
		transform: skew(-2deg) translate(0px, -77px);
	}
	46.50%, 46.58% {
		transform: skew(0deg) translate(5px, 43px) rotate(3deg);
	}
	46.59%, 53.99% {
		transform: translate(0px, 0px) rotate(0deg);
		filter: blur(0px);
	}

	57% {
		filter: blur(1px);
	}

	59%, 59.59% {
		filter: blur(4px);
		opacity: 1;
	}
	60%, 64.99% {
		opacity: 0;
		transform: translate(0px, 0px) scale(1, 1);
	}

	65%, 65.90% {
		opacity: 1;
		transform: translate(-82px, -43px) scale(0.95, 1.1) skew(0deg);
	}
	65.91%, 65.97% {
		filter: blur(0px);
		transform: translate(23px, 113px) scale(1, 1) skew(-3deg);
	}
	65.98%, 66.55% {
		transform: translate(0px, 0px) skew(0deg);
		filter: none;
	}
	66.56%, 66.59% {
		transform: skew(15deg);
		filter: contrast(200%);
	}
	66.60% {
		transform: skew(0deg);
		filter: none;
	}

	71% {
		filter: contrast(200%);
	}

	73.9999% {
		filter: contrast(300%);
		transform: rotate(0deg);
	}
	74%, 74.1599% {
		filter: none;
		transform: rotate(180deg);
	}
	74.16%, 75.99% {
		filter: none;
		transform: rotate(0deg);
	}

	76%, 76.98% {
		transform: scale(1, 1) skew(0deg);
	}
	76.99%, 77.05% {
		transform: scale(1, 2) skew(-7deg);
	}
	77.06% {
		filter: none;
		transform: scale(1, 1) skew(-1deg);
	}

	81.99% {
		filter: drop-shadow(3px 3px 4px red);
		transform: translate(0px, 0px);
	}
	82%, 82.21% {
		filter: none;
		transform: translate(153px, -7px);
	}
	82.22%, 82.29% {
		transform: translate(-25px, 8px);
	}
	82.30%, 82.31% {
		transform: translate(-14px, 4px);
	}
	82.32%, 82.39% {
		transform: translate(-13px, 4px);
	}
	82.40%, 83.19% {
		transform: translate(-13px, 4px);
	}
	83.20%, 83.25% {
		transform: translate(-6px, -4px);
	}
	83.26%, 83.41% {
		transform: translate(-6px, 4px);
	}
	83.42%, 83.48% {
		transform: translate(-6px, 2px);
	}
	83.49%, 84.30% {
		transform: translate(-5px, 2px);
	}
	84.31% {
		filter: blur(0px);
		transform: translate(0px, 0px)
	}

	87% {
		filter: blur(1px);
	}

	90.99% {
		color: inherit;
		filter: blur(2px);
		transform: skew(0deg);
	}
	91%, 91.05% {
		color: red;
		filter: none;
		transform: skew(5deg);
		opacity: 1;
	}
	91.06%, 97.99% {
		color: inherit;
		transform: skew(0deg);
		opacity: 0;
	}

	98% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes blink-in {
	0%, 39.99% {
		opacity: 0;
	}

	40%, 49.99% {
		opacity: 1;
	}
	50%, 64.99% {
		opacity: 0;
	}

	65%, 74.99% {
		opacity: 1;
	}
	75%, 79.99% {
		opacity: 0;
	}

	80%, 89.99% {
		opacity: 1;
	}
	90%, 99.99% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes expand-in {
	0% {
		opacity: 0;
		transform: scale(1,0);
		transform-origin: top;
	}
	100% {
		opacity: 1;
		transform: scale(1,1);
		transform-origin: top;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* #welcome { */
/* 	width: 500px; */
/* } */

/* #changelog { */
/* 	width: 500px; */
/* } */

ul {
	margin-top: 8px;
	margin-bottom: 8px;
}

@media (max-width: 1050px) {
	ul {
		padding-left: 20px;
	}
}

li {
}

li time:before {
	content: '[';
}

li time:after {
	content: ']';
}