/* -----------------------------
    COLOR VARIABLES
----------------------------- */
:root {
    --pixel-1: #fd289c;
    --pixel-2: #faf1b6;
    --pixel-3: #1efffa;
    --pixel-4: #fbfff1;
    --pixel-5: #a443ee;
    --pixel-6: #499dcf;
    --pixel-7: #fc4568;
    --pixel-8: #a9a69f;

    --bg: #322f3c;
    --text: #ffffff;
}

/* -----------------------------
   GENERAL LAYOUT
----------------------------- */
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
    height: 100vh;
}

.wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

h1 {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    color: var(--text);
}

/* -----------------------------
   PIXEL SIZE CLASSES
----------------------------- */
.pixel-xs { width: 20px; height: 20px; }
.pixel-sm { width: 32px; height: 32px; }
.pixel-md { width: 48px; height: 48px; }
.pixel-lg { width: 64px; height: 64px; }
.pixel-xl { width: 80px; height: 80px; }

/* -----------------------------
   FLOATING ANIMATION
----------------------------- */
@keyframes float {
    0%   { transform: translateY(0) rotate(var(--rot)); }
    50%  { transform: translateY(-15px) rotate(calc(var(--rot) + 6deg)); }
    100% { transform: translateY(0) rotate(var(--rot)); }
}

.pixel {
    position: absolute;
    opacity: 0.85;
    animation: float 6s ease-in-out infinite;
    image-rendering: pixelated;
}

/* -----------------------------
   INDIVIDUAL POSITIONS + ROTATIONS + DELAYS
   (You can tweak these anytime)
----------------------------- */

.p1 { background: var(--pixel-1); top: 10%; left: 15%; --rot: 12deg; animation-delay: 0s; }
.p2 { background: var(--pixel-2); top: 70%; left: 8%;  --rot: -18deg; animation-delay: 1s; }
.p3 { background: var(--pixel-3); top: 25%; left: 70%; --rot: 30deg; animation-delay: 2.2s; }
.p4 { background: var(--pixel-4); top: 80%; left: 60%; --rot: -25deg; animation-delay: 0.8s; }
.p5 { background: var(--pixel-5); top: 50%; left: 85%; --rot: 8deg; animation-delay: 1.7s; }
.p6 { background: var(--pixel-6); top: 40%; left: 35%; --rot: -12deg; animation-delay: 2.8s; }
.p7 { background: var(--pixel-7); top: 15%; left: 50%; --rot: 20deg; animation-delay: 0.4s; }
.p8 { background: var(--pixel-8); top: 65%; left: 40%; --rot: -30deg; animation-delay: 2.5s; }

/* -----------------------------
   MOBILE ADJUSTMENTS
----------------------------- */
@media (max-width: 600px) {
    h1 { font-size: 2.5rem; }
    .pixel-xs { width: 15px; height: 15px; }
    .pixel-sm { width: 22px; height: 22px; }
    .pixel-md { width: 30px; height: 30px; }
    .pixel-lg { width: 40px; height: 40px; }
    .pixel-xl { width: 55px; height: 55px; }
}