*
{
    margin:0;
    padding:0;
    width: 100%;
}
@font-face {
    font-family: Breathney;
    src: url(Breathney\ Demo.ttf);
}
@font-face
{
font-family: MangaPolice;
src: url(Manga\ Style.ttf);
}
/* Color Theme Swatches in Hex */
.My-Cv-1-hex { color: #00747C; }
.My-Cv-2-hex { color: #00BBC9; }
.My-Cv-3-hex { color: #CACACA; }
.My-Cv-4-hex { color: #878787; }
.My-Cv-5-hex { color: #202022; }

/* Color Theme Swatches in RGBA */
.My-Cv-1-rgba { color: rgba(0, 116, 124, 1); }
.My-Cv-2-rgba { color: rgba(0, 187, 201, 1); }
.My-Cv-3-rgba { color: rgba(202, 202, 202, 1); }
.My-Cv-4-rgba { color: rgba(135, 135, 135, 1); }
.My-Cv-5-rgba { color: rgba(32, 32, 34, 1); }

/* Color Theme Swatches in HSLA */
.My-Cv-1-hsla { color: hsla(183, 100, 24, 1); }
.My-Cv-2-hsla { color: hsla(184, 100, 39, 1); }
.My-Cv-3-hsla { color: hsla(0, 0, 79, 1); }
.My-Cv-4-hsla { color: hsla(0, 0, 52, 1); }
.My-Cv-5-hsla { color: hsla(240, 3, 12, 1); }
/* 
font-variant: small-caps;
petite majuscule (mettre dans les boutons accueil - formation ...)
writing mode: verticaal-rl;

*/

body
{
    background-color: #272B40;
    height: 100%;
}
h1
{
    margin-left: 10px;
    font-family: Breathney;
    font-size: 3em;
    color: #FFFFFF;
    text-align: center;
}
p
{
    margin-left: 10px;
}
.fontgrand
{
    font-size: 2em;
}
.gray
{
    color: #C0C0C0;
}
.white
{
    color: #FFFFFF;
}
.gras
{
    font-weight: bold;
}
.italic
{
    font-style: italic;
}
a
{
    color: #FFFFFF;
}
li
{
    margin-left: 40px;
    color: #C0C0C0;
}
.centre
{
    text-align: center;
}
.cadre
{
    outline-style: groove;
}
.vertical
{
    writing-mode: vertical-lr;
}
.puce
{
    list-style-position: inside;
}
#photoshop
{
    list-style-image: url(image_puce/Photoshop.png);
}
#Illustrator
{
    list-style-image: url(image_puce/Illustrator.png);
}
#PremierPro
{
    list-style-image: url(image_puce/premiere-pro.png);
}
#Blender
{
    list-style-image: url(image_puce/Blender.png);
}
#Unity
{
    list-style-image: url(image_puce/unity.png);
}
#html
{
    list-style-image: url(image_puce/Html.png);
}
#css
{
    list-style-image: url(image_puce/CSS3.png);
}
#csharp
{
    list-style-image: url(image_puce/c-sharp.png);
}
header
{
    height: 200px;
    background-color: #202022;
}

.menu
{
    float: right;
    background-color: #FFFFFF;
    width: 150px;
    height: 100px;
}
main
{
    width: 100%;
    height: 1800px;
    background-color: #080703;
}
footer
{
    background-color: #202022;
    bottom: 0;
    color: white;
    height: 160px;
    width: 100%;
}
.gauche1
{
    height: 140px;
    width: 720px;
    position: relative;
    left: 400px;
    top: 10px;
    bottom: 10px;
}
.box1
{
   float: left;
   width: 240px;
   height: 140px;
    font-family: Breathney;
    font-size: 1em;
    color: #FFFFFF;
}
.box2
{
   float: left;
   width: 240px;
   height: 140px;
}
.box3
{
    float: left;
    width: 240px;
    height: 140px;
}
.floatdroite
{
    float: right;
}
/* Exercice CSS */
.div1
{
    width: 1530px;
    height: 350px;
}
.divgauche1
{
    width: 765px;
    height: 350px;
    float: left
}
.divdroite1
{
    width: 765px;
    height: 350px;
    float: right;
}
.articlegauche
{
    text-align: left;
}
.articledroite
{
    text-align: right;
}