h1
{	
	position : absolute;
	top : 5%;
	left : 26%;
	font-size : 1.5em ;
	font-family : Castellar, Impact, Arial, sans-serif;
	text-align : center;
	color : white;
	width : 47%
}

h2
{
	font-size : 1.3em ;
	font-family : Castellar, Impact, "Comic Sans MS", Arial, sans-serif;
	margin-left : 27%;
	position : absolute;
	top : 50% ; 
	color : white;
}

nav
{
    float: right ;
	font-size : 1em;
	font-family : Castellar, Georgia, "Comic Sans MS", Arial, sans-serif;
	font-weight: normal;
    position :absolute;
	top : 26%;
	right : 5% ;
    width: 150px;
}

nav li
{
	 border: 2px solid teal;
	 width : 145px;
	 border-radius: 5px;
	 padding : 5px;
}

nav li a 
{
	color : white;
	  text-transform: uppercase;
	text-decoration: none;
}

body
{ 	
    color : white ;
	background : black;
	background-position : top center;
	
}

nav li a:visited
{
	color: white;
} 

a:hover 
{ 
	text-decoration : underline;
}

li
{
	display: inline-block;
    border: 1px solid black;
}

#bloc_page
{
    width: 800px;
    margin: auto;
}

#logo
{
	position : absolute;
	left : 2%;
	top: 2%;
	width : 15%
	
}

.imageflottante
{
    float: left;
}

#separateur
{
	position : absolute ; 
	top : 42%;
	left : 30%;
	width : 40%
}

.texte
{
	position : absolute;
	top : 60%;
	margin-left : 20%;
	margin-right: 20%;
	color: silver;
	font-size : 1em;
	font-family : Georgia, "Comic Sans MS", Arial, sans-serif;
}

.photo_profil
{
	float: left;
	border-radius: 10px;
	width: 15%;
	position : relative;
	right : 20px
}

.fleche_droite
{
	position : fixed;
	right : 12%;
	top : 90%;
}

.fleche_gauche
{
	position : fixed;
	left : 12%;
	top : 90%;
}

.background
{
	position : absolute;
	left : 20%;
	top : 0px;
	width : 60%;
}

.ancres a
{
	color: silver;
	text-decoration: none;
	font-weight : bold;
}
.ancres a:hover
{
	text-decoration : underline;
}

citation
{
	font-style: italic
}

h3
{
	font-size : 1.2em ;
	font-family : Georgia, "Comic Sans MS", Arial, sans-serif;
	color : silver;
	margin-left : 12%;
}

.vaisseau
{
	float : left;
	width: 32%;
	position : relative;
	right : 15px
}	

.neuromancien
{ 
	float : right;
	position : relative;
	left : 10px;
	width : 15%;
}
.vingtmille_lieues_sous_les_mers
{ 
	float : left;
	position : relative;
	right : 10px;
	width : 17%;
}

.alliens
{
	float : right ;
	position : relative ;
	left : 10px;
	width : 35% ;
}
.robot
{
	float : left ;
	position : relative ;
	right : 10px;
	width : 22% ;
}
.uchronie
{
	float : right ;
	position : relative ;
	left : 10px;
	width : 17% ;
}
	
.cyberpunk
{
	float : left;
	position :relative;
	right : 10px;
	width : 27%;
}

.steampunk
{
	float : right;
	position : relative;
	left : 10px;
	width : 28%;
}

.separateur_2
{ 
	position : absolute;
	left : 10%;
	width : 70%
}

.Robot 
{
	float : left ;
	position : relative ;
	right : 10px;
	width : 13% ;
}

.wormhole
{
	width : 30%;
	float : right ;
}

.fusee
{ 
		float : right;
		width : 10%;
		position : relative ;
		left: 10px;
}
.voiture_volante
{ 
		float : left;
		width : 25%;
		position : relative ;
		right : 10px;
}