<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>RedTalk Universe</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            min-height: 100vh;
            font-family: Arial, sans-serif;
            color: #ffd700;
            /* ⭐ nebula background image */
            background: url('nebula.jpg') no-repeat center center fixed;
            background-size: cover;

            /* center everything */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        /* optional dark overlay so text/logo pop more */
        .overlay {
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at top, rgba(0,0,0,0.2), rgba(0,0,0,0.85));
            z-index: 0;
        }

        .content {
            position: relative;
            z-index: 1;
            padding: 20px;
        }

        .logo {
            width: 320px;          /* adjust logo size here */
            max-width: 80vw;
            margin-bottom: 20px;
            filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.9));
        }

        h1 {
            font-size: 32px;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        p {
            font-size: 16px;
            margin-bottom: 6px;
        }
    </style>
</head>
<body>
    <div class="overlay"></div>

    <div class="content">
        <!-- ⭐ Your logo -->
        <img src="logo.png" alt="RedTalk Universe Logo" class="logo">

        <!-- Text under the logo -->
        <h1>RedTalk Universe</h1>
        <p>NYC2LAX Productions • Created by Ty</p>
        <p>Website currently under construction</p>
    </div>
</body>
</html>
