Template:MLG/styles.css

/* Table wrapper forces perfect shrink-wrapping */
.mlg-aligner {
	display: table;
	margin: 30px auto; /* Margin increased so the outside props have room to spin */
}

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

/* 1. Hover Background Image Layers */
.mlg-bg-wrapper {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	overflow: hidden; /* Clips the background image to the border exactly */
	z-index: 0;
}

.mlg-bg {
	position: absolute;
	top: -15%; left: -15%; 
	width: 130%; height: 130%;
	opacity: 0;
	transition: opacity 0.2s;
}

.mlg-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 2. Particles Container & Base Class */
.mlg-particles {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	z-index: 1;
}

.mlg-p {
	position: absolute;
	opacity: 0; 
}

/* 3. Main Content Wrapper */
.mlg-inner {
	position: relative;
	z-index: 2; 
	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; }

.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,1);
}

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


/* =========================================
   HOVER TRIGGERS & ANIMATIONS
========================================= */

.mlg-container:hover { 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-bg { opacity: 1; animation: mlg-bg-shake 0.12s infinite alternate; }

/* Trigger Particles Safely (Only setting the name so we don't erase durations!) */
.mlg-container:hover .mlg-hit { animation-name: mlg-anim-hit; }
.mlg-container:hover .mlg-weed { animation-name: mlg-anim-weed; }
.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-bounce { animation-name: mlg-anim-bounce; opacity: 1; }

/* Base animation rules */
.mlg-hit, .mlg-weed, .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; }

/* Particle Positions (Using Safe Pixel Offsets to guarantee they show up outside) */
.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; }
.h3 { top: 40%; left: -25px; animation-duration: 1.4s; animation-delay: 0.2s; }
.h4 { top: 15%; right: -15px; animation-duration: 1.1s; animation-delay: 0.7s; }
.h5 { top: -25px; left: 70%; animation-duration: 1.5s; animation-delay: 0.5s; }
.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; }
.h8 { top: -15px; left: -10px; animation-duration: 1.0s; animation-delay: 0.9s; }

.w1 { bottom: -30px; left: 5%; animation-duration: 3s; animation-delay: 0s; }
.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; }

/* Mountain Dew */
.s1 { top: -35px; left: 30%; animation-duration: 2.5s; animation-delay: 0s; }
/* Illuminati */
.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; }


/* =========================================
   KEYFRAMES
========================================= */

@keyframes mlg-rainbow {
	0% { filter: hue-rotate(0deg) saturate(200%); }
	100% { filter: hue-rotate(360deg) saturate(200%); }
}

@keyframes mlg-shake {
	0% { transform: translate(2px, 1px) rotate(0deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes mlg-bg-shake {
	0% { transform: translate(-10px, -5px) scale(1.1); }
	50% { transform: translate(10px, 15px) scale(1.15); }
	100% { transform: translate(-5px, 10px) scale(1.1); }
}

@keyframes mlg-bounce-img {
	0% { transform: scale(1) rotate(-5deg); }
	100% { transform: scale(1.1) rotate(5deg); }
}

/* Hitmarker: Pop fast, hold briefly, fade out slow */
@keyframes mlg-anim-hit {
	0% { transform: scale(0); opacity: 1; }
	10% { transform: scale(1.5); opacity: 1; }
	20% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1); opacity: 0; }
	100% { transform: scale(1); opacity: 0; }
}

/* Weed: Float up and sway */
@keyframes mlg-anim-weed {
	0% { transform: translate(0, 0) rotate(-15deg); opacity: 0; }
	20% { opacity: 1; }
	80% { opacity: 1; }
	100% { transform: translate(20px, -120px) rotate(15deg); opacity: 0; }
}

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

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

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