<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>RoyaleFN</title>
        <link rel="icon" type="image/x-icon" href="favicon.ico">
    
        <style>
            /* Einbinden einer lokalen Schriftart */
            @font-face {
                font-family: 'HeadingNow';
                src: url('fonts/HeadingNowTrial-67ExtraboldItalic.ttf') format('truetype');
            }
    
            /* Allgemeine Stile */
            body {
                font-family: 'HeadingNow', sans-serif; /* Deine benutzerdefinierte Schriftart */
                margin: 0;
                padding: 0;
                background-color: #000;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                flex-direction: column;
                overflow-x: hidden; /* Verhindert horizontales Scrollen */
            }

        /* Hintergrundbild mit Farbverlauf */
        .hero {
            background-image: url('https://static.wikia.nocookie.net/fortnite_gamepedia/images/e/e7/ALoomingThreatLoadingScreen.png/revision/latest/scale-to-width-down/2048?cb=20180516115254'), 
                              linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
        }

        /* Gemeinsame Leiste für Logo und Navigation */
        .top-bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            z-index: 10;
        }

        /* Logo */
        .logo img {
            height: 50px;
            cursor: pointer;
        }

        /* Navigation zentral */
        .nav-container {
            flex-grow: 1;
            display: flex;
            justify-content: center;
        }

        nav {
            display: flex;
            gap: 20px; /* Abstand zwischen den Links */
        }

        
        .footer {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 14px;
        }

        .footer a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }

        .footer a:hover {
            text-decoration: underline;
        }
        /* Gemeinsame Stile für die Navigation */
    nav a {
        color: #fff;
        font-size: 16px;
        text-decoration: none;
        background-color: rgba(255, 255, 255, 0.2);
        padding: 8px 12px;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    nav a:hover {
        background-color: rgba(255, 255, 255, 0.4);
    }

    /* Farbänderung beim aktiven Button */
    nav a:active {
        background-color: rgba(255, 255, 255, 0.6); /* Ändere die Farbe, wenn der Button gedrückt wird */
    }

        /* Hero Section */
        .hero h1 {
            font-size: 60px;
            font-weight: bold;
            color: #fff;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
            margin: 0;
        }

        .hero p {
            font-size: 20px;
            margin-top: 10px;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
            margin-bottom: 0;
        }
    </style>
</head>
<body>

    <!-- Gemeinsame Leiste für Logo und Navigation -->
    <div class="top-bar">
        <!-- Logo links -->
        <div class="logo">
            <a href="index.html">
                <img src="https://i.postimg.cc/FKqG3Q0Q/AppLogo.png" alt="ROYALEFN Logo">
            </a>
        </div>
        <!-- Navigation zentral -->
        <div class="nav-container">
            <nav>
                <a href="download.html">Download</a>
                <!--a href="shop.html">Shop</a-->
                <a href="https://dsc.gg/royalefn">Support</a>
            </nav>
        </div>
    </div>

    <!-- Hero Section -->
    <div class="hero">
        <div>
            <h1>Relive OLD Fornite with RoyaleFN</h1>
            <p>Experience the nostalgia of OG Fortnite seasons again!</p>
        </div>
    </div>

    <div class="footer">
        <p>Made with ♥️ by <a href="https://github.com/umutyrs" target="_blank">umutyrs</a></p>
    </div>

</body>
</html>
