body{
    background-color: #067847;
}

a { /* forcé le noir sur le lien mais ne marche pas quand je mets visited*/
    color : black;
    text-decoration: none;
 
} 

.head{ /*Moi, le blob*/
    position: relative;
    margin-top: 40px;
    top:20%;
    left:40%;
    width: 50%;
    height: 50%;
    font-family: Marker Felt, fantasy;
    color: Black;
    font-size: 300%;
    text-decoration: none;
}

.menu{ 
	font-family: Tahoma;
	background-color: #055E38;
	border-radius: 5px; /*bords arrondis*/ 
	text-align: center;
    border: 1px solid black;  /* bordure intérieur*/
    text-decoration:none;

}

.menu:hover{
    background-color: #b3b3b3;
}

.menu:active{
    background-color: #C48D14;
}

table{
    border: 2px solid black; /*bordure extérieur*/
    border-radius: 2px;
    border-collapse: separate;
    margin-top: 40px;
    margin-left: 10%;
    width: 80%;
}

.circle {
    margin-top: 20px;
    margin-left: 20%;
    width: 450px;
    height: 450px;
    background-image: url('bact.png');
    background-size: contain;  	/*pour être sur de voir toute l'image, pas de zoom*/
    transition: transform 5s;
    background-repeat: no-repeat;
	}	
	
.circle:hover {
	transform: rotate(360deg)
}
h2{ /* regardez moi comme je suis beau */
    margin-top: 30px;
    margin-left: 17%;
    font-size: 100%;
    font-family: Tahoma;
    color: #C48D14;
}

.textbox{ /*je ne suis ni un animal ... */ 
    background-color: #067847; 
    color: #b3b3b3;
    font-family: Tahoma; 
    font-size: 150%;
    position: relative;
    margin-top: -300px;
    margin-left: 60%;
    width: 370px;
    height: auto;
    overflow: visible;  /*permet au texte d'aller à la ligne quand on réduit la fenêtre*/
    
}















/* appelé l'image ensuite permet de contrer le vol d'image et c'est plus pro*/
.square{ /* image blob racine*/
    position: absolute; z-index:1;/*permet à l'image d'être à coté du texte*/
    margin-top: 70px;
    margin-left: 20%;
    width: 40%;
    height: 200px;
    background-image: url('spragg.jpg');
    background-size: 70%;  
    background-repeat: no-repeat;
}
.square2{ /* image blob labyrinthe*/
    position: absolute; z-index:1;
    margin-top: 370px;
    margin-left: 20%;
    width: 40%;
    height: 460px;
    background-image: url('laby.png');
    background-size: 70%;  
    background-repeat: no-repeat;
}
.square3{ /* image blob map*/
    position: absolute; z-index:-1; /*autre solution pour être DERRIERE le texte*/
    margin-top: 760px;
    margin-left: 20%;
    width: 28%;
    height: 500px; /*attention longueur de l'image pour qu'elle ne passe pas
    SUR "clique ici pour voir mon CV*/
    background-image: url('mapnew.png');
    background-size: 100%;  
    background-repeat: no-repeat;
}

h3{ /* mes caractéristiques, mes compétences, mes maison*/
    margin-top: 20px;
    margin-left: 10px;
    font-family: Tahoma;
    font-weight: 600;
    color: black;
    text-align: center;
}

#textbox2 h3 { /*sous titres description*/
    margin-left: 0;
    text-align: left;
    font-family: Tahoma;
    color: black;
}

#textbox2{ /*Description du blob*/
    font-family: Tahoma;
    z-index:2;
    line-height: 2;
    color: #b3b3b3;
    position: relative;
    margin-left: 55%;
    width: 35%;
    height: auto;
    overflow: visible; /*permet au texte d'aller à la ligne quand on réduit la fenêtre*/
    
}

#textbox2 span:hover { /* + div pour hover sur tout le block et pas que le texte*/
	color:black;
	}

#lienpdf {
	padding:15px 15px;
    font-size: 150%;
    Font-family: tahoma; 
    background:#055E38; 
    border:0 none;
    cursor:text;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    border:2px solid black;
    margin-left: 35%;
    width: 25%;
    text-align:center;
    z-index:3;
    }

#lienpdf:hover{ /*couleur au passage de la souris*/
    background-color: #b3b3b3;
}

#lienpdf:active{ /*couleur au clique*/
    background-color: #C48D14;
}
#lienpdf:hover{
  cursor: pointer;
}









#bloby {
	position: fixed;
	width: 10%;
    height: 150px;
    margin-left: 80%;
    opacity: 0.5; /*transparant pour qu'il ne cache pas le texte*/
}

.bouton:hover{
  cursor: pointer; /*QUIZ pointeur sur le bouton*/
}

.validation{ /*aspect des FB*/
	font-family:tahoma;
	font-size:22px;
	width: 40%;
}

.quiz{ /*bouton + ABC */
    margin-top: 20px;
    margin-left: 25%;
}

.quiz span{ /* span : uniquement ABC*/
    margin-left: 50px;
    color: #b3b3b3;
    font-family: Tahoma;
    line-height:30px; /* au lieu de mettre des br */ 
} 
.quiz span:hover{
	color:black;
	font-weight: bold;
	}
	
.questions {
    color:#C48D14;
    font-size: 140%;
    margin-left:20%;
}


#retourcours {
	padding:15px 15px;
    font-size: 150%;
    Font-family: tahoma; 
    background:#055E38; 
    border:0 none;
    cursor:text;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    border:2px solid black;
    margin-left: 35%;
    width: 25%;
    text-align:center;
    z-index:3;
    }

#retourcours:hover{ /*couleur au passage de la souris*/
    background-color: #b3b3b3;
}

#retourcours:active{ /*couleur au clique*/
    background-color: #C48D14;
}
#retourcours:hover{
  cursor: pointer;
  }
  
  
  
  
  
  
  
  
  
  
  
  

h4{ /* rempli ce formulaire*/
	font-family : Tahoma;
	Margin-left: 10%; 
	Font-size: 20px;
}






#gmap{
        position: relative;
        top: 5%;
        left: 30%;
        width: 40%;
        height: 100%;
   		border:2px solid black;
     	border-radius: 5px; 
  		left: 30%;
   		}

  #textbox3{ /*page contacte mon assistant*/
    font-family: Tahoma;
    color: black;
    padding:10px 10px;
    position: relative;
    left: 30%;
    width: 38.5%;
    height: auto;
    overflow: visible;  /*permet au texte d'aller à la ligne quand on réduit la fenêtre*/
    border-radius: 5px; 
    border:2px solid black;
    background-color: #FAF7E9;
    }
    /*input : envoyer formulaire*/
    
    
#form { /*formulaire*/
	margin-left : 400px;
	Font-family: tahoma;
	} 
input[type=text] {
    padding:5px; 
    border:2px solid black; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #DCDCDC;
    width: 30%; /*j'ai agrandi pour que tout le texte apparaisse*/
}

textarea[type=text] { 
    padding:5px; 
    border:2px solid black; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #DCDCDC;
}

input[type=submit] {
    padding:15px 15px;
    font-size: 100%;
    Font-family: tahoma; 
    background:#055E38; 
    border:0 none;
    cursor:text;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    border:2px solid black;
}

#submit:hover{ /*couleur au passage de la souris*/
    background-color: #b3b3b3;
}
#submit:active{ /*couleur au clique*/
    background-color: #C48D14;
}



    
    
    
    
    
    
    
    
#vacances {
	padding:5px 5px;
    font-size: 120%;
    Font-family: tahoma; 
    background:#055E38; 
    border:0 none;
    cursor:text;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    border:2px solid black;
    margin-left: 32%;
    width: 35%;
    text-align:center;
    }

#vacances:hover{ /*couleur au passage de la souris*/
    background-color: #b3b3b3;
}

#vacances:active{ /*couleur au clique*/
    background-color: #C48D14;
}
#vacances:hover{
  cursor: pointer;
  }
  
#euro {
	padding:5px 5px;
    font-size: 100%;
    Font-family: tahoma; 
    color: black;
    background-image:url(moneybw.jpg);
    background-repeat:repeat;
    background-size: 50px; /*réduire et répéter pour avoir plein de billets en fond*/
    cursor:text;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    border:2px solid black;
    margin-left: 32%;
    width: 36%;
    text-align:center;
    -webkit-transition: border 1s, font-size 1s; 
    transition: border 1s, font-size 1s;
   
    }

#euro:hover{ /*couleur au passage de la souris*/
    font-size: 180%;
    font-family: impact;
    border: 10px;
    border-style: groove;
    background-size: 300px;
    padding:20px;
    border-color: red yellow magenta blue;
    -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

#euro:active{ /*couleur au clique*/
    background-color: #C48D14;
    
}
#euro:hover{
  cursor: pointer;
  }


#textbox4{ 
    margin-top: 1%;
    padding:10px;
    padding-left: 20px;
    box-shadow: 10px 10px 5px black;
    margin: auto;
    background-image: url(papier3.jpg);
  	background-repeat:repeat;
    font-family: courier;
    color: black;
    border-radius: 5px; 
    border:2px solid black;
    position: relative;
    width: 43%;
    height: auto;
    overflow: visible; 
}

#sign {
	width: 30%;
    height: auto;
    margin-left: 300px;
	}