@font-face {
	font-family: "ComicSpice";
	src: 	url("/fonts/ComicSpice.ttf") format("truetype");
}
 html, body 
{ 
 	height: 100%;

 


	background: cyan;
	line-height: 1.4;
	font-family: "ComicSpice", sans;
}


button {
  		display: inline-block;
	
 		cursor: pointer;
		text-align: center;
 		text-decoration: none;
		outline: none;
 		color: #000;
 		background-color: #ffc119;
 		border: none;
 		border-radius: 15px;
 		margin: 0px 5px;
		font-size: x-large;
		box-shadow: 1px 3px #999;
	}

	button:hover {
		background-color: #eeb1e7;
		box-shadow: 2px 4px #999;

	}

	button:active {
 		 background-color: #e7e7e7;
 		 box-shadow: 0 5px #666;
 		 transform: translateY(4px);
	}
	
.cadres{
    display: block;
    position:relative;

        border-radius: 5em;
        text-align:center;
	  margin:3%;
        height: 85vh;
   width:80vw;
	background-color: '#005757';

     left:10vw;
     transition: left 0.8s, right 0.8s, height 0.8s, width 0.8s, top 0.8s, background-color 0.8s;
   
  }
	
  
  
 
  
.cadres:hover {
  height: 90vh;
  width:82vw;
  top:4vh;

  
  
}
.arrow-left {
position:fixed;
   top: 25vh;
     right:95vw;
  width: 3vw; 
  height: 10vh; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-right: 60px solid green;
}

.arrow-right {
position:fixed;
   top: 25vh;
     left:95vw;
  width: 3vw; 
  height: 10vh; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

@media screen and (max-width: 780px) {
.arrow-left, .arrow-right {
visibility: hidden;
}
}

.
.letsGo {
	padding:1%;
	display:flex;
  position:absolute;
bottom:2vh;

  }
  
  .centrerLetsGo{
  	display:flex;

position:absolute;
bottom:10vh;
left:46%;



  }
  h1{

   	 color:#ffc119;
   	 margin-left:5%;
   	    	 margin-right:5%;
   	 font-size:3.5vh;
   	    		border-radius: 15px;
   	  	background-color : #293749;
   	  	 	        font-weight: bold;
  }
  
  h4 {
text-align: center;
   	 font-size:2.5vh;

  }
  
  .illustration {

    max-width:80vw;
  height: 65%;

  bottom:2vh;
   		border-radius: 15px;

  opacity:0.8;
       transition: left 1s, right 1s, height 1s, width 1s, top 1s, opacity 1s;
}

 @media only screen and (max-height: 720px) {
.illustration {display:flex;
position:absolute;
bottom:10vh;
  top:15vh;
    max-width:80vw;


}

h1{
   	 font-size:7vh;
   	 transition: opacity 1s;
}

h4{
   	 font-size:5vh;

}

.header-menu {
        justify-content: flex-end;
        height: 10%;
        opacity: 0.6;
        text-align:end;
        color: #000;
        margin: 1%;
        font-family : arial, sans-serif;
        text-transform: uppercase;
      }