*
{margin:0px;
padding:0px;}

body
{background-color:dimgray;
background:linear-gradient(dimgray,gainsboro);
text-align:center;
font-family:arial;
display:flex;
flex-direction:column;
justify-content:space-between;}

h1, h2
{color:white;}

#petit {display:none;}

/*Estilos Generales*/
.bt 
{display:inline-block;
width:140px;
font-size:1.6em;	
background:#7f8c8d;
font-family:calibri;
color:#fff;
margin:10px;
padding:48 8px;
text-align:center;
border-radius:15px;
text-decoration:none;
box-shadow:10px 10px 10px #373c3c;
}

.bar
{display:block;
text-align:left;
font-size:0.9em;
max-width:1000px;
padding:2 20px;
border-radius:25px;
box-shadow:10px 10px 20px #404040;
background-color:#B5b5b5;
text-decoration:none;
color:black;}
  
/*Colores*/
.bt.wo {background:#3498db;} 
.bt.ac {background:#e74c3c;}
.bt.cr {background:#f1c40f;color:black;}
.bt.pwt {background:#e67e22;}
.bt.c2 {background:#9b59b6;}
.bt.ex {background:#83a900;} /*#4CAF50*/

.bt.wo:hover {background:#1976d2;} 
.bt.ac:hover {background:#D32F2F;}
.bt.cr:hover {background:#FFA000;color:black;}
.bt.pwt:hover {background:#FF5722;}
.bt.c2:hover {background:#7B1FA2;}
.bt.ex:hover {background:#388E3C;}

#tc1, #tc2, #dii
{border-radius:30px;
display:inline-block;}

#leo a

{text-decoration:none;

font-style:italic;}



#leo a:link, #leo a:visited, #leo a:hover

{color:black;}

/*disposition pour �crans grands*/
#tete
{margin-top:100px;}

.bt.c2
{margin-left:120px;}
.bt.pwt
{margin-right:30px;}

.bt.cr
{margin-left:120px;
margin-right:30px;}

.bt.ac
{margin-left:150px;
margin-right:30px;}

.bt
{margin-top:-25px;}

#tc1, #tc2, #dii
{margin:20px;
padding:10px;}


#bb, #tete, #leo
{margin:20 0px;}

#tete{margin-top:120px;}
#leo{margin-bottom:120px;}

#bb
{display:flex;
flex-direction:row;
justify-content:center;
flex-wrap:wrap;}

/*pour les grands �crans seulement*/
@media screen and (min-width:900px) {
#tc1
{min-width:850px;}
}

/* pour �crans de moins de 19 pouces, on enl�ve les marges du haut et du bas */
@media screen and (max-width:1640px) {
#tete{margin-top:60px;}
#leo{margin-bottom:60px;}
}

@media screen and (max-width:1060px) {
#tete{margin-top:30px;}
#leo{margin-bottom:30px;}
}

/* pour �crans de moins de 10 pouces, on r�duit la hauteur des �tiquettes */
@media screen and (max-width:1024px) {
.bt 
{padding:28 8px;}
}

/* Pour les �crans de tablettes, on fait appara�tre les fonds des boites tc1 tc2 dii et disparaitre les h1*/
@media screen and (max-width:900px) {
.bar
{box-shadow:0px 0px 0px #404040;}
.bt 
{padding:15 8px;}
#tc1, #tc2, #dii
{box-shadow:10px 10px 20px #404040;
background-color:#B5b5b5;
margin:50 20px;}
#tc1{width:500px;}
.bt.c2
{margin-left:120px;
margin-top:10px;}
.bt.pwt
{margin-right:12px;}
}

/* Pour les �crans de tablettes >770 on �galise les pav�s tc1 tc2 et divers*/
@media screen and (max-width:770px) {
#tc2, #dii
{width:500px;
text-align:right;}
#tc1,#dii,#tc2
{margin-top:10px;
margin-bottom:10px;}
.bt.cr, .bt.ac{margin-right:120px;}
}




/* Pour les �crans de tablettes >560 on passe au menu en barres verticales en effa�ant les titres*/
@media screen and (max-width:560px) {
#bb{display:none;}
#petit{display:block;
width:80%;
box-shadow: 5px 5px 15px black;}
.bt 
{display:block;
width:100%;
margin:0px;
border-radius:0px;
box-shadow:0px 0px 0px #373c3c;
}
.bt.wo, .bt.c2, .bt.cr, .bt.ac
{margin-top:0px;
margin-left:0px;
}
}

/* En dessous de 350 de large on r�duit la hauteur des �tiquettes*/
@media screen and (max-width:350px) {
.bt 
{padding:8 8px;
font-size:1em;}
h1, h2 {font-size:1em;}
#tete{
position:fixed;
background-color:dimgray;
z-index:2;
padding:10px;
margin:0;}
#petit{margin-top:86px;}
}