<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Maths Educ</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
        
        <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="text-center" style="padding-top: 30vh">
            <h1 style="color: white; font-size: 50px">Difficulte :</h1>
            <input type="radio" class="btn-check" name="difficulte" id="facile" autocomplete="off" checked>
            <label class="btn btn-outline-success fs-1" for="facile" style="margin-right: 20px">Facile</label>

            <input type="radio" class="btn-check" name="difficulte" id="moyen" autocomplete="off">
            <label class="btn btn-outline-warning fs-1" for="moyen" style="margin-right: 20px">Moyen</label>

            <input type="radio" class="btn-check" name="difficulte" id="difficulte" autocomplete="off">
            <label class="btn btn-outline-danger fs-1" for="difficulte">Difficile</label>

        </div>
        

        <div class="dropdown d-flex flex-column align-items-center p-5">
            <button class="btn btn-secondary dropdown-toggle btn-lg fs-1" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                Theme
            </button>
            <ul class="dropdown-menu">
                <li><button class="dropdown-item fs-1" type="button">Theme1</button></li>
                <li><button class="dropdown-item fs-1" type="button">Theme2</button></li>
                <li><button class="dropdown-item fs-1" type="button">Theme3</button></li>
            </ul>
        </div>

        <div class="d-flex flex-column align-items-center">
            <button type="button" class="btn btn-success btn-lg fs-1" >Jouer</button>
        </div>
                
    </body>
</html>