@charset "utf-8";
/* codage de caractère le plus utilisé pour le word wild web */


/*mise en forme et positionnement des éléments */
@font-face {
    font-family: 'a Asian Hiro';
    src: url(../fonts/a-asian-hiro/aasianhiro.otf);

}

@font-face {
    font-family: 'Blogger Sans';
    src: url(../fonts/blogger-sans/Blogger_Sans.otf);

}
/* position et mise en forme du main */
body{
    margin: 0px;


}

main{
    width: 1920px;
    height: 927px;

 
    left: 50%;

}


#porte{
width: 1310px;
height: 699px;


/* centrage horizontale */

left:50%;
margin-left: -655px;

top:50%;
margin-top:-349px;

position: absolute;
z-index:3;
}



h1{

    top: 50%;
    margin-top: -30px;
    left: 50%;
    margin-left: -207px;
    color:rgba(100, 149, 237);
    position: absolute;
    font-family: 'a asian hiro';
    font-size: 80px;
    text-transform: uppercase;
    text-align: center;

}


#accueil{
    width: 512px;
    height: 512px;
    left:50%;
    margin-left:-256px;
    top:50%;
    margin-top: -256px;
    position:absolute;


}


#accueil img{
    width: 512px;
    height: 512px;
    left:50%;
    margin-left:-256px;
    top:50%;
    margin-top: -256px;

    position:absolute;
    opacity:5%;
    z-index:3;
    
    
}

#accueil img:hover{
    left:50%;
    margin-left:-256px;
    top:50%;
    margin-top: -256px;
    position:absolute;
    opacity:100%;
    z-index: 4;
    transition: 0s;
    -webkit-transition: 0s;
    -moz-transition: 0s;
    -ms-transition: 0s;
    -o-transition: 0s;
}



/*mise en forme du contour
positionnement*/



footer{
    width: 750px;
    height: 55px;

    
    left :50%;
    margin-left: -380px;

    margin-top: 840px;

    font-family: 'Blogger Sans';

    
    position: absolute; 

}


h3{

    margin-top: 7px;
    font-family: 'Blogger Sans';
    font-weight: lighter;
    font-size: 16px;
    text-align: center;
    
    color:#2E8ECE;
    text-transform: uppercase;
    line-height: 20px;

}