/* Le code CSS de la démo */

p {
    padding: 2em;
    background-color: #ddd;

}

article+article {
    margin-top: 2em;
}

.minimum {
    background-image: linear-gradient( yellow, orange);
}

.plusieursColor {
    background-image: linear-gradient( green, yellow, orange);

}

.angle {
    background-image: linear-gradient( 45deg, green, yellow, orange);

}

.ptArretPourcent {
    background-image: linear-gradient( 90deg, green 0 30%, yellow 30%, orange);
}

.repeter {
    background-image: repeating-linear-gradient(90deg, green, yellow, orange 25%)
}

.radial {
    background-image: radial-gradient(yellow, red);
}

.radialCercle {
    background-image: radial-gradient(circle, yellow, red);
}

.radialCercleInscrit {
    background-image: radial-gradient(circle closest-side, yellow, red);
}

.radial25 {
    background-image: radial-gradient(circle closest-side at 25%, yellow, red);

}

.ombrePetite {
    box-shadow: 1px 1px 1px;
}

.ombreGrande {
    box-shadow: 20px 20px 20px 15px;
}

.ombreInterne {
    box-shadow: 2px 2px 1px inset;
}

.ombreColor {
    box-shadow: 5px 5px 4px orange;
}

.ombreEtaler {
    box-shadow: 0 0 5px 5px green;
}

.ombreMultiple {
    box-shadow: 0 0 5px 5px green, 0 0 10px 10px orange, 0 0 15px 15px blue;

}

.ombreTxTpetite {
    text-shadow: 1px 1px 1px orange;
    background-color: #ddd;
    color: #fff;

    text-align: center;
    font-size: 3rem;


}

.ombreTxTgrande {
    text-shadow: 10px 10px 10px orange;
    background-color: #ddd;
    color: #fff;
    text-align: center;
    font-size: 3rem;


}

.ombreTxTcolor {
    text-shadow: 10px 10px 10px orange;
    background-color: #ddd;
    color: #fff;

    text-align: center;
    font-size: 3rem;

}

.ombreTxTmulti {
    text-shadow: 10px 10px 10px orange, 60px 60px 5px blue;
    background-color: #ddd;
    color: #fff;
    font-size: 3rem;
    text-align: center;


}