<!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>
  <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 extremely small.</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">
    Designed with 💖 by U & H
  </div>
</body>
</html>