Template:MLG/styles.css

/* Table wrapper ensures perfect shrink-wrapping around the content */
.mlg-aligner {
	display: table;
	margin: 10px auto;
}

/* Main Box Structure */
.mlg-container {
	position: relative;
	background-color: #333333;
	border: 5px solid #fec837; /* Fallback border */
	/* Authentic static rainbow gradient border */
	border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
	border-image-slice: 1;
	padding: 15px 20px;
	/* Impact font: The absolute standard for memes */
	font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	color: #cccccc;
	text-transform: uppercase;
	transition: filter 0.2s;
}

/* Flexbox Layout */
.mlg-inner {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.mlg-content {
	text-align: center;
}

.mlg-img {
	flex: 0 0 auto;
}

/* Text Formatting & Heavy Meme Stroke */
.mlg-title {
	font-size: 2em;
	color: #ffffff;
	margin-bottom: 5px;
	letter-spacing: 1px;
}

.mlg-subtitle {
	font-size: 1.1em;
	color: #cccccc;
	margin-bottom: 10px;
}

.mlg-yellow {
	color: #ffe43a;
}

/* Thick black outline mimicking -webkit-text-stroke safely */
.mlg-stroke {
	text-shadow: 
		-2px -2px 0 #000,  
		 2px -2px 0 #000,
		-2px  2px 0 #000,  
		 2px  2px 0 #000,
		-3px  0   0 #000,
		 3px  0   0 #000,
		 0   -3px 0 #000,
		 0    3px 0 #000,
		 4px  4px 5px rgba(0,0,0,0.8);
}

.mlg-audio {
	display: flex;
	justify-content: center;
}

/* =========================================
   HOVER EFFECTS (THE FLASHY/CRAZY PART)
========================================= */

/* Triggers a violent shake and rapid color cycling on hover */
.mlg-container:hover {
	animation: mlg-shake 0.15s infinite, mlg-rainbow 0.6s infinite linear;
}

/* Makes images aggressively bounce/zoom on hover */
.mlg-container:hover .mlg-img {
	animation: mlg-bounce 0.2s infinite alternate;
}

/* Rapidly rotates the hue, making the rainbow border and text colors flash */
@keyframes mlg-rainbow {
	0% { filter: hue-rotate(0deg) saturate(200%); }
	100% { filter: hue-rotate(360deg) saturate(200%); }
}

/* Pure MLG screen shake */
@keyframes mlg-shake {
	0% { transform: translate(2px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(0px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(2px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(2px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* Jittery image bouncing */
@keyframes mlg-bounce {
	0% { transform: scale(1) rotate(-5deg); }
	100% { transform: scale(1.1) rotate(5deg); }
}