<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Red and Gold Image Overlay</title>
<style>
    /* A wrapper that contains the image plus an overlay */
    .red-gold-wrapper {
      position: relative;
      display: inline-block; /* or block, depending on your layout */
      max-width: 400px;     /* adjust as needed */
    }

    /* The underlying image itself */
    .red-gold-wrapper img {
      display: block; /* Remove default inline spacing */
      width: 100%;    /* Scales image to the wrapper's width */
      height: auto;
    }

    /* The overlay: a gradient from red to gold */
    .red-gold-wrapper::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /* Semi-transparent linear gradient: red to gold */
      background: linear-gradient(45deg, rgba(255, 0, 0, 0.4), rgba(255, 215, 0, 0.4));
      /* Combine the gradient with the underlying image */
      mix-blend-mode: multiply; /* or overlay, color-burn, etc. */
      pointer-events: none;     /* the overlay doesn’t block clicks */
    }
</style>
</head>
<body>

<h1>Red + Gold Overlay</h1>
<div class="red-gold-wrapper">
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Lenin.jpg/320px-Lenin.jpg"
      alt="Communist Themed"
    />
</div>

</body>
</html>

<h1>Red + Gold Image Filter</h1>
<img
    class="communist-image"
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Lenin.jpg/320px-Lenin.jpg"
    alt="Communist Themed"
/>

</body>
</html>
    /* Inline CSS (optional, if you don't want a separate CSS file) */
    /* style.css */

/* Global resets */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Impact, "Arial Black", sans-serif;
}

/* Body styles */
body {
background: linear-gradient(to bottom, #b30000 0%, #660000 80%);
color: #f5f5f5;
text-align: center;
}

/* Communist banner / header */
.communist-banner {
position: relative;
background: #cc0000;
padding: 2rem;
border-bottom: 5px solid #fdf235; /* Gold color reminiscent of Soviet icons */
}

.communist-banner h1 {
font-size: 3rem;
color: #fdf235; /* Bold gold color */
text-shadow: 2px 2px #8c0000; /* subtle shadow */
letter-spacing: 3px;
margin-bottom: 1rem;
}

/* The star in the banner */
.banner-star {
width: 80px;
height: 80px;
margin: 0 auto;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Red_star.svg/120px-Red_star.svg.png') no-repeat center center;
background-size: contain;
}

/* Main section (Propaganda Section) */
.propaganda-section {
max-width: 600px;
margin: 3rem auto;
background-color: rgba(255, 215, 0, 0.1); /* Light gold overlay */
padding: 2rem;
border: 2px dashed #fdf235;
}

.propaganda-section h2 {
font-size: 2rem;
margin-bottom: 1rem;
}

.propaganda-section p {
font-size: 1.2rem;
margin-bottom: 1rem;
line-height: 1.5;
}

/* Manifesto button */
.flash-button {
background: #fdf235;
color: #b30000;
border: none;
font-size: 1.2rem;
padding: 0.7rem 1.4rem;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
transition: background-color 0.3s ease;
}

.flash-button:hover {
background: #fbbb0f;
}

/* Hidden content */
.hidden {
display: none;
margin-top: 2rem;
border: 2px dashed #fdf235;
padding: 1rem;
}

/* Manifesto reveal styling */
#manifesto h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: #ffcccc;
}

/* Footer */
footer {
margin-top: 3rem;
background: #8c0000;
color: #fdf235;
padding: 1rem 0;
border-top: 5px solid #fdf235;
}

/* Subtle animation keyframes for “extreme” effect */
@keyframes shakeBanner {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
50% { transform: translateX(2px); }
75% { transform: translateX(-2px); }
}

/* Animate the banner to give a propaganda vibe */
.communist-banner {
animation: shakeBanner 0.5s infinite;
}

/*rgba(255,0,0,0.4) → 0.6, 0.8, etc.
}

</style>
</head>
<body>
<header>
    <div class="communist-banner">
      <h1>GLORY TO THE REVOLUTION</h1>
      <div class="banner-star"></div>
    </div>
</header>

<main>
    <section class="propaganda-section">
      <h2>Workers of the world, unite!</h2>
      <p>
        This is the new era of unbreakable unity. Strength in numbers, spirit, and solidarity.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet tristique ligula. Nulla facilisi.
      </p>
      <button id="manifestoBtn" class="flash-button">READ THE MANIFESTO</button>
      <div id="manifesto" class="hidden">
        <h3>The Manifesto</h3>
        <p>
          From each according to his ability, to each according to his needs.
        </p>
      </div>
    </section>
</main>

<footer>
    <p>© 2024 - The People’s Web</p>
</footer>


<script src="script.js"></script>
<script>
    // script.js

document.addEventListener('DOMContentLoaded', () => {
const manifestoBtn = document.getElementById('manifestoBtn');
const manifestoContent = document.getElementById('manifesto');

manifestoBtn.addEventListener('click', () => {
    // Toggle the hidden class
    if (manifestoContent.classList.contains('hidden')) {
      manifestoContent.classList.remove('hidden');
      manifestoBtn.textContent = 'HIDE THE MANIFESTO';
    } else {
      manifestoContent.classList.add('hidden');
      manifestoBtn.textContent = 'READ THE MANIFESTO';
    }
});
});// Inline JS (if not using a separate JS file)
</script>
</body>
</html>

(function() {
// Create a <style> element
const style = document.createElement('style');
style.type = 'text/css';
// CSS rules that turn everything red and gold, and images tinted
style.appendChild(document.createTextNode(`
    * {
      background-color: #B30000 !important;
      color: #FDF235 !important;
      border-color: #FDF235 !important;
    }
    a {
      color: #FFD700 !important; /* a brighter gold for links */
    }
    img, video, iframe {
      filter: sepia(1) saturate(10) hue-rotate(-20deg) brightness(1.2) !important;
    }
`));
// Insert the <style> in the page
document.head.appendChild(style);
})();