@import "../css/base.css";

:root{
	--delay-anim:0.8s;
	--delay-anim-2:0.6s;
	--background:rgb(240,240,250);
	--input-width:200px;
}

body{
	height: 100vh;
	width: 100vw;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	background: var(--background);
}

h1{
	width: fit-content;
	background:rgba(205, 0, 0, 1);
	text-align: center;
	font-family:renault;
	font-size: 13px;
	margin: 10px auto;
	border-radius:7px;
	color: white;
}

#form-login{
	width: fit-content;
	max-height: 92%;
	background: none;
	text-align: center;
	border-radius: 25px;
	box-shadow: none;
	display: flex;
	flex-direction: column;

	animation-name: fadeIn;
  	animation-iteration-count: 1;
  	animation-timing-function: ease-in;
  	animation-duration: var(--delay-anim);
  	-webkit-animation-name: fadeIn;
  	-webkit-animation-iteration-count: 1;
  	-webkit-animation-timing-function: ease-in;
  	-webkit-animation-duration: var(--delay-anim);
  	-moz-animation-name: fadeIn;
  	-moz-animation-iteration-count: 1;
  	-moz-animation-timing-function: ease-in;
  	-moz-animation-duration: var(--delay-anim);
  	-ms-animation-name: fadeIn;
  	-ms-animation-iteration-count: 1;
  	-ms-animation-timing-function: ease-in;
  	-ms-animation-duration: var(--delay-anim);
  	-o-animation-name: fadeIn;
  	-o-animation-iteration-count: 1;
  	-o-animation-timing-function: ease-in;
  	-o-animation-duration: var(--delay-anim);
}

#logos{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:row;
	margin:3% 0 1% 0;
	opacity:0;
	min-height:80px;
} 

img{
	width:45%;
	margin-bottom:10px;
	margin-top:3px;
}

#logos h2{
	font-family: heavitas;
	font-size: 31px;
	font-weight: bolder;
}

#form-login > input{
	background-color: rgb(210,210,210);
	margin: 1.3% auto;
	text-align: center;
	padding: 5% 10px;
	min-width: var(--input-width);
	outline: none;
	color: black;
	border-radius: 4vh;
	font-size: 14px;
	transition: .25s;
}

.anim2{
	--anim-dur: 0.8s;
	animation-name: fadeIn;
  	animation-iteration-count: 1;
  	animation-timing-function: ease-in;
  	animation-duration: var(--anim-dur);
  	animation-delay: var(--delay-anim-2);
  	animation-fill-mode: forwards;
  	-webkit-animation-name: fadeIn;
  	-webkit-animation-iteration-count: 1;
  	-webkit-animation-timing-function: ease-in;
  	-webkit-animation-duration: var(--anim-dur);
  	-webkit-animation-delay: var(--delay-anim-2);
  	-webkit-animation-fill-mode: forwards;

  	-moz-animation-name: fadeIn;
  	-moz-animation-iteration-count: 1;
  	-moz-animation-timing-function: ease-in;
  	-moz-animation-duration: var(--anim-dur);
  	-moz-animation-delay: var(--delay-anim-2);
  	-moz-animation-fill-mode: forwards;

  	-ms-animation-name: fadeIn;
  	-ms-animation-iteration-count: 1;
  	-ms-animation-timing-function: ease-in;
  	-ms-animation-duration: var(--anim-dur);
  	-ms-animation-delay: var(--delay-anim-2);
  	-ms-animation-fill-mode: forwards;

  	-o-animation-name: fadeIn;
  	-o-animation-iteration-count: 1;
  	-o-animation-timing-function: ease-in;
  	-o-animation-duration: var(--anim-dur);
  	-o-animation-delay: var(--delay-anim-2);
  	-o-animation-fill-mode: forwards;
}

#form-login > input:focus{
	width: 220px;
	border-color: grey;
	background-color: rgb(190,190,190);
	transition: .27s;
	opacity: 1;
}

#form-login button{
	max-width: 150px;
	display: block;
	background: black;
	margin: 25px auto 25px auto;
	text-align: center;
	border: 3px solid black;
	outline: none;
	color: white;
	border-radius: 3000px;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 13px;
	font-family: heavitas;
	padding: 15px 17px 11px 17px;
	opacity: 0;
}

#form-login button:hover{
	background-color: white;
	color: black;
	border: 3px solid grey;
}

#form-login button:disabled,
#form-login button.disabled{
    background: rgb(170,170,170);
    color: rgb(220,220,220); 
    cursor: not-allowed;
    border: 3px solid rgb(170,170,170);
}

#form-login button.disabled:hover{cursor:not-allowed;}
.grey{border: 2px solid rgb(180,180,180);}
.red{border: 2px solid rgb(200,0,0);}
.green{border: 2px solid green;}