html {
  height: 100%;
  min-width: 1080;
  max-width:1080
}

*{
    margin:0px;
    padding: 0px;
    font-family: Deezerlt;}

body{background-image: url('fond.png');
    background-repeat: no-repeat;
    background-attachment: local;
    background-size: 4400px;}

@font-face {
    font-family: Deezer;
    src: url("DeezerProduct-Medium.ttf");
}

@font-face {
    font-family: Deezerlt;
    src: url("DeezerProduct-Light.ttf");
}

/****************************************/
#nom{position: absolute;
        top: 20px;
        left: 90px;
        width: 330px;
        font-size: 40px;
		color:white;}


.div{width: 200px;
        height: 60px;
        display: flex;
        position: absolute;
        top: 80px;
        left: 20px;}
		
.txt{position:relative;
      padding-left: 30px;
      color: white;
      font-size: 20px;
	  top:30px;}
	  
#home{top: 80px;}
#contact{top:160px;}
#passions{top:285px;}
		

.div:hover, .divpassions:hover{background-color: rgb(66, 66, 80);
           border-radius: 20px;
           padding: 5px;} /* le padding est fiat exprès :)*/

#moi:hover, .projet:hover{background-color: rgb(66, 66, 80);
                          border-radius: 20px;}

/****************************************/

#experiences{position: absolute;
			top:410px;
			left:20px;
            width: 360px;
			color: white}
			
#marge{margin-left:160px;
font-family: sans-serif;}


.divpassions{width: 280px;
        height: 60px;
        display: flex;
        position: absolute;
        left: 20px;}

.txtpassions{color: white;
            font-size: 20px;
            padding-left: 20px;
            padding-top: 20px;}

.imagepassions{border-radius: 10px;}

#exp1{top:460px}
#exp2{top:560px}
#exp3{top:660px}
#exp4{top:760px}

/****************************************/
#bienvenue{position: absolute;
            top: 80px;
            left:420px;
            color: white;
            font-family: Deezer;
            font-size: 65px;}

#bienvenue2{position: absolute;
            top: 190px;
            left:420px;
            color: white;
            font-family: Deezerlt;
            font-size: 30px;}

/****************************************/

.projet{position: absolute;
        height: 290px;
        width: 200px;
        top:290px;
        display: block;
        color: white;
        font-size: 30px;
        text-align: center;
        text-decoration: none;}

.play{width: 30px;
      height: 30px;
      position: absolute;
      top:162px;
      left: 162px}

.img{width: 180px;
     height: 180px;
     border-radius: 10px;
     margin: 10px;}


#projet1{left: 1660px}
#projet2{left: 1416px}
#projet3{left: 1172px}
#projet4{left: 928px}
#projet5{left: 684px}
#projet6{left: 440px}

/****************************************/

#moi{position: absolute;
    top:620px;
    left:450px;
    height: 250px;
    width: 200px;
    display: block;
    color: white;
    font-size: deezerlt;
    font-size: 30px;
    text-align: center;
    text-decoration: none;}

#temps{position: absolute;
        top: 340px;
        left: 380px;
        width: 1500px;
        height: 100px;
        z-index: -1;
        opacity: 0.5;}

#textprojet{line-height: 1.4;}

#moi img{border-radius: 100%;
            width: 200px;
            height: 200px;}

/*#artiste{color: white;
        font-family: deezerlt;
        font-size: 20px;
        position: absolute;
        top:600px;
        left: 420px;}*/

#nuage{position:absolute;
        top: 630px;
        right: 80px;
        height: auto;
        width: 280px;}
/****************************************/

footer{
    background-color: rgba(255, 255, 255, 0.495);
    padding: 10px;
    max-height: 34px;
    font-size: 18px;
    text-align: center;
    position: absolute; bottom: 0; left: 0; right: 0;
    color: rgb(255, 255, 255);
}