@font-face { font-family:'eitfont'; src:url('/fonts/Folks-Light.ttf'); }
@font-face { font-family:'eitfont'; src:url('/fonts/Folks-Bold.ttf'); font-weight:bold; }

html { margin:0; padding:0; width:100vw; height:100vh; font-family:eitfont; }
body { margin:0; padding:0; width:100vw; height:100vh; background:url('/images/login_background.jpg') center/cover no-repeat fixed; display:flex; align-items:center; justify-content:center; }

.centerpage { width:100%; padding:20px; }
.container { display:flex; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:15px; overflow:hidden; box-shadow:0 15px 35px rgba(0,0,0,0.3); background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); max-width:900px; margin-left:auto;margin-right:auto; }

.leftlogin { width:40%; background:rgba(0,0,0,0.6); color:#ffffff; padding:40px 20px; text-align:center; display:flex; flex-direction:column; justify-content:center; }
.leftlogin img { width:70%; max-width:180px; margin:0 auto 20px auto; filter:drop-shadow(0px 4px 6px rgba(0,0,0,0.4)); }

.rightlogin { width:60%; padding:40px 30px; backdrop-filter:blur(5px); }
.titre { font-size:1.8em; margin-bottom:30px; font-weight:bold; color:#800000; }

input[type=text], input[type=password] { border:1px solid rgba(128,128,128,0.5); border-radius:8px; width:100%; padding:10px; font-size:1em; background:rgba(255,255,255,0.9); transition:0.3s; }
input[type=text]:focus, input[type=password]:focus { outline:none; border:1px solid #800000; background:#ffffff; }

fieldset { border:1px solid rgba(128,128,128,0.5); padding:10px 15px 15px 15px; border-radius:10px; margin-bottom:15px; transition:0.3s; background:rgba(255,255,255,0.6); }
legend { padding:0 10px; font-size:0.9em; color:#555; background:rgba(255,255,255,0.9); border-radius:5px; border:1px solid rgba(128,128,128,0.5); }
fieldset:focus-within { border-color:#800000; background:rgba(255,255,255,0.9); }
fieldset:focus-within legend { border-color:#800000; background:#800000; color:#ffffff; }

.logbutton { text-align:right; margin-top:20px; }
.logbutton input[type=submit] { background:#800000; color:#ffffff; border:0; padding:12px 25px; border-radius:30px; font-weight:bold; cursor:pointer; font-size:1em; letter-spacing:0.5px; transition:0.25s; box-shadow:0 5px 10px rgba(0,0,0,0.2); }
.logbutton input[type=submit]:hover { background:#a00000; transform:translateY(-1px); box-shadow:0 8px 15px rgba(0,0,0,0.25); }

a { text-decoration:none; color:#800000; font-weight:bold; }
a:hover { color:#a00000; }

strong { color:#800000; }

.forgotpwd { margin:10px 0; }

/* ------------------ MOBILE ------------------ */

@media screen and (max-width:900px) {

	* { box-sizing:border-box; }

	.container{flex-direction:column;width:90vw;padding:0;}

	.leftlogin { width:100%; padding:30px 10px; }
	.leftlogin img { width:45%; max-width:150px; margin:0 auto; }

	.rightlogin { width:100%; padding:30px 15px; }

	fieldset { width:100%; padding:8px 10px 12px 10px; margin:0 0 15px 0; }

	input[type=text], input[type=password] {		width:100%;		max-width:100%;		font-size:4.5vw;		padding:10px;	}

	.logbutton { text-align:center; margin-top:20px; }
	.logbutton input[type=submit] {		width:100%;		max-width:100%;		font-size:5vw;		padding:15px;		border-radius:25px;	}

	.titre { display:none; }
}