body {
    margin: 0px;
    padding: 0px;
    background: linear-gradient(#6699AA, #336699) fixed;
    font-family: 'arial';
    user-select: none;
    --color-foncee: #223;
    --color-incidence: #ff99cc;
    --color-reflexion: #66ff66;
    --color-refraction: #ffaa66;
}

h1 {
    text-shadow: 0px 0px 3px white;
    color: var(--color-foncee);
    font-size: 3rem;
    margin: 0.5rem 0;
    padding: 0;
    font-family: 'Asul', cursive;
    text-align: center;
}

h2 {
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: 2.4rem;
    font-family: 'Asul', cursive;
    color: var(--color-foncee);
}

#colonnes {
    width: 1000px;
    margin:auto;
    display: grid;
    grid-template-columns: 700px 300px;
}

/* SVG */

#laser, #btn_normale {
    cursor: pointer;
}

/* Options */
#infos div.encadre {
    z-index: 10;
    font-size: 1.6rem;
    border: #000 2px solid;
    border-radius: 14px;
    background-color: #ffffff20;
    margin:0.5rem 1rem;
    padding: 0 0 1rem 0;
}
#infos h2 {
    font-size: 1.6rem;
    background-color: #c0c0c0;
    border-radius: 11px 11px 0 0;
    padding: 0;
    margin: 0 0 1rem 0;
    cursor: pointer;
}
#infos h3 {
    font-size: 1.6rem;
    margin: 0.4rem 0 0 1rem;
}
#infos p {
    text-align: center;
    font-size: 1.4rem;
    margin:0.2rem;
}
#infos input[type="number"] {
    font-size: 1.4rem;
    width: 4rem;
}
#infos label {
    font-size: 1.4rem;
    cursor: pointer;
}
#infos input[type="checkbox"] {
    width:1.4rem;
    height: 1.4rem;
    cursor: pointer;
    accent-color: #006699
}

#angle_incidence {
    font-size: 2rem;
    color: var(--color-incidence);
}
#angle_reflexion {
    font-size: 2rem;
    color: var(--color-reflexion);
}
#angle_refraction {
    font-size: 2rem;
    color: var(--color-refraction);
}

/* Pied de page */
footer {
    text-align: center;
    margin: 20px 0 0 0;
}

footer p {
    margin: 0;
    padding: 0;

}