html {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-collapse: collapse;
}

body {
	color: #5C6E6F;
	background-color: #e4f4f5;
	font-family: Arial, Helvetica, sans-serif;
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-collapse: collapse;
}

a {
	color: #5C6E6F;
}
a:hover {
	color: #5C6E6F;
}

#logo {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 40px;
}

#back {
	position: absolute;
	top: 14px;
	left: 55px;
	text-decoration: none;
	font-weight: bold;
}

#main {
	text-align: center;
}

#auth {
	margin-top: 50px;
	background-color: #BADEE0;
	width: 65%;
	margin-left: auto;
	margin-right: auto;
	padding: 30px;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset;
	border-radius: 8px;
}

.title {
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	padding-bottom: 20px;
	font-size: 140%;
	font-weight: bold;
}

#nomUser {
	/* background-color: rgb(37, 96, 100); */
	/* color: rgb(255, 165, 0); */
	font-weight: bold;
}

#error {
	display: inline-block;
	margin-top: 15px;
	color: red;
	font-weight: bold;
}

#success {
	display: inline-block;
	margin-top: 15px;
	color: green;
	font-weight: bold;
}

div#creerCompte {
	margin-top: 25px;
	background-color: #E4F4F5;
	width: 65%;
	margin-left: auto;
	margin-right: auto;
	padding: 30px;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset;
	border-radius: 8px;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=date],
input[type=password],
select,
textarea {
	font-family: Arial;
	margin: 10px;
	padding: 10px;
	color: #5C6E6F;
	text-align: left;
	background-color: #E4F4F5;
	font-size: 105%;
	border-width: 1px;
	border-color: #9AB8BA;
	border-style: solid;
	border-radius: 6px;
	outline: none;
}

textarea {
	width: 373px;
}

input[type=submit],
#boutonCreerCompte {
	margin-top: 25px;
	padding: 10px;
	color: #5C6E6F;
	background-color: #E4F4F5;
	text-align: left;
	font-size: 110%;
	border-width: 1px;
	border-color: #9AB8BA;
	border-style: solid;
	text-align: center;
	cursor: pointer;
	border-radius: 6px;
}

#boutonCreerCompte {
	display: inline-block;
	background-color: #BADEE0;
	text-decoration: none;
}

input::placeholder, textarea::placeholder {
	color: rgba(0, 0, 0, 0.25);
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=date]:focus,
input[type=password]:focus,
select:focus,
textarea:focus,
#boutonCreerCompte:hover,
input[type=submit]:hover {
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset;
}

@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
    }

    #auth, #creerCompte {
        width: 86%;
        padding: 20px;
		margin-left: 2%;
    }

    input[type=text],
    input[type=email],
    input[type=tel],
    input[type=password],
    select,
	textarea {
        width: 80%;
    }

    input[type=submit],
    #boutonCreerCompte {
        width: 80%;
        text-align: center;
    }
}