@import url('https://fonts.googleapis.com/css2? family= Sintony & display=swap');
@import url('https://fonts.googleapis.com/css2? family= Damion & display=swap');
body{

    background: #EEEEEE;
    
}

#John
{

font-family: 'Damion', cursive;
position: absolute;
top: 60px;
left: 370px;

}

#Étudiant
{

position: absolute;
top:110px;
left: 304px;

}

#Acceuil
{

    position: absolute;
    top:110px;
    left: 760px;

}

#Travaux 
{

    color: red;
    position: absolute;
    top:110px;
    left: 900px;
    text-decoration: underline; 

}

#CV
{
    position: absolute;
    top:110px;
    left: 1040px;
}

#Contact
{

    position: absolute;
    top:110px;
    left: 1100px;

}

#Illustartion 
{

    position: absolute;
    top: 461px;
    left: 868px;

}

#Facebook 
{
    position: absolute;
    top: 838px;
    left: 950px;
}

#Flickr 
{
    position: absolute;
    top: 838px;
    left: 1100px;
}

#RSS
{
    position: absolute;
    top: 838px;
    left: 1150px;
}

#Twitter 
{
    position: absolute;
    top: 838px;
    left: 1000px;
}

#Vimeo 
{
    position: absolute;
    top: 838px;
    left: 1050px;
}

#Connaître
{
    color: white;
    position: absolute;
    top: 390px;
    left: 925px;
}

#texte {
    color: white;
    position: absolute;
    top: 540px;
    left: 940px;
  }

  #texte2 {
    position: absolute;
    top: 408px;
    left: 304px;
    font-size: 14px;

  }  

  #texte3 {
    position: absolute;
    top: 938px;
    left: 320px;
  }

  #texte4 {
    position: absolute;
    top: 938px;
    left: 950px;
    color: red
  }



#zonecentrale
{
    background: #EEEEEE;
	width: 912px;
    margin:auto;
}

header{
     position: relative;
}

hr{
 
} 

#titre_principal
{
    font-family: 'Damion', cursive;
	background-color:#eeeeee;
    height: 150px;
	width: 300px;
}

nav
{
   
    background-color:#eeeeee;
    position: absolute;
    height:150px;
    width: 600px;
    left: 312px;
    top: 0;
   
    
}

#banniere_image
{   
    position: relative;
	background-color:#E59;
    background: url(images/batiment.jpg);
    height: 200px;
    margin-bottom: 12px;
    border-radius: 10px;
}

#banniere_description
{
    position: relative;
    background-color: rgba(24,24,24,0.8);
    color: white; 
    height: 40px;
    top: 160px;
   
}

section{
    position: relative;
}

article
{
	
	background-color:#eeeeee;
	position: absolute;
    height: 500px;
    top: 0px;
    width: 600px;

}

aside
{
    
    background-color: #706b65;
    position: relative;
    height: 500px;
    top: 0px;
    left: 612px;
    width: 300px;
    border-radius: 10px;
    box-shadow: 1px 2px #a3a3a3;
}

footer
{
   background-color:#eeeeee;
   position: relative;
}

#tweet
{
	background-color:#dddddd;
    position: relative;
	height:125px;
	width: 300px; 
    border-radius: 10px;
    box-shadow: 1px 2px #a3a3a3;
}

#mes_photos
{
	background-color:#dddddd;
    position: absolute;
	height:125px;
	top: 0px;
    left: 306px;
    width: 300px;
    border-radius: 10px;
    box-shadow: 1px 2px #a3a3a3;
}

#mes_liens
{
	background-color:#dddddd;
    position: absolute;
	height:125px;
    top: 0px;
    border-radius: 10px;
	left: 612px;
    box-shadow: 1px 2px #a3a3a3;
    width: 300px 
   
}

#monlogo{

position: absolute;
top: 60px;
left: 304px;

}

#Photo1
{
position: absolute;
top: 958px;
left: 630px;
}

#Photo2
{
position: absolute;
top: 958px;
left: 690px;
}

#Photo3
{
position: absolute;
top: 958px;
left: 750px;
}

#Photo4
{
position: absolute;
top: 958px;
left: 810px;
}

#Bulle
{
position: absolute;
top: 490px;
left: 904px;
}

#Ressources 
{
position: absolute;
top: 900px;
left: 930px;
}

#Tweet
{
position: absolute;
top: 900px;
left: 320px;  
}


#Productions
{
position: absolute;
top: 370px;
left: 304px;
}

#Photos
{
position: absolute;
top: 900px;
left: 620px;
}

#Illustration 
{
position: absolute;
top: 440px;
left: 1000px;
}