/*page CSS du projet*/

/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Définition du style de la page*/

body
{
    /*on met un arriere plan*/
    background: url("http://www.techcredo.com/wp-content/uploads/2012/11/retro-8-bit-pixelart-wallpapers-15.jpg") no-repeat center fixed;
    /*on met une police générale*/
    font-family : "Dayrom", "Courier New", sans-serif ;
    /*on met une couleur pour le texte*/
    color : firebrick;
}

#bloc_page/*le bloc ou seront les ecritures/images*/
{
    /*on change le fond*/
    background-color:  rgb(255, 228, 186);
    /*on le bloque à 950px de largeur*/
    width : 950px;
    /*les marges sont automatiques*/
    margin : auto;
    /*on aligne le texte par défaut*/
    text-align: justify;
}

section h1, footer h1, nav a
{
    /*on definie une police pour les titres et les liens entre les pages*/
    font-family : "Trebuchet MS", serif;
    text-transform : uppercase;
}

/* Header */

header
{
    /*on change le fond*/
    background-color : rgb(255, 228, 186);
    /*on modifie la propriété du bloc pour l'organiser*/
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#titre_principal
{
    display: flex;
    /*on aligne en colonne*/
    flex-direction: column;
}


header h1/* les titres 1 de l'entete seront : */;
{
    /*..avec une police spéciale*/
    font-family: 'BallparkWeiner', serif;
    /*..une taille spéciale*/
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 10px;
}

header h2/*les titres 2 de l'entete seront...*/
{
    /*..avec une police spéciale*/
    font-family: Dayrom, serif;
    /*..une taille spéciale*/
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}

/* Navigation */

nav ul
{
    /*on place le titre dans un bandeau*/
    /*on aligne le bas du bandeau avec le bas de la section*/
    bottom: 0;
    /*on aligne les bords*/
    border-radius: 0px 0px 5px 5px;
    /*le bandeau peut prendre 99% de la place*/
    width: 99%;
    /*on bloque la hauteur*/
    height: 33px;
    /*on rajoute des marges entre le texte et le bord du bandeau*/
    padding-top: 10px;
    padding-left: 4px;
    /*on change le fond*/
    background-color: rgb(253, 241, 184);
    /*on met le texte en blanc*/
    color: white;
    /*on enlève les puces de la liste*/
    list-style-type: none;
    display: flex;
}

nav li
{
    margin-right: 9px;
    color: white;
}

nav a
{
    font-size: 10px;
    color: white;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover/*lorsque la souris est sur le lien*/
{
    color: red;
    border-bottom: 3px solid red;
}


/*mise en page du corps de la page*/

section
{
    /*la section possède des marges et s'organise en ligne*/
    display : flex;
    margin-bottom : 10px;
    flex-direction: row;
}

article, aside
{
    /*les articles et les asides font la meme taille*/
    text-align : justify;
}

article
{
    /*on ajoute des marges, un bord et une taille*/
    margin-right : 15px;
    padding: 8px;
    flex : 7;
    border-radius: 4px;
    box-shadow: 0px 0px 5px maroon;
    overflow: auto;
    background: rgba(176,196,222, 0.3);
}

article p 
{
    /*les lettres font 14px*/
    font-size : 14px;
    color : #850606;
}

article h1
{

    text-align: center;
}

aside
{
    /*les asides sont de petites tailles, avec un fond spécifique et une bordure*/
    flex : 2;
    position : relative;
    background-color: rgba(176,196,222, 0.3);
    box-shadow : 0px 0px 5px maroon;
    border-radius: 4px;
    padding : 10px;
    color : #850606;
    font-size : 0.7em;
}

/*Definition du bas de page*/

footer
{
    display: flex;
    border-radius: 6px;
    box-shadow: 0px 2px 5px maroon;
}

footer p
{
    font-size : 0.8em;
}

footer h1
{
    font-size: 1.4em;
    text-align: center;
}