#page {
	background-color:56a247;
	border:10px solid #001e57;
	text-align:left;
	width:65%;
	padding:30px;
}

h1 {
	font-size:30px;
	font-family:Arial, sans serif;
}

img.pendu {
	float:right;
	width:300;
	border:5px solid yellow;
}

h2 {
	font-size:16px;
	font-family:Arial, sans-serif;
}

#mot {
	margin:30px 0 0 0;
	clear:both;
	top:100px;
}

#mot td {
	padding:10px;
	background-color:yellow;
	border:2px inset black;
	width:30px;
	height:30px;
	font-weight:bold;
	font-size:1.5em;
	text-align:center;
}

#mot p{
	visibility:hidden;
}

#clavier{
	border:4px outset black;
	padding:10px;
	background-color:#2b80d5;
	width:50%;
}

#clavier td {
	background-color:white;
	border:1px solid black;
	width:25px;
	height:25px;
	text-align:center;
	font-weight:bold;
	cursor:pointer;
}

a.lien{
	color:green;
	text-decoration:none;
	font-size:20px;
}

a.lien:hover{
	color:red;
	font-weight:bold;
	text-decoration:underline;
}

.boite{
text-align:center;
font-family:Segoe UI,Calibri,Myriad Pro,Myriad,Trebuchet MS,Helvetica,Arial,sans-serif;
color: black;
font-size:14px;
font-weight:bold;
background-color:white;
border:2px solid black;
visibility:hidden;
border-radius: 15px;
z-index:3;
position: absolute;
top: 40%;
left: 30%;
width:40%;
height:20%;
padding:10px; 
}

@media only screen and (max-width: 1279px)
{
#page {	width:70%; }
img.pendu {	width:70%; margin-right:15%; margin-bottom:20; }
#clavier{ width:100%; }
#clavier td { width:50px; height:50px; font-size:40px; }
#mot { width:100%; }
#mot td { width:50px; height:50px; font-size:40px; }
h1 { font-size:40px; }
h2 { font-size:30px; }
a.lien{	font-size:30px; }
.boite{ font-size:20px; }
}