<html lang="de" data-scheme="light">
    <head>
        <title>Test Dark/Light</title>
        <script src="{{ url_for('static', filename= 'js/script.js') }}"></script>
        <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
    </head>
    <body style="text-align: center;">
          
        <div class='wrapper' style="margin-top: 7rem;">

            <div class="row"><div class="col-auto">
                <h1>Test Dark/Light<br> <i style="font-size: 1rem;">You can choose the button to override your system-settings and change the color theme!</i> </h1>
            </div></div>
            <div class="row"><div class="col-auto">
                <button class='themebtn'>Toggle mode</button>
            </div></div>
            <div class="row"  style="margin-top: 5rem;"><div class="col-auto">
                <h1>This is the second Page<br><i style="font-size: 1rem;">Goto the first Page</i><br></h1>
            </div></div>
            <div class="row"><div class="col-auto">
                <a href="{{ url_for('index') }}" class="btn">First page</a>
            </div></div>
            <div class="row" style="margin-top: 3rem;"><div class="col-auto">
                <h1><i style="font-size: 1rem;">Here is a second toggle button to change the color theme!</i> </h1>
            </div></div>
            <div class="row"><div class="col-auto">
                <button class='themebtn'>Second Toggle button</button>
            </div></div>
        </div>
    </body>
</html>