/* 90s retro stylesheet for Nugget Food Rating */
html, body {
    height: 100%;
    margin: 0;
    background-color: #f5f0f5;
    background-image: 
        repeating-linear-gradient(to right, transparent 0px, transparent 1em, rgba(200,150,255,.1) 1em, rgba(200,150,255,.1) 2em),
        repeating-linear-gradient(to bottom, transparent 0px, transparent 1em, rgba(150,200,255,.1) 1em, rgba(150,200,255,.1) 2em);
    background-size: 80px 80px;
    font-family: 'Comic Sans MS', 'Arial', sans-serif;
    color: #333;
    overflow-x: hidden;
}

/* Center page content */
.container {
    max-width: 980px;
    margin: 28px auto;
    padding: 20px;
    background: linear-gradient(135deg, #ffaaaa, #ffddaa, #ffffaa, #aaffaa, #aaddff, #ddaaff, #ffaaff);
    border: 8px solid #ff00ff;
    box-shadow: 12px 12px 0 #ff0099, 
                18px 18px 0 #00ffff, 
                24px 24px 0 #ffff00,
                0 0 30px rgba(255,0,255,0.8);
    position: relative;
    z-index: 10;
}

/* Header with surrounding images - vertically center text between images */
h1 {
    display: flex;
    align-items: center; /* vertically center between images */
    justify-content: center;
    gap: 18px;
    font-size: 48px;
    margin: 6px 0 12px 0;
    color: #dd00ff;
    text-shadow: 2px 2px 0 #e6c3e6, 
                 4px 4px 0 #f0dff0;
}

/* Make header images big and blocky (pixelated look) */
h1 img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Retro h2 color - prominent headers */
h2 {
    color: #dd00ff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 28px;
    text-shadow: 2px 2px 0 #e6c3e6,
                 4px 4px 0 #f0dff0;
    margin: 20px 0 16px 0;
    text-align: center;
}

.proposals-section h2 {
    text-align: center;
}

/* Shiny headers in ratings section */
.ratings-section h3 {
    color: #dd00ff;
    font-size: 24px;
    text-shadow: 2px 2px 0 #e6c3e6,
                 4px 4px 0 #f0dff0;
    margin: 0 0 8px 0;
}

/* Prominent headers in proposals section */
.proposals-section h3 {
    color: #00f2ff;
    font-size: 26px;
    text-shadow: 2px 2px 0 #e6c3e6,
                 4px 4px 0 #f0dff0;
    margin: 20px 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: left;
}

.proposals-section h4 {
    color: #dd00ff;
    font-size: 20px;
    text-shadow: 2px 2px 0 #e6c3e6,
                 4px 4px 0 #f0dff0;
    margin: 12px 0 8px 0;
}

/* Entries: bold borders, bright shadows */
.entry {
    border: 4px dashed #dd00ff;
    padding: 14px;
    margin: 14px 0;
    background: #ffe0e0;
    box-shadow: 6px 6px 0 #f5e6ff, 8px 8px 0 #faf0ff;
}

/* Ratings section: flashy entries
.ratings-section .entry {
    border: 4px dashed #ff69b4;
    padding: 14px;
    margin: 14px 0;
    background: linear-gradient(180deg, #fff8dc, #fff0d6);
    box-shadow: 6px 6px 0 #00ffff;
}

/* Proposals section: clean list format
.proposals-section .entry {
    border: none;
    border-bottom: 1px solid #b8a8c8;
    padding: 12px 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
} */

.proposals-section p {
    font-size: 14px;
    margin: 4px 0;
    text-align: left;
}

/* Proposals form: left-aligned and toned down */
.proposals-section form {
    text-align: left;
    background: rgba(255, 255, 255, 0.7);
    padding: 12px;
    margin: 12px auto;
    border: 2px solid #ccc;
    max-width: 100%;
}

.proposals-section label {
    display: block;
    margin: 12px 0 6px 0;
    color: #6a00ff;
    font-weight: bold;
    font-size: 16px;
}

.proposals-section input,
.proposals-section textarea {
    width: calc(100% - 24px);
    padding: 0.1em;
    margin: 8px 0 -24px 0;
    border: 3px solid #d0b8e8;
    font-family: inherit;
    font-size: 1.2em;
    background: #fffbff;
    box-sizing: border-box;
}

.proposals-section button {
    padding: 8px 16px;
    background: #999;
    color: #fff;
    border: 1px solid #666;
    cursor: pointer;
}

/* Make food images larger and prominent */
.entry img {
    max-width: 260px;
    height: auto;
    display: block;
    margin: 6px 0;
    image-rendering: pixelated;
}

/* Dither effect on last image (yours_truly) */
.container > section:last-of-type img,
body > section:last-of-type img {
    filter: contrast(1.2) saturate(0.8) url(#dither);
    image-rendering: pixelated;
}

/* Rating text: highly impactful */
.ratings-section .entry p:first-of-type {
    font-size: 26px;
    font-weight: bold;
    margin: 12px 0;
    text-shadow: 2px 2px 0 #e6c3e6,
                 4px 4px 0 #f0dff0;
    letter-spacing: 2px;
    color: #dd00ff;
}

.entry p {
    font-size: 16px;
    margin: 8px 0;
    color: #000;
    line-height: 1.6;
}

/* Emphasize creator line */
.entry em {
    color: #1d79f9;
    font-style: italic;
    text-shadow: 2px 2px 0 #d9d9e6;
    font-weight: bold;
}

/* Cap large images (like in yours_truly.php) to container width */
body > img,
body > div > img,
.container > section:last-of-type img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Make yours_truly section flashy */
body > section:last-of-type,
.container > section:last-of-type {
    background: transparent;
    border: none;
    padding: 16px;
    margin: 20px 0;
    box-shadow: none;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
}

/* Keyframe animation for wobbly text */
@keyframes wobble {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(-6deg) translateX(0.2em); }
    50% { transform: rotate(6deg) translateX(-0.2em); }
    75% { transform: rotate(-6deg) translateX(0.2em); }
}

/* Wobble h2 in yours_truly section */
.container > section:last-of-type h2 {
    animation: wobble 2s ease-in-out infinite;
    display: inline-block;
    font-size: 32px;
    color: #dd00ff;
    text-shadow: 3px 3px 0 #e6c3e6,
                 6px 6px 0 #f0dff0,
                 -2px -2px 0 #f0b0b0;
    letter-spacing: 3px;
}

.container > section:last-of-type {
    color: #dd00ff;
    text-shadow: 2px 2px 0 #e6c3e6,
                 4px 4px 0 #f0dff0;
    letter-spacing: 3px;
    line-height: 1.8;
}

.container > section:last-of-type br {
    display: block;
    height: 8px;
    content: '';
}

/* Small-screen tweaks */
@media (max-width: 640px) {
    h1 { font-size: 32px; gap: 8px; }
    h1 img { width: 56px; height: 56px; }
    .entry img { max-width: 180px; }
    .container { margin: 12px; padding: 12px; }
}

/* Flying nugget animations - 15 GIFs with 4-5 second cycles, randomized paths */
@keyframes fly1 { 0% { transform: translateY(-100px) translateX(3vw); } 100% { transform: translateY(120vh) translateX(12vw); } }
@keyframes fly2 { 0% { transform: translateY(-100px) translateX(8vw); } 100% { transform: translateY(120vh) translateX(18vw); } }
@keyframes fly3 { 0% { transform: translateY(-100px) translateX(15vw); } 100% { transform: translateY(120vh) translateX(24vw); } }
@keyframes fly4 { 0% { transform: translateY(-100px) translateX(22vw); } 100% { transform: translateY(120vh) translateX(30vw); } }
@keyframes fly5 { 0% { transform: translateY(-100px) translateX(28vw); } 100% { transform: translateY(120vh) translateX(37vw); } }
@keyframes fly6 { 0% { transform: translateY(-100px) translateX(35vw); } 100% { transform: translateY(120vh) translateX(43vw); } }
@keyframes fly7 { 0% { transform: translateY(-100px) translateX(42vw); } 100% { transform: translateY(120vh) translateX(50vw); } }
@keyframes fly8 { 0% { transform: translateY(-100px) translateX(50vw); } 100% { transform: translateY(120vh) translateX(57vw); } }
@keyframes fly9 { 0% { transform: translateY(-100px) translateX(57vw); } 100% { transform: translateY(120vh) translateX(64vw); } }
@keyframes fly10 { 0% { transform: translateY(-100px) translateX(64vw); } 100% { transform: translateY(120vh) translateX(70vw); } }
@keyframes fly11 { 0% { transform: translateY(-100px) translateX(70vw); } 100% { transform: translateY(120vh) translateX(77vw); } }
@keyframes fly12 { 0% { transform: translateY(-100px) translateX(77vw); } 100% { transform: translateY(120vh) translateX(83vw); } }
@keyframes fly13 { 0% { transform: translateY(-100px) translateX(83vw); } 100% { transform: translateY(120vh) translateX(89vw); } }
@keyframes fly14 { 0% { transform: translateY(-100px) translateX(89vw); } 100% { transform: translateY(120vh) translateX(96vw); } }
@keyframes fly15 { 0% { transform: translateY(-100px) translateX(5vw); } 100% { transform: translateY(120vh) translateX(15vw); } }

.flying-nugget {
    position: fixed;
    width: 60px;
    height: 60px;
    pointer-events: none;
    opacity: 0.75;
    z-index: 5;
    image-rendering: pixelated;
    will-change: transform;
    top: 0;
    left: 0;
}

.flying-nugget:nth-child(1) { animation: fly1 4.2s linear infinite; }
.flying-nugget:nth-child(2) { animation: fly2 4.5s linear infinite 0.15s; }
.flying-nugget:nth-child(3) { animation: fly3 4.8s linear infinite 0.3s; }
.flying-nugget:nth-child(4) { animation: fly4 4.3s linear infinite 0.45s; }
.flying-nugget:nth-child(5) { animation: fly5 4.7s linear infinite 0.6s; }
.flying-nugget:nth-child(6) { animation: fly6 4.4s linear infinite 0.75s; }
.flying-nugget:nth-child(7) { animation: fly7 4.9s linear infinite 0.9s; }
.flying-nugget:nth-child(8) { animation: fly8 4.6s linear infinite 1.05s; }
.flying-nugget:nth-child(9) { animation: fly9 4.1s linear infinite 1.2s; }
.flying-nugget:nth-child(10) { animation: fly10 4.8s linear infinite 1.35s; }
.flying-nugget:nth-child(11) { animation: fly11 4.5s linear infinite 1.5s; }
.flying-nugget:nth-child(12) { animation: fly12 4.3s linear infinite 1.65s; }
.flying-nugget:nth-child(13) { animation: fly13 4.7s linear infinite 1.8s; }
.flying-nugget:nth-child(14) { animation: fly14 4.4s linear infinite 1.95s; }
.flying-nugget:nth-child(15) { animation: fly15 4.9s linear infinite 0.3s; }

.flying-nugget {
    position: fixed;
    width: 60px;
    height: 60px;
    pointer-events: none;
    opacity: 0.75;
    z-index: 5;
    image-rendering: pixelated;
    will-change: transform;
    top: 0;
    left: 0;
}

.flying-nugget:nth-child(1) { animation: fly1 4s linear infinite; }
.flying-nugget:nth-child(2) { animation: fly2 4s linear infinite 0.3s; }
.flying-nugget:nth-child(3) { animation: fly3 4s linear infinite 0.6s; }
.flying-nugget:nth-child(4) { animation: fly4 4s linear infinite 0.9s; }
.flying-nugget:nth-child(5) { animation: fly5 4s linear infinite 1.2s; }
.flying-nugget:nth-child(6) { animation: fly6 4s linear infinite 1.5s; }
.flying-nugget:nth-child(7) { animation: fly7 4s linear infinite 1.8s; }
.flying-nugget:nth-child(8) { animation: fly8 4s linear infinite 2.1s; }
.flying-nugget:nth-child(9) { animation: fly9 4s linear infinite 2.4s; }
.flying-nugget:nth-child(10) { animation: fly10 4s linear infinite 2.7s; }