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

        body {
            background-color: #e0e5ec;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
            animation: fadeInBody 1.5s ease-out;
        }

        .container {
            text-align: center;
            padding: 50px 30px;
            background-color: #f0f8ff;
            border-radius: 30px;
            max-width: 90%;
            width: 450px;
            animation: zoomIn 1.5s ease-out;
            transition: transform 0.5s ease, box-shadow 0.5s;
            box-shadow: 20px 20px 60px #c2c7d1, -20px -20px 60px #ffffff;
        }

        .container:hover {
            transform: scale(1.05) rotate(1deg);
            box-shadow: 30px 30px 80px rgba(0, 0, 0, 0.15), -20px -20px 60px rgba(255, 255, 255, 0.8);
        }

        h1 {
            font-size: 2.5em;
            color: #2d3436;
            margin-bottom: 20px;
            letter-spacing: 2px;
            font-weight: bold;
            text-transform: uppercase;
            animation: floatText 3s ease-in-out infinite;
            color: #4b7bec;
        }

        p {
            font-size: 1.1em;
            margin-bottom: 30px;
            color: #4b6584;
            opacity: 0.85;
            animation: fadeIn 2s ease;
            line-height: 1.6;
        }

        .floating-shapes {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 400px;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .shape {
            width: 100px;
            height: 100px;
            background-color: #ffd700;
            position: absolute;
            border-radius: 20px;
            animation: floating 8s infinite ease-in-out;
            box-shadow: 10px 10px 20px #c2c7d1, -10px -10px 20px #ffffff;
            opacity: 0.9;
            transition: transform 1s ease, background-color 0.5s ease;
        }

        .shape:nth-child(1) { top: 10%; left: 20%; animation-delay: 2s; background-color: #ff6b81; }
        .shape:nth-child(2) { top: 40%; left: 70%; animation-delay: 4s; background-color: #4cd137; }
        .shape:nth-child(3) { top: 75%; left: 25%; animation-delay: 6s; background-color: #00a8ff; }
        .shape:nth-child(4) { top: 30%; left: 5%; animation-delay: 8s; background-color: #a29bfe; }
        
        
        .shape:hover {
            transform: scale(1.2) rotate(10deg);
            background-color: #f7b731;
            box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.15), -12px -12px 24px rgba(255, 255, 255, 0.8);
        }

       
        @keyframes fadeInBody {
            0% { opacity: 0; transform: translateY(30px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @keyframes zoomIn {
            0% { opacity: 0; transform: scale(0.8); }
            100% { opacity: 1; transform: scale(1); }
        }

        @keyframes floatText {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        @keyframes floating {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(5deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }

        
        @media (max-width: 768px) {
            .container {
                width: 90%;
                padding: 30px 20px;
            }
            h1 {
                font-size: 2em;
            }
            p {
                font-size: 1em;
            }
            .shape {
                width: 70px;
                height: 70px;
            }
        }

        @media (max-width: 480px) {
            .container {
                width: 100%;
                padding: 20px 15px;
            }
            h1 {
                font-size: 1.8em;
            }
            p {
                font-size: 0.9em;
            }
            .shape {
                width: 60px;
                height: 60px;
            }
        }
    </style>
</head>
<body>
    <div class="floating-shapes">
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
    </div>

    <div class="container">
        <h1>Wajarlah Manusia!</h1>
        <p>Assalamualaikum warahmatullahi wabarakatuh, Mohon maaf kejadian eror ini saya tidak sengaja dan saya tidak niat sekalipun untuk tidak memperpanjang hosting, Karena manusia itu tempatnya salah dan lupa, Wajar manusia bukan nabi boy</p>
      <a href="https://t.me/ANDAIKAUTAU" style="text-decoration: none;">
  <p>TELEGRAM : T.ME/ANDAIKAUTAU</p>
</a>

    </div>
</body>
</html>