projet aquarium

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Projet Aquarium</title>
    <style>
        body{background-color: #3b6db3; font-family: sans-serif; font-size: 1.2em;}
        h1{width: 90%; max-width: 600px; margin: auto; text-align: center;}
        h1>span{color: white;}
        h1,section{border: 4px solid #21307b;}
        content{display: flex; height: 250px; width: 90%; max-width: 900px; margin: auto;}
        section{width: 350px; max-width: 28%; height: 200px; margin: auto;}
        p,form{margin-left: 10px; color: #21307b;}
        p::first-letter{color: white;}
        input{border-radius: 0; width: 30%; height: 42px; border: none; transition: background-color 0.2s;}
        input:hover{background-color: #CDCDEF; transition: background-color 0.2s;}
    </style>
</head>
<body>
    <h1>P<span>rojet aquarium 20</span>15-<span>20</span>16</h1>

    <content>
        <section>
            <p>
            Temps : %H%:%M%:%S%
            </p>
            <p>
            Température : %X% °C
            </p>
            <p>
            Luminosité : %Z%
            </p>
        </section>

        <section class="middle">
            <p>
            Chauffage :
            </p>
            <form>
                <input type="button" name="chauffage-on" value="ON" />
                <input type="button" name="chauffage-off" value="OFF" />
            </form>
        </section>

        <section>
            <p>
            Eclairage :
            </p>
            <form>
                <input type="button" name="eclairage-on" value="ON" />
                <input type="button" name="eclairage-off" value="OFF" />
            </form>
        </section>
    </content>

</body>
</html>