<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FIFA Champions</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: sans-serif;
        }

        body {
            background-color: white;
            color: black;
        }

        .top-bar {
            background-color: #003366; /* Darker blue */
            color: white;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 30px;
            width: 100%;
            position: relative;
            z-index: 1000; /* Highest layer */
        }

        .top-bar img {
            height: 40px;
            width: 40px;
            border-radius: 50%;
        }

        .top-bar div {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .menu-button {
            font-size: 24px;
            cursor: pointer;
            background: none;
            border: none;
            color: white;
        }

        /* Menu position and transition */
        .menu {
            background-color: #002244; /* Darker blue */
            position: absolute;
            top: 8%; /* Position directly below the blue bar */
            left: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            transform: translateY(-100%); /* Initially hidden above the bar */
            transition: transform 0.5s ease; /* Smooth transition */
            border-radius: 0 0 20px 20px; /* Rounded corners at the bottom */
            z-index: 999; /* Second-highest layer */
        }

        /* Menu links */
        .menu a {
            color: white;
            text-decoration: none;
            padding: 15px;
            text-align: center;
            display: block;
        }

        .home-content {
            margin-top: 20px;
            padding: 20px;
        }

        /* When the menu is active, it smoothly slides */
        .menu.open {
            transform: translateY(0); /* Menu slides down to its position */
            z-index: 999; /* Make the menu visible when open */
        }

        /* Rules section content */
        .rules-text {
            padding-top: 30px;
            padding-left: 20px;
            font-size: 18px;
        }

    </style>
</head>
<body>
    <div class="top-bar">
        <div>
            <img src="https://cdn.discordapp.com/attachments/1334956170267459626/1334957318084886538/generated-image-1737817908094.png.jpg?ex=679e6b62&is=679d19e2&hm=e19628d950fb883f7d7ecee2cbb86988cb04bb005b43074618d8aec3c3b461a4&" alt="Logo">
            FIFA CHAMPIONS
        </div>
        <button class="menu-button" onclick="toggleMenu()">☰</button>
    </div>

    <div class="menu" id="menu">
        <a href="#" onclick="showHome()">Home</a>
        <a href="#" onclick="showRules()">Rules</a>
        <a href="#">Partnerships</a>
        <a href="#">League Winners</a>
        <a href="#">Suspensions</a>
    </div>

    <!-- Home content -->
    <div class="home-content" id="home-content">
        <p>This website is made for a league for RSS (Realistic Street Soccer, a game made on Roblox).  
           By this website, you can keep updated on news, such as suspensions, partnerships, and league winners.  
           This website will update a lot, so make sure you come on this website again!</p>
    </div>

    <!-- Rules content -->
    <div class="rules-text" id="rules-text" style="display: none;">
        <p>Press on the link to be directed to the rules! READ CAREFULLY.</p>
        <a href="https://docs.google.com/document/d/e/2PACX-1vSKNpr2hu9TQsP6W584h7oG8gNPOxthuQpEfCHpaq-760pp4iZTOqmx05EMivlATJyVIDOV5LGqpH39/pub" target="_blank">View Rules</a>
    </div>

    <script>
        function toggleMenu() {
            const menu = document.getElementById("menu");
            menu.classList.toggle("open");
        }

        function showHome() {
            document.getElementById("home-content").style.display = "block";
            document.getElementById("rules-text").style.display = "none";
        }

        function showRules() {
            document.getElementById("home-content").style.display = "none";
            document.getElementById("rules-text").style.display = "block";
        }
    </script>
</body>
</html>