@font-face { 
           font-family: "Elegante";
           src: url(data/elegbold.ttf);
			}


h1 {   
	font-size: 300%;
	width:100%;
	color: black; 
	font-family: "Elegante"; 
	text-align: center; 
	}

@font-face {
            font-family: "Rusch";
            src: url(data/Rusch-GoticoAntiqua100G.otf);
			font-weight: bold;
		    } 

h2 {     font-size: 120%;  width:100%;  color: black;   font-family: "Rufscript";   text-align: center;   }

body{
	font-family: "Rusch"; 
	font-size: 20px; 
	background-color: skyblue;   
	}

 
#conteneur-menu{
		background-color:skyblue;
		display:block;
		height:80px;
		position:relative;
			}
#menu {   
 		background-color:skyblue;
		position:absolute;
		height: 80px;
		margin:5px;
		margin-top: 5px;		   
		width:100%; 
		text-align: center;   
		}

#menu dl {
		width:50%;
		height: 80px;
		margin:0px;   
		padding: 0px;
		display: block;   
		float: left;
		}
#menu dt {
		background-color: beige;
		font-size:30px;
		display: block;
		height: 80px;
		color:black;
		line-height:80px;
		text-align:center;
		border-radius: 15px;
		border: solid 2px black; 
		cursor:pointer;
		animation: mymove 5s infinite;
		}
#menu dt:hover{
		color:darkred;
		font-size:200%;
		border-radius: 30px;
		border-color:darkred;
		border:solid 3px darkred;
		}
#menu dd{
		width:100%;
		display:block;
		margin:0px;
		padding:0px;
		background-color: skyblue;
		}
#menu dd ul{
		margin:0px;
		padding:0px;
		text-align:center;
		list-style:none;
			}
#menu dd ul li{
		display:block;
			}
#menu dd ul li a{
		margin:0px;
		padding:5px;
		color:black;
		text-decoration:none;
		display:block;
		background-color: powderblue;
		height:40px;
		line-height:40px;
		border-radius: 15px;
		border:solid 2px darkorange;
		transition: border-radius 1s, border-color 2s; /* transition when the mouse leave */
			}
#menu dd ul li a:hover{
		background-color:beige;
		height:200%;
		width:100%;
		color:darkred;
		font-size:180%;
		border-radius: 30px;
		border:solid 3px darkred;   
		/*transform: rotate(360deg);*/
		transition: all 1s;/*  transition when the mouse over */
			}
#menu dl dd{
		display:none;
		transition: 0s
			}
#menu dl:hover dd{
		display:block;
		transition:  1s
			}


@keyframes mymove { 100% {box-shadow: 5px 10px 15px darkred;} }
.main {   
		float: left;   
		width: 78%;   
		padding: 0 10px;
		margin-top: 17px; 
		}  

.right {   
		background-color: powderblue;   
		float: left;   
		width: 20%;   			
		padding: 0px;   
		margin-top: 12px;   
		text-align: center; 
		}  

.bottom {
	    background-color: powderblue;
        float: left;
        width: 100%;
        padding: 15px;
        margin-top: 7px;
        text-align: center;
        } 

@media only screen and (max-width: 840px) {   
		/* For mobile phones: */   
		.menu, .main, .right {     
					width: 100%;   
							} 
		}