h1{
        text-align: center;
        font-family: Arial;
        font-size: 65px;
        
}

ul
{
	/* On supprime les puces, on précise une largeur
        et on centre la liste par rapport à la page. */
        list-style: none;
	width: 60%;
	margin: auto;
        margin-top: 60px;
}

li
{
        
	/* On fixe les dimensions
        des éléments de notre liste. */
        width: 150px;
	height: 150px;

        /* On met en forme le texte. */
	text-align: center;
	font-weight: bold;
  
        /* On modifie l'affichage pour que
        les éléments soient sur la même ligne. */
	display: inline-block;
	
        /* On ajoute une petite bordure
        et on définit les marges.  */
	
	margin: 12px;
	padding: 0px;

        /* Quitte à faire du CSS3, autant
        avoir des coins arrondis :p. */
        border-radius: 2px;
        
        /* On centre l'arrière-plan. */
        background-position: center;
      
        /* On modifie la position pour pouvoir ensuite
        placer comme on le souhaite la description des liens. */
        position: relative;

        /* On n'affiche pas ce qui dépasse de nos éléments ! */
	overflow: hidden;	
}

/* On indique les images à afficher
en arrière-plan pour chaque élément. */
#telegram{background-image: url('telegram/telegram.jpg')}
#reveil{background-image: url('reveil/reveil.png')}
#anagramme{background-image: url('anagramme/fleur.png')}
#epiphanie{background-image: url('couronne.png')}
#passion{background-image: url('passion/passion.png')}
#maintenant{background-image: url('maintenant/seascape.gif')}
#gabian{background-image: url('gabian/eye.jpg')}
#poesiemagnetique{background-image: url('poesiemagnetique/glitch.png')}
#espritanimal{background-image: url('espritanimal/espritanimal.jpg')}
#crechemelba{background-image: url('crechemelba/creche.png')}
#coeur{background-image: url('plaster.png')}
#pain2mousses{background-image: url('pain2mousses/4.png')}
#secretpalace2{background-image: url('secretplace2/6.png')}
#secretpalace{background-image: url('secretpalace/secretpalace.png')}
#desert{background-image: url('desert/desert.png')}
#cool{background-image: url('cool/cool.png')}
#sexyphone{background-image: url('sexyphone/img/bg11.jpg')}
#pizza{background-image: url('img/pizza.png')}
#dessert{background-image: url('bgimages/69.png')}
#bravo{background-image: url('bravo/url.png')}
#ananas{background-image: url('ananassa/skin.jpg')}
#item6{background-image: url('img/outil.jpg')}
#item7{background-image: url('img/encore.jpg')}
#item1{background-image: url('img/info.jpg')}
#item2{background-image: url('img/schema.jpg')}
#item3{background-image: url('je/url2.png')}
#item4{background-image: url('img/pain.jpg')}
#item5{background-image: url('img/diam.png')}
#item8{background-image: url('img/poke.png')}
#item9{background-image: url('img/dent2.png')}



li a
{
        /* Pour fixer les dimensions d'un lien,
        il est nécessaire de l'afficher en tant
        qu'élément de type block. */
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        font-family: Arial;
        font-size: 20px;
}

li span
{
        display: block;
        height: 50px;
        width: 100%;
        color: #fff;
        margin: 0px;
        
        /* La taille des lignes est égale à
        la hauteur de l'élément. Cela permet
        de centrer verticalement le texte. */
        line-height: 50px;
        
        /* Abusons du CSS3 en affichant
        un arrière-plan semi-transparent ! */
        background-color: rgba(0,0,0,0.3);

        /*Mettons les coins inférieurs arrondis
        pour que ce soit plus propre
        (merci à wibix pour la remarque)*/
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
 
        /* Position absolue pour afficher
        la description avec précision. */
        position: absolute;
        
        /* L'ordonnée de l'élément est égale
        à la hauteur de son parent (150px) :
        la description sera donc située sous
        son parent. */
        left: 0px;
        top: 150px;
}


li:hover span
{
        top: 100px;
}

footer{
        text-align: center;

        font-family: Arial;
        font-size: 17px;
        margin-top: 90px;

        
}