<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Games & Rules!</title>
    <link rel="icon" href="controller-game-icon-10.png" type="image/x-icon">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap');

        body {
            background-color: #121212;
            color: #ffffff;
            font-family: 'Montserrat', sans-serif;
            line-height: 1.5;
            margin: 0;
            padding: 20px;
            overflow-x: hidden;
        }

        h1 {
            text-align: center;
            text-decoration: underline;
            margin-bottom: 20px;
            font-size: 2.5rem;
            animation: fadeInDown 1s ease-out;
        }

        .rules-section {
            margin: 20px auto;
            max-width: 800px;
            padding: 20px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s, background 0.3s;
        }

        .rules-section:hover {
            transform: scale(1.03);
            background: rgba(255, 255, 255, 0.2);
        }

        .rules-section h2 {
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 1.6rem;
            text-transform: uppercase;
            border-bottom: 2px solid #ffffff;
            padding-bottom: 5px;
            animation: fadeInLeft 1s ease-out;
        }

        .rules-section ol {
            counter-reset: item;
            list-style: none;
            margin: 0;
            padding-left: 20px;
        }

        .rules-section ol li {
            margin-bottom: 10px;
            position: relative;
            animation: fadeInUp 1s ease-out;
        }

        .rules-section ol li:before {
            content: counter(item) ".";
            counter-increment: item;
            position: absolute;
            left: -25px;
            font-weight: bold;
            color: #ffffff;
        }

        .footer {
            text-align: center;
            margin-top: 20px;
            font-size: 0.9rem;
            opacity: 0.8;
            animation: fadeIn 2s ease-out;
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

    </style>
</head>
<body>
<h1>U & H's Games and Rules</h1>

<div class="rules-section">
    <h2>Sniper, Build, Fight</h2>
    <ol>
        <li>Do not destroy the bottom part of someone's build if it collapses the entire structure.</li>
        <li>Any builds on the floor with insufficient support can be destroyed using any gun (e.g., skybases with floating floors).</li>
        <li>No sliding people off their bases, regardless of their location.</li>
        <li>Avoid using shockwave launchers or grenades on others as it is unfair and breaks the rules.</li>
        <li>If you destroy someone's build with a non-sniper gun and accidentally harm them, let them heal or balance the damage.</li>
        <li>If rules are broken, the violator must give a free elimination or be kicked.</li>
        <li>Avoid moaning or making bold accusations like "He's cheating" or "He's phasing through walls," as it ruins the game for everyone.</li>
    </ol>
    <p>-- Created by Umar & Hamzah Khan on 11th January 2025.</p>
</div>

<div class="rules-section">
    <h2>Healoff & Fight</h2>
    <ol>
        <li>The circle must not exist or be tiny.</li>
        <li>At least four inventory slots must contain healing items.</li>
        <li>The chosen guns must be similar in terms of damage, type, and rarity (e.g., no mixing Pump Shotgun and Exotic SMG).</li>
        <li>Building is allowed, but avoid destroying the primary support of their structures.</li>
        <li>Have fun, don't be a sore loser, and enjoy the game! :)</li>
    </ol>
    <p>-- Created by Umar & Hamzah Khan on 11th January 2025.</p>
</div>

<div class="footer"><u>
    Designed with 💖 by U & H
</u></div>
</body>
</html>