html, body 
{
	margin: 0;
	padding: 0;
	background: #000033;
	color:white;
	font: normal 12px "typewriter";
}

img
{ 
	border:1px solid black;
	text-decoration:none;
	outline: none;
}

#page
{
	margin: 0;
	padding: 0;
	display:block;
	width:1000px;
	height:647px;
	position:absolute;
	left:50%;
	transform:translateX(-500px);
	background-image: url(garde.png);
	background-repeat: no-repeat;
    background-attachment: absolute;
    background-position:100% 40px;
	background-size: 497px 600px;	
	color:white;
	font: normal 12px "typewriter";
}

#copyright
{
	display:block;
	top:45px;
	left:50%;
	transform:translateX(-490px);
	position:absolute;
	/* border:3px solid red; */
	text-decoration:none;
}

#texte
{
	padding: 20px;
	display:block;
	top:40px;
	left:50%;
	transform:translateX(-470px);
	width:410px;
	position:absolute;
	color:#333;
	font: normal 14px "typewriter";
	/* border:3px solid red; */
	text-align:justify; /* poussé de la moitié de hauteur de viewport */
 /* poussé de la moitié de hauteur de viewport */
}

#pagright
{
	padding: 20px;
	display:block;
	top:80px;
	left:50%;
	transform:translateX(20px);
	width:410px;
	position:absolute;
	color:#333;
	font: bold 20px "typewriter";
	line-height:12px;
	/* border:3px solid red; */
	text-align:justify; /* poussé de la moitié de hauteur de viewport */
 /* poussé de la moitié de hauteur de viewport */
}

.small
{
	/* border:3px solid red; */
	font: normal 16px "typewriter";
	line-height:10px;
}
.verysmall
{
	/* border:3px solid red; */
	font: normal 12px "typewriter";
	line-height:10px;
}
#page .droite
{
	/* border:3px solid red; */
	padding-left:330px;
	text-align:right; /* poussé de la moitié de hauteur de viewport */
 /* poussé de la moitié de hauteur de viewport */
	font: bold 16px "typewriter";
}

#page .avert
{
	/* border:3px solid red; */
	text-align:left; /* poussé de la moitié de hauteur de viewport */
 /* poussé de la moitié de hauteur de viewport */
	color:red;
	font: bold 14px "typewriter";
}

#curs
{
	margin: 0;
	padding: 0;
	display:block;
	width:497px;
	height:647px;
	position:absolute;
	left:50%;
    cursor:pointer;	
}
select
{
background-color:#FFFFCC;
color:#000;
font: bold 14px "typewriter";		
}

@font-face
{
font-family: typewriter;
src: url(veterantypewriter.ttf);
}

/* Let's get this party started */
body::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
body::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;

    border-radius: 10px;
    background: rgba(0,0,192,0.7); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
body::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(192,192,192,0.7); 
}
	
#book
{
	margin: 0;
	padding: 0;
	display:block;
	top:40px;
	left:50%;
	transform:translateX(-500px);
	width:1000px;
	height:600px;
	position:absolute;
	cursor:pointer;
}	

#jack
{
position:absolute;
bottom:50px;
left:80%;
width:150px;
height:118px;
/* border:2px solid red; */
background-image: url(jack.png);
background-size:150px;
background-attachment: absolute;
z-index:10000;
}

#mau
{
display:block; 
position:absolute;
bottom:35px;
left:55%;
width:120px;
height:155px;
/* border:2px solid red; */
background-image: url(mau.png);
background-size:120px;
background-attachment: absolute;
z-index:10000;
}