<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MERMS-GENERAL MEDIA</title>
    <meta name="description" content="The small framework with powerful features">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/png" href="/favicon.ico">

    <!-- STYLES -->

    <style {csp-style-nonce}>
        * {
            transition: background-color 300ms ease, color 300ms ease;
        }

        *:focus {
            background-color: rgba(221, 72, 20, .2);
            outline: none;
        }

        html, body {
            color: rgba(33, 37, 41, 1);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
            font-size: 16px;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            background-image: url("main-back.jpg");
            background-color: #cccccc; /* Fallback color */
            background-repeat: no-repeat; /* Prevents the image from repeating */
            background-position: center; /* Centers the image on the page */
            background-size: cover; /* Scales the image to cover the entire container */
            background-attachment: fixed; /* Keeps the image fixed in the viewport during scroll */
        }

        header {
            background-color: rgb(231, 31, 184);
            padding: .4rem 0 0;
            color: white;
        }

        header .heroe {
            margin: 0 auto;
            max-width: 1100px;
            padding: 1rem 1.5rem 1.0rem 1.75rem;
        }

        header .heroe h1 {
            font-size: 2.5rem;
            font-weight: 500;
        }

    </style>
</head>
<body>

<header>
    <div class="heroe">
        <h1>MERMS-Media - <?= $config_name ?? '' ?> </h1>
    </div>

</header>
<footer>

</footer>
</body>
</html>
