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

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



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

.code
{
	padding:10px;
	color:black;
	font: bold 40px "typewriter";
	border:3px solid red;	
}

#pagright
{
	padding: 20px;
	display:block;
	top:100px;
	left:50%;
	transform:translateX(20px);
	width:410px;
	position:absolute;
	color:#333;
	font: bold 20px "typewriter";
	/* 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";
}
.verysmall
{
	/* border:3px solid red; */
	font: normal 12px "typewriter";
}
#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";
}


#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); 
}
	
input[type="text"]
{   
	font: bold 20px "typewriter";
	color:#333;
	background:transparent;
	border:0px solid #000;
	border-bottom:2px dashed #333;
	
}

input[type="text"]:focus 
{ 
    background-color: rgba(0,0,0,0.1);
	border:0px solid #000;
	border-bottom:2px dashed #333;
	outline: none;
}
	
textarea
{   
	font: bold 20px "typewriter";
	color:#333;
	background:transparent;
	border:1px solid #999;
	width:400px;
	height:200px;
	resize: none;
	font: bold 14px "typewriter";
}
	
textarea:focus 
{ 
    background-color: rgba(0,0,0,0.1);
	border:1px solid #999;
	outline: none;
	font: bold 14px "typewriter";
}

.sub
{   
 	padding:2px;
	margin:0px;
	text-align:center;
	font: bold 20px "typewriter";
	background-color: rgba(255, 255, 255, 0);
	padding:2px 10px 2px 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border:2px solid black;
	color:#333;
	cursor:pointer;
	text-decoration:none;
}