<!DOCTYPE html>
<html lang="en" class="mdui-theme-auto" data-bs-theme="auto">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Date Calculator</title>

        <link
            href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
            rel="stylesheet"
        />

        <link rel="stylesheet" href="assets/css/style.css" />
        <script src="assets/js/theme.js"></script>

        <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
        <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>

        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
            crossorigin="anonymous"
        />
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"
        ></script>

        <!-- Filled -->
        <link
            href="https://fonts.googleapis.com/icon?family=Material+Icons"
            rel="stylesheet"
        />

        <!-- Outlined -->
        <link
            href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
            rel="stylesheet"
        />

        <!-- Rounded -->
        <link
            href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
            rel="stylesheet"
        />

        <!-- Sharp -->
        <link
            href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp"
            rel="stylesheet"
        />

        <!-- Two Tone -->
        <link
            href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"
            rel="stylesheet"
        />
    </head>
    <body>
        <main>
            <div
                class="container d-flex justify-content-center align-items-center"
            >
                <div
                    id="mainContainer"
                    class="d-flex flex-column flex-md-row flex-sm-column justify-center align-items-center"
                >
                    <img
                        src="assets/images/icons/dateapp.png"
                        alt="Date Calculator Icon"
                        id="dateAppLogo"
                    />

                    <div
                        id="mainContainerContent"
                        class="text-center text-md-start text-lg-start"
                    >
                        <h1 class="display-1 fw-bold" style="margin: 7px 0">
                            <strong>Date Calculator</strong>
                        </h1>

                        <p class="lead fw-bold">
                            The go-to minimal date calculator
                        </p>

                        <div
                            id="mainContainerButtonSection"
                            class="d-flex justify-content-center justify-content-md-start justify-content-lg-start gap-2"
                        >
                            <mdui-button icon="download" class="lead fw-bold"
                                >Download</mdui-button
                            >
                            <mdui-button icon="info" class="lead fw-bold"
                                >FAQ</mdui-button
                            >
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>