/* Font */
@font-face {
    	font-family: 'robotoregular';
    	src: url('../font/roboto/roboto-regular-webfont.woff2') format('woff2'),
         url('../font/roboto/roboto-regular-webfont.woff') format('woff');
    	font-weight: normal;
    	font-style: normal;
	font-size:80%;

}
*{
	margin:0; 
	padding:0;
	font-family:"robotoregular";
	background-size:cover;
	color:#3f3f3f;
	text-decoration:none;	
	}
body{
	background-image:url("../img/back.jpg");
	background-attachment:fixed;
}
.top{
	background-color:rgba(255,255,255,0.6);
	height:75px;
	margin-bottom:2%;
	padding-bottom:10px;
	padding-top:5px;
	text-align:center;
	vertical-align: middle;
	display:flex;
	justify-content:center;
	gap: 10%;
	position: relative;
}
.titlebloc{
	display:inline-block;
}
h1{
	text-transform:uppercase;
	font-size:140%;
	color:#3f3f3f;
	position:absolute;
	right:60%;
}
h2{
	text-transform:uppercase;
	margin-bottom:2%;
	font-size:100%;
}
h3{
	font-size:90%;
}
h1::first-letter, h2::first-letter, h3::first-letter{
	color:#3f3f3f;
	
}
 .shary::first-letter{ 
	color:#3f3f3f; 
	font-size:250%;
}
/* Header */
.logo{
	display:inline-block;
}

.logo img{
	max-height:40px;
	position: absolute;
	bottom: 0;

}
/* ### */
.main{
	background-color:rgba(255,255,255,0.8);
	overflow:hidden;
	text-align:center;
	max-width:40%;
	margin-left:auto;
	margin-right:auto;
	padding-bottom : 1.5%;
	border-bottom: solid 6px #b30000;
}
.separator{
	width:50%;
	border-top:solid 1px black;
	margin-left:auto;
	margin-right:auto;
	margin-top:3%;
	margin-bottom:3%;
}	
.input {
	font-family: Verdana, Geneva, sans-serif;
	background-color:white;
	border:1px solid white;
	border-radius:4px;
	padding:1%;
	margin:1%;
	width:70%;
	text-align : center;
}
.input:hover{
	background-color:rgba(255,255,255,0.6);
}
.submit{
	color:white;
	background-color: #b30000;
	min-width:20%;
	font-weight:bold;
	border:none;
	cursor: pointer;
}
.submit:hover{
	background-color:black;
}
/* Footer */
i {
    cursor: pointer;
	color:#3f2f29;
}