html, body {
	background-color: #0f1111;
	color: white;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
}

img, video {
	width: 40em;
	height: auto;
}

a {
	text-decoration: none;
	text-decoration-color: currentcolor;
	color: rgb(158, 225, 255);
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
}

footer {
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 0.7em;
	cursor: default;
}

a:hover, a:focus {
	text-decoration: underline;
}

.table-cell {
	display: table-cell;
}

.table-row {
	display: table-row;
}

.unlink {
	text-decoration: none !important;
	color: white !important;
}

.unlink-color {
	color: white !important;
}

.header {
	display: table-cell;
	font-size: 2em;
	font-weight: bold;
	padding-bottom: 0.25em;
}

.header2 {
	display: table-cell;
	font-size: 1.5em;
	font-weight: bold;
	padding-bottom: 0.5em;
}

.header3 {
	display: table-cell;
	font-size: 1.17em;
	font-weight: bold;
	padding-bottom: 0.5em;
}

.index-header::before {
	content: "Welcome to My Webpage!";
}

.index-header:hover::before {
	content: "Welcome to My Meme Page!";
}

.reimagined:hover::after {
	content: " (very cool)";
}	

.twitter-text::before {
	content: "my 𝕏";
}

.twitter-text:hover::before {
	content: "my twitter";
}

@keyframes spin {
	0% { transform: rotateX(0deg) rotateY(0deg); }
	25% { transform: rotateX(15deg) rotateY(-90deg); }
	50% { transform: rotateX(0deg) rotateY(-180deg); }
	75% { transform: rotateX(-15deg) rotateY(-270deg); }
	100% { transform: rotateX(0deg) rotateY(-360deg); }
}

.y-spin {
	display: inline-block;
	animation: spin 2s linear infinite;
	transform-style: preserve-3d;
}