Template:MLG/styles.css - Revision history

SomebodyRum at 08:38, 23 April 2026

2026-04-23T08:38:53Z

← Older revision		Revision as of 08:38, 23 April 2026
Line 12:		Line 12:
	border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);		border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
	border-image-slice: 1;		border-image-slice: 1;
			/* ADDED: Deep outer drop shadow and inner vignette shadow for un-hovered polish */
			box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 0 25px rgba(0,0,0,0.8);
	padding: 15px 20px;		padding: 15px 20px;
	font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;		font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	color: #cccccc;		color: #cccccc;
	text-transform: uppercase;		text-transform: uppercase;
	transition: filter 0.2s;		transition: filter 0.2s, box-shadow 0.2s;
	}		}

Line 29:		Line 31:
	.mlg-bg {		.mlg-bg {
	position: absolute;		position: absolute;
	~~/* Tighter fit so it doesn't zoom in so far */~~
	top: -5%; left: -5%;		top: -5%; left: -5%;
	width: 110%; height: 110%;		width: 110%; height: 110%;
Line 37:		Line 38:

	.mlg-bg img {		.mlg-bg img {
	~~/* Stretches the image fully instead of cropping */~~
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
Line 89:		Line 89:
	========================================= */		========================================= */

	.mlg-container:hover { animation: mlg-shake 0.15s infinite, mlg-rainbow 0.6s infinite linear; }		/* Triggers a glowing rainbow shadow when hovering, plus the shakes */
			.mlg-container:hover {
			animation: mlg-shake 0.15s infinite, mlg-rainbow 0.6s infinite linear;
			box-shadow: 0 10px 30px rgba(184, 39, 252, 0.5), inset 0 0 25px rgba(0,0,0,0.8);
			}
	.mlg-container:hover .mlg-img { animation: mlg-bounce-img 0.2s infinite alternate; }		.mlg-container:hover .mlg-img { animation: mlg-bounce-img 0.2s infinite alternate; }
	.mlg-container:hover .mlg-bg { opacity: 1; animation: mlg-bg-shake 0.12s infinite alternate; }		.mlg-container:hover .mlg-bg { opacity: 1; animation: mlg-bg-shake 0.12s infinite alternate; }
Line 96:		Line 100:
	.mlg-container:hover .mlg-hit { animation-name: mlg-anim-hit; }		.mlg-container:hover .mlg-hit { animation-name: mlg-anim-hit; }
	.mlg-container:hover .mlg-weed { animation-name: mlg-anim-weed; }		.mlg-container:hover .mlg-weed { animation-name: mlg-anim-weed; }
	.mlg-container:hover .mlg-chip { animation-name: mlg-anim-weed; } ~~/* Chips now float like weed */~~		.mlg-container:hover .mlg-chip { animation-name: mlg-anim-weed; }
	.mlg-container:hover .mlg-spin { animation-name: mlg-anim-spin; opacity: 1; }		.mlg-container:hover .mlg-spin { animation-name: mlg-anim-spin; opacity: 1; }
	.mlg-container:hover .mlg-pulse { animation-name: mlg-anim-pulse; opacity: 1; }		.mlg-container:hover .mlg-pulse { animation-name: mlg-anim-pulse; opacity: 1; }
Line 159:		Line 163:
	}		}

	~~/* Tighter background shake to prevent white edges showing */~~
	@keyframes mlg-bg-shake {		@keyframes mlg-bg-shake {
	0% { transform: translate(-3px, -2px); }		0% { transform: translate(-3px, -2px); }
Line 171:		Line 174:
	}		}

	~~/* Hitmarker: Pop fast, hold briefly, fade out slow */~~
	@keyframes mlg-anim-hit {		@keyframes mlg-anim-hit {
	0% { transform: scale(0); opacity: 1; }		0% { transform: scale(0); opacity: 1; }
Line 180:		Line 182:
	}		}

	~~/* Weed & Chips: Float up and sway */~~
	@keyframes mlg-anim-weed {		@keyframes mlg-anim-weed {
	0% { transform: translate(0, 0) rotate(-15deg); opacity: 0; }		0% { transform: translate(0, 0) rotate(-15deg); opacity: 0; }
Line 188:		Line 189:
	}		}

	~~/* General Meme Debris Animations */~~
	@keyframes mlg-anim-spin {		@keyframes mlg-anim-spin {
	0% { transform: rotate(0deg) scale(0.8); }		0% { transform: rotate(0deg) scale(0.8); }

SomebodyRum at 08:33, 23 April 2026

2026-04-23T08:33:22Z

← Older revision		Revision as of 08:33, 23 April 2026
Line 2:		Line 2:
	.mlg-aligner {		.mlg-aligner {
	display: table;		display: table;
	margin: ~~30px~~ auto; ~~/* Margin increased so the outside props have room to spin */~~		margin: 40px auto;
	}		}

Line 23:		Line 23:
	position: absolute;		position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;		top: 0; left: 0; right: 0; bottom: 0;
	overflow: hidden; ~~/* Clips the background image to the border exactly */~~		overflow: hidden;
	z-index: 0;		z-index: 0;
	}		}
Line 29:		Line 29:
	.mlg-bg {		.mlg-bg {
	position: absolute;		position: absolute;
	top: -15%; left: -15%;		/* Tighter fit so it doesn't zoom in so far */
	width: ~~130~~%; height: ~~130~~%;		top: -5%; left: -5%;
			width: 110%; height: 110%;
	opacity: 0;		opacity: 0;
	transition: opacity 0.2s;		transition: opacity 0.2s;
Line 36:		Line 37:

	.mlg-bg img {		.mlg-bg img {
			/* Stretches the image fully instead of cropping */
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	~~object-fit: cover;~~
	}		}

Line 92:		Line 93:
	.mlg-container:hover .mlg-bg { opacity: 1; animation: mlg-bg-shake 0.12s infinite alternate; }		.mlg-container:hover .mlg-bg { opacity: 1; animation: mlg-bg-shake 0.12s infinite alternate; }

	/* Trigger Particles Safely ~~(Only setting the name so we don't erase durations!)~~ */		/* Trigger Particles Safely */
	.mlg-container:hover .mlg-hit { animation-name: mlg-anim-hit; }		.mlg-container:hover .mlg-hit { animation-name: mlg-anim-hit; }
	.mlg-container:hover .mlg-weed { animation-name: mlg-anim-weed; }		.mlg-container:hover .mlg-weed { animation-name: mlg-anim-weed; }
			.mlg-container:hover .mlg-chip { animation-name: mlg-anim-weed; } /* Chips now float like weed */
	.mlg-container:hover .mlg-spin { animation-name: mlg-anim-spin; opacity: 1; }		.mlg-container:hover .mlg-spin { animation-name: mlg-anim-spin; opacity: 1; }
	.mlg-container:hover .mlg-pulse { animation-name: mlg-anim-pulse; opacity: 1; }		.mlg-container:hover .mlg-pulse { animation-name: mlg-anim-pulse; opacity: 1; }
Line 100:		Line 102:

	/* Base animation rules */		/* Base animation rules */
	.mlg-hit, .mlg-weed, .mlg-pulse { animation-timing-function: linear; animation-iteration-count: infinite; }		.mlg-hit, .mlg-weed, .mlg-chip, .mlg-pulse { animation-timing-function: linear; animation-iteration-count: infinite; }
	.mlg-spin, .mlg-bounce { animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; }		.mlg-spin, .mlg-bounce { animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; }

	/* ~~Particle Positions (Using Safe Pixel Offsets to guarantee they show up outside)~~ */		/* Hitmarkers */
	.h1 { top: -20px; left: 10%; animation-duration: 1.2s; animation-delay: 0.1s; }		.h1 { top: -20px; left: 10%; animation-duration: 1.2s; animation-delay: 0.1s; }
	.h2 { bottom: -10px; right: 5%; animation-duration: 0.9s; animation-delay: 0.4s; }		.h2 { bottom: -10px; right: 5%; animation-duration: 0.9s; animation-delay: 0.4s; }
Line 113:		Line 115:
	.h8 { top: -15px; left: -10px; animation-duration: 1.0s; animation-delay: 0.9s; }		.h8 { top: -15px; left: -10px; animation-duration: 1.0s; animation-delay: 0.9s; }

			/* Floating Weed */
	.w1 { bottom: -30px; left: 5%; animation-duration: 3s; animation-delay: 0s; }		.w1 { bottom: -30px; left: 5%; animation-duration: 3s; animation-delay: 0s; }
	.w2 { bottom: -40px; right: 15%; animation-duration: 4s; animation-delay: 1.5s; }		.w2 { bottom: -40px; right: 15%; animation-duration: 4s; animation-delay: 1.5s; }
	.w3 { bottom: -10px; left: 45%; animation-duration: 3.5s; animation-delay: 0.7s; }		.w3 { bottom: -10px; left: 45%; animation-duration: 3.5s; animation-delay: 0.7s; }

			/* Floating Dorito Chips */
			.c1 { bottom: -20px; left: 25%; animation-duration: 3.2s; animation-delay: 0.5s; }
			.c2 { bottom: -35px; right: 35%; animation-duration: 2.8s; animation-delay: 1.2s; }
			.c3 { bottom: -15px; left: 65%; animation-duration: 4.1s; animation-delay: 0.2s; }

	/* Mountain Dew */		/* Mountain Dew */
	.s1 { top: -35px; left: 30%; animation-duration: 2.5s; animation-delay: 0s; }		.s1 { top: -35px; left: 30%; animation-duration: 2.5s; animation-delay: 0s; }
			.s3 { bottom: -20px; right: 25%; animation-duration: 1.8s; animation-delay: 0.7s; }
			.s4 { top: -10px; left: 55%; animation-duration: 3.0s; animation-delay: 0.3s; }

	/* Illuminati */		/* Illuminati */
	.p1 { top: -25px; right: -25px; animation-duration: 1.5s; animation-delay: 0s; }		.p1 { top: -25px; right: -25px; animation-duration: 1.5s; animation-delay: 0s; }
	~~/* Dorito Chip */~~		.p2 { bottom: -10px; left: -15px; animation-duration: 1.2s; animation-delay: 0.5s; }
	.s2 { top: 45%; left: ~~-30px~~; animation-duration: 2s; animation-delay: 0.5s; }		.p3 { top: 35%; left: 85%; animation-duration: 1.8s; animation-delay: 0.2s; }
	/* Dorito ~~Bag~~ */
			/* Dorito Bags */
	.b1 { bottom: -30px; right: -25px; animation-duration: 0.5s; animation-delay: 0s; }		.b1 { bottom: -30px; right: -25px; animation-duration: 0.5s; animation-delay: 0s; }
			.b2 { top: -40px; left: -5px; animation-duration: 0.6s; animation-delay: 0.2s; }
			.b3 { top: 25%; left: -35px; animation-duration: 0.4s; animation-delay: 0.1s; }


Line 145:		Line 159:
	}		}

			/* Tighter background shake to prevent white edges showing */
	@keyframes mlg-bg-shake {		@keyframes mlg-bg-shake {
	0% { transform: translate(-~~10px~~, -~~5px) scale(1.1~~); }		0% { transform: translate(-3px, -2px); }
	50% { transform: translate(~~10px~~, ~~15px) scale(1.15~~); }		50% { transform: translate(3px, 3px); }
	100% { transform: translate(-~~5px~~, ~~10px) scale(1.1~~); }		100% { transform: translate(-2px, 3px); }
	}		}

Line 165:		Line 180:
	}		}

	/* Weed: Float up and sway */		/* Weed & Chips: Float up and sway */
	@keyframes mlg-anim-weed {		@keyframes mlg-anim-weed {
	0% { transform: translate(0, 0) rotate(-15deg); opacity: 0; }		0% { transform: translate(0, 0) rotate(-15deg); opacity: 0; }

SomebodyRum at 08:26, 23 April 2026

2026-04-23T08:26:57Z

← Older revision		Revision as of 08:26, 23 April 2026
Line 2:		Line 2:
	.mlg-aligner {		.mlg-aligner {
	display: table;		display: table;
	margin: ~~20px~~ auto; /* ~~Increased margin slightly~~ so ~~particles don't clip into other text on~~ the ~~wiki~~ */		margin: 30px auto; /* Margin increased so the outside props have room to spin */
	}		}

Line 17:		Line 17:
	text-transform: uppercase;		text-transform: uppercase;
	transition: filter 0.2s;		transition: filter 0.2s;
	~~/* Intentionally NOT overflow: hidden; so particles can escape the borders */~~
	}		}

Line 36:		Line 35:
	}		}

	~~/* Force the MediaWiki image tag to fill the area */~~
	.mlg-bg img {		.mlg-bg img {
	width: 100%;		width: 100%;
Line 52:		Line 50:
	.mlg-p {		.mlg-p {
	position: absolute;		position: absolute;
	opacity: 0; ~~/* Invisible by default */~~		opacity: 0;
	}		}

Line 58:		Line 56:
	.mlg-inner {		.mlg-inner {
	position: relative;		position: relative;
	z-index: 2; ~~/* Keeps text above background and particles */~~		z-index: 2;
	display: flex;		display: flex;
	flex-flow: row nowrap;		flex-flow: row nowrap;
Line 90:		Line 88:
	========================================= */		========================================= */

	.mlg-container:hover {		.mlg-container:hover { animation: mlg-shake 0.15s infinite, mlg-rainbow 0.6s infinite linear; }
	animation: mlg-shake 0.15s infinite, mlg-rainbow 0.6s infinite linear;
	}
	.mlg-container:hover .mlg-img { animation: mlg-bounce-img 0.2s infinite alternate; }		.mlg-container:hover .mlg-img { animation: mlg-bounce-img 0.2s infinite alternate; }
			.mlg-container:hover .mlg-bg { opacity: 1; animation: mlg-bg-shake 0.12s infinite alternate; }

	/* Trigger ~~Background~~ */		/* Trigger Particles Safely (Only setting the name so we don't erase durations!) */
	.mlg-container:hover .mlg-bg {		.mlg-container:hover .mlg-hit { animation-name: mlg-anim-hit; }
	opacity: 1;		.mlg-container:hover .mlg-weed { animation-name: mlg-anim-weed; }
	~~/* Distinct, more violent shake specifically for the background to create parallax */~~		.mlg-container:hover .mlg-spin { animation-name: mlg-anim-spin; opacity: 1; }
	animation: mlg-bg-~~shake 0.12s infinite alternate~~;		.mlg-container:hover .mlg-pulse { animation-name: mlg-anim-pulse; opacity: 1; }
	}		.mlg-container:hover .mlg-bounce { animation-name: mlg-anim-bounce; opacity: 1; }

	/* ~~Trigger Particles~~ */		/* Base animation rules */
	.mlg~~-container:hover .mlg-hit { animation: mlg-anim~~-hit ~~linear infinite; }~~		.mlg-hit, .mlg-weed, .mlg-pulse { animation-timing-function: linear; animation-iteration-count: infinite; }
	.mlg-~~container:hover~~ .mlg-~~weed~~ { animation~~: mlg~~-~~anim~~-~~weed~~ linear ~~infinite~~; }		.mlg-spin, .mlg-bounce { animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; }
	~~.mlg~~-~~container:hover .mlg~~-~~spin { animation~~: ~~mlg-anim-spin linear~~ infinite ~~alternate~~; }
	.mlg-~~container:hover~~ .mlg-~~pulse~~ { animation~~: mlg~~-~~anim~~-~~pulse~~ linear ~~infinite~~; }
	~~.mlg~~-~~container~~:~~hover .mlg~~-~~bounce { animation~~: ~~mlg-anim-bounce linear infinite~~ alternate; }

	/* Particle Positions (~~Staggered around the edges~~) */		/* Particle Positions (Using Safe Pixel Offsets to guarantee they show up outside) */
	.h1 { top: -5%; left: 10%; animation-duration: 1.2s; animation-delay: 0.1s; }		.h1 { top: -20px; left: 10%; animation-duration: 1.2s; animation-delay: 0.1s; }
	.h2 { ~~top~~: ~~80%~~; ~~left~~: 85%; animation-duration: 0.9s; animation-delay: 0.4s; }		.h2 { bottom: -10px; right: 5%; animation-duration: 0.9s; animation-delay: 0.4s; }
	.h3 { top: 40%; left: -8%; animation-duration: 1.4s; animation-delay: 0.2s; }		.h3 { top: 40%; left: -25px; animation-duration: 1.4s; animation-delay: 0.2s; }
	.h4 { top: 15%; ~~left~~: ~~95%~~; animation-duration: 1.1s; animation-delay: 0.7s; }		.h4 { top: 15%; right: -15px; animation-duration: 1.1s; animation-delay: 0.7s; }
	.h5 { top: -~~10%~~; left: 70%; animation-duration: 1.5s; animation-delay: 0.5s; }		.h5 { top: -25px; left: 70%; animation-duration: 1.5s; animation-delay: 0.5s; }
	.h6 { ~~top~~: ~~75%~~; left: 15%; animation-duration: 0.8s; animation-delay: 0.8s; }		.h6 { bottom: -20px; left: 15%; animation-duration: 0.8s; animation-delay: 0.8s; }
	.h7 { top: 50%; left: 50%; animation-duration: 1.3s; animation-delay: 0.3s; }		.h7 { top: 50%; left: 50%; animation-duration: 1.3s; animation-delay: 0.3s; }
	.h8 { top: -~~12%~~; left: -2%; animation-duration: 1.0s; animation-delay: 0.9s; }		.h8 { top: -15px; left: -10px; animation-duration: 1.0s; animation-delay: 0.9s; }

	.w1 { ~~top~~: ~~80%~~; left: 5%; animation-duration: 3s; animation-delay: 0s; }		.w1 { bottom: -30px; left: 5%; animation-duration: 3s; animation-delay: 0s; }
	.w2 { ~~top~~: ~~90%~~; ~~left~~: 80%; animation-duration: 4s; animation-delay: 1.5s; }		.w2 { bottom: -40px; right: 15%; animation-duration: 4s; animation-delay: 1.5s; }
	.w3 { ~~top~~: ~~85%~~; left: 45%; animation-duration: 3.5s; animation-delay: 0.7s; }		.w3 { bottom: -10px; left: 45%; animation-duration: 3.5s; animation-delay: 0.7s; }

	.s1 { top: -~~15%~~; left: 35%; animation-duration: 2.5s; animation-delay: 0s; }		/* Mountain Dew */
	.p1 { top: -8%; ~~left~~: ~~85%~~; animation-duration: 1.5s; animation-delay: 0s; }		.s1 { top: -35px; left: 30%; animation-duration: 2.5s; animation-delay: 0s; }
	.s2 { top: 45%; left: -~~10%~~; animation-duration: 2s; animation-delay: 0.5s; }		/* Illuminati */
	.b1 { ~~top~~: ~~85%~~; ~~left~~: ~~90%~~; animation-duration: 0.5s; animation-delay: 0s; }		.p1 { top: -25px; right: -25px; animation-duration: 1.5s; animation-delay: 0s; }
			/* Dorito Chip */
			.s2 { top: 45%; left: -30px; animation-duration: 2s; animation-delay: 0.5s; }
			/* Dorito Bag */
			.b1 { bottom: -30px; right: -25px; animation-duration: 0.5s; animation-delay: 0s; }


Line 177:		Line 175:
	/* General Meme Debris Animations */		/* General Meme Debris Animations */
	@keyframes mlg-anim-spin {		@keyframes mlg-anim-spin {
	0% { transform: rotate(0deg) scale(0.8)~~; opacity: 1~~; }		0% { transform: rotate(0deg) scale(0.8); }
	100% { transform: rotate(360deg) scale(1.2)~~; opacity: 1~~; }		100% { transform: rotate(360deg) scale(1.2); }
	}		}

	@keyframes mlg-anim-pulse {		@keyframes mlg-anim-pulse {
	0% { transform: scale(1)~~; opacity: 1~~; }		0% { transform: scale(1); }
	50% { transform: scale(1.3)~~; opacity: 1~~; }		50% { transform: scale(1.3); }
	100% { transform: scale(1)~~; opacity: 1~~; }		100% { transform: scale(1); }
	}		}

	@keyframes mlg-anim-bounce {		@keyframes mlg-anim-bounce {
	0% { transform: translateY(0)~~; opacity: 1~~; }		0% { transform: translateY(0); }
	100% { transform: translateY(-30px)~~; opacity: 1~~; }		100% { transform: translateY(-30px); }
	}		}

SomebodyRum at 08:23, 23 April 2026

2026-04-23T08:23:11Z

Show changes

SomebodyRum: Created page with "/* 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;..."

2026-04-23T08:02:17Z

Created page with "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;..."

New page

/* 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); }
}