body {
	
	margin:0;
	padding:0;
	
	font-family: Georgia, 'Times New Roman', Times, serif;
	height:100vh;
	background-color: #2c3e50;

	
}



header {
	

	
	background-color: rgb(11, 29,82);
	width: 100%;
	height:7vh;
		top:0px;
	display: flex;
	justify-content:space-evenly;
	align-items: center;
}
header h1 {
	color:whitesmoke;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 3px 3px 3px #ab4040;
}
  h1 span {
            display:inline-block;
            transform-origin: 0 0;
          }

.fa-utensils {
	/*position: absolute;*/
    font-size: 2.5rem;
    color: #f1c40f;
    transition: 1s;
   /* margin-left: -210px;
    margin-top: -25px;*/
}
.fa-utensils:hover {
    color: #f39c12;
    transform: scale(1.2);
}


 #box {
	margin:auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	align-items: center;
	
	height:75vh;

	max-width: 1024px;
	background-color: #2c3e50;


}


.soustitre {
	position:absolute;
	top:-13px;
	font-size: 16px;
	letter-spacing: 2px;
	color: navy;

	text-transform: uppercase;
	text-shadow: 3px 3px 3px #ab4040;
}

div .dossier{
	position: relative;
	width:200px;
	height:300px;
	border:1px solid grey;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 6px;
	margin: 10px;

	
	
}



/*div .dossier:hover{

	
	background-color: #e3fbf2;
}*/

div:hover a{
	
	color:purple;
}
h1 {
	text-align: center;
}

div a {
	text-decoration: none;
	color:navy;
	
}
.dossier:hover {
	/*background-color: white;*/

	  background: linear-gradient(to bottom, white, pink, hotpink);
	  
}



.loupe {
	background-color: #fbfa91;
	 /*background: linear-gradient(to bottom, white, pink, hotpink);*/
}


/*#box div:nth-child(8):hover{
	background: fuchsia;*/

}


.loupe img {
	margin-right: 20px;
}

.loupejunior {
	background-color: blanchedalmond;
}

.vocabulaire {
	background-color: burlywood;
}

.mathematiques {
	background-color: blueviolet;
	
}


.anglais {
	background-color: rgb(234, 51, 35);
}
.litterature {
	background-color: lawngreen;
	/*background-color: lightgreen;*/
}
.litterature img {
	/*border-radius: 4px;
	margin-top: 20px;*/


	margin-top: 10px;
	margin-left: 20px;
}
.animaux {
	background-color: deeppink;
}
.origamis {
	/*background-color: lightcoral;*/
	background-color: hotpink;
}



.loupejuniorlogo {

	padding-top: 20px;

}

.oblique {
 
    font-size: 1em;
    color: whitesmoke;

  
    
  
   
    font-weight: bolder;
    letter-spacing: 4px;
    text-shadow: 0 0 10px #f3f3f3;
    text-transform: uppercase;


}

footer {
	position:fixed;
	bottom: 0;
	background-color: cornflowerblue;
	width:100%;
	height:5vh;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}


footer p a {
	color:aliceblue;
	text-decoration: none;
}


footer p a:hover {
	color: orangered;
	
}


footer p{
	color:aliceblue;
	font-size: 14px;
}

.fa-user-pen {
	/*position: absolute;*/
    font-size: 2rem;
    color: #f1c40f;
    transition: 1s;
   /* margin-left: -210px;
    margin-top: -25px;*/
}
.fa-user-pen:hover {
    color: #f39c12;
    transform: scale(1.2);
}

.fa-magnifying-glass{
	/*position: absolute;*/
    font-size: 2rem;
    color: hsl(329, 92%, 45%);
    transition: 1s;
   /* margin-left: -210px;
    margin-top: -25px;*/
}
.fa-magnifying-glass:hover {
    color: #f39c12;
    transform: scale(1.2);
}
.compteur {
	opacity: 0.1;

}
.compteur img {
	border: 0;
}

@media screen and (max-width: 700px) {
    header h1{
       font-size:14px;
    }
    .fa-user-pen {
	
    font-size: 1rem;
    color: #f1c40f;
    transition: 1s;
  
}
.fa-user-pen:hover {
    color: #f39c12;
    transform: scale(1.2);
}

.fa-magnifying-glass{
	
    font-size: 1rem;
   
}
footer p{
	
	font-size: 12px;
}


}