<!DOCTYPE html>
<html lang="fr">
<html>

<head>
    <meta charset=utf-8>
    <title>Math'Educ</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <style>
        @font-face {
            font-family: 'MenuFont';
            src: url('Media/mathEducFont.ttf') format('truetype');
        }

        * {
            font-family: 'MenuFont';
        }
    </style>
</head>

<body style="background: linear-gradient(to bottom, rgba(37, 34, 71, 1), rgba(37, 35, 72, 1));">
    <div class="d-flex flex-column align-items-center justify-content-center" style="height:95vh">
        <div style="width:90vw; height:30vh; margin-top:50px;" class="text-center d-flex align-items-center text-center text-white border border-white rounded">
            <p class="sm-fs-5 mx-auto m-5">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident fuga cum soluta iure libero! Ullam, expedita excepturi! Odio distinctio quos quasi commodi libero ratione corrupti, unde iste explicabo suscipit consequatur ipsum! Id beatae corrupti ipsa totam deserunt, vel tenetur, iusto quaerat asperiores veritatis quidem! Vel dolorem recusandae necessitatibus ullam laborum!
                <?php /* Query to bd d'une question aléatoire */ ?>
            </p>
        </div>
        <div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
            <div class="container text-center d-flex flex-row align-items-center text-center flex-grow">
                <button href="vues/Solo.php" class="text-white m-3 container text-center d-flex align-items-center w-75 h-75 rounded border border-white text-center" style="background-color:blue;text-decoration: none;color: black; height:20vh;">
                    <div class="container text-center d-flex align-items-center text-center">
                        <p class="mx-auto fs-5">
                            Lorem, ipsum.
                            <?php /* Query to bd d'une question aléatoire */ ?>
                        </p>
                    </div>
                </button>
                <button href="vues/Multijoueur.php" class="text-white m-3 container text-center d-flex align-items-center w-75 h-75 rounded border border-white text-center" style="background-color:green;text-decoration: none;color: black;height:20vh;">
                    <div class="container text-center d-flex align-items-center text-center">
                        <p class="mx-auto fs-5">
                            Lorem, ipsum.
                            <?php /* Query to bd d'une question aléatoire */ ?>
                        </p>
                    </div>
                </button>
            </div>
            <div class="container text-center d-flex flex-row align-items-center text-center flex-grow">
                <button href="vues/AddQuestions.php" class="text-white m-3 container text-center d-flex align-items-center w-75 h-75 rounded border border-white text-center" style="background-color:red;text-decoration: none;color: black;height:20vh;">
                    <div class="container text-center d-flex align-items-center text-center">
                        <p class="mx-auto fs-5">
                            e^5
                            <?php /* Query to bd d'une question aléatoire */ ?>
                        </p>
                    </div>
                </button>
                <button href="vues/AddQuestions.php" class="text-white m-3 container text-center d-flex align-items-center w-75 h-75 rounded border border-white text-center" style="background-color:orange;text-decoration: none;color: black;height:20vh;">
                    <div class="container text-center d-flex align-items-center text-center">
                        <p class="mx-auto fs-5">
                            Lorem, ipsum.
                            <?php /* Query to bd d'une question aléatoire */ ?>
                        </p>
                    </div>
                </button>
            </div>
        </div>
    </div>
</body>