<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reversing Computers</title>
    <style>
        body {
            background-color: #454545;
            background-image: url("https://www.transparenttextures.com/patterns/3px-tile.png");
            font-family: "Comic Sans MS", cursive, sans-serif;
            color: #333333;
            margin: 0;
            padding: 0;
        }

        .wrapper {
            width: 100%;
            max-width: 1000px; /* Set a maximum width for the content */
            margin: 0 auto; /* This centers the container horizontally */
            text-align: center;
            padding: 20px;
        }

        .header {
            background-color: #444444;
            padding: 20px;
            border: 5px solid #555555;
            margin-bottom: 20px;
        }

        h1 {
            font-size: 48px;
            text-shadow: 2px 2px 5px #222222;
            color: #FFFFFF;
        }

        .content {
            background-color: #555555;
            border: 5px solid #666666;
            padding: 20px;
            margin-bottom: 20px;
        }

        h2 {
            font-size: 24px;
            color: #FFFFFF;
            text-decoration: underline;
            text-transform: uppercase;
        }

        ul {
            list-style-type: none;
            padding-left: 20px;
        }

        ul li {
            font-size: 18px;
            color: #DDDDDD;
            background-color: #444444;
            margin-bottom: 10px;
            padding: 10px;
            border: 2px solid #555555;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        ul li:hover {
            background-color: #666666;
        }

        .gif-box {
            background-color: black;
            border: 2px solid #777777;
            padding: 15px;
            margin: 15px 0;
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
        }

        .gif-box img {
            width: 25%;
            max-width: 300px;
        }

        .footer {
            background-color: #222222;
            color: #FFFFFF;
            font-size: 14px;
            padding: 10px;
            margin-top: 20px;
            border-top: 5px dashed #444444;
        }

        a {
            color: #BBBBBB;
            text-decoration: none;
        }

        a:hover {
            color: #FFFFFF;
        }

        .panel {
            display: none;
            padding: 10px;
            background-color: #666666;
            margin-top: 5px;
            border: 1px solid #777777;
            color: #DDDDDD;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <!-- GIF Box 1 -->
            <h1>
                <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/542e9975-e6a8-4c43-a772-059cbf61b788/df5ktfm-0a299c58-0ef9-4756-8bb6-3e918165ae4c.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU0MmU5OTc1LWU2YTgtNGM0My1hNzcyLTA1OWNiZjYxYjc4OFwvZGY1a3RmbS0wYTI5OWM1OC0wZWY5LTQ3NTYtOGJiNi0zZTkxODE2NWFlNGMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.K35Te3w7daxK0KK1XC_fA2aMf5MhcRH5kI5aAq_ACJg">
                Reverse Engineering 101!
                <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbjg7zj-21f53151-e317-41dd-ae80-8f5d88ead1eb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJqZzd6ai0yMWY1MzE1MS1lMzE3LTQxZGQtYWU4MC04ZjVkODhlYWQxZWIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.rQju-U7Allxz06dXseI17xmvk0faYZ0EdpFp1MQBxnI">
                <div class="gif-box">
                    <img src="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXR0dGtjZXg1cno2MWpxdHZleXBzamRsN3RuNWdoc2l2OXFxMTBmNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/uhhEKTfedQowM/giphy.webp" alt="90s Animated GIF 2">
                    <img src="https://64.media.tumblr.com/13cfdf96453303a0765584f9daeb23a6/9351057c85de7b88-29/s400x600/18e1d364d585b7edff5290e7fa33a13bc91b14ce.gif" alt="90s Animated GIF 1">
                    <img src="https://i.pinimg.com/originals/1a/ce/b6/1aceb69476896bfea27f3fecbab74450.gif" alt="90s Animated GIF 2">
                </div>
            </h1>
        </div>

        <div class="content">
            <h2>About This Webpage</h2>
            <p>This is a webpage designed to teach the basics on reverse engineering programs.</p>

            <h2>Topics In Order</h2>
            <ul>
                <li onclick="togglePanel('feature1')">printf("Hello World")</li>
                <div id="feature1" class="panel">
                    <p>Experience an immersive 90s texture that enhances the nostalgic vibe.</p>
                </div>
                <li onclick="togglePanel('feature2')">Minimalist monochrome color scheme</li>
                <div id="feature2" class="panel">
                    <p>The classic black, white, and grey scheme for a timeless look.</p>
                </div>
                <li onclick="togglePanel('feature3')">Classic 90s fonts and layout</li>
                <div id="feature3" class="panel">
                    <p>Fonts that remind you of the early internet days.</p>
                </div>
                <li onclick="togglePanel('feature4')">And of course, animated GIFs!</li>
                <div id="feature4" class="panel">
                    <p>Animated GIFs from the 90s bring the page to life!</p>
                </div>
            </ul>

            <h2>Check out these GIFs</h2>
        </div>

        <div class="footer">
            <p>Made with love, the 90s way!</p>
        </div>
    </div>

    <script>
        function togglePanel(featureId) {
            var panel = document.getElementById(featureId);
            if (panel.style.display === "block") {
                panel.style.display = "none";
            } else {
                panel.style.display = "block";
            }
        }
    </script>
</body>
</html>
