/* ************************************************************************** */
/*                                                                            */
/*                                                        :::      ::::::::   */
/*   loginPage.css                                      :+:      :+:    :+:   */
/*                                                    +:+ +:+         +:+     */
/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
/*                                                +#+#+#+#+#+   +#+           */
/*   Created: 2024/08/07 17:15:28 by edbernar          #+#    #+#             */
/*   Updated: 2024/08/26 11:04:43 by edbernar         ###   ########.fr       */
/*                                                                            */
/* ************************************************************************** */

@keyframes anim1 {
	0% {
		transform: translate(0, -150%);
	}
	100% {
		transform: translateY(0, 0);
	}
}

@keyframes anim2 {
	0% {
		backdrop-filter: blur(0px);
		background-color: rgba(0, 0, 0, 0);
	}
	100% {
		backdrop-filter: blur(5px);
		background-color: rgba(0, 0, 0, 0.8);
	}
}

#mainText{
	color: white;
	font-size: 50px;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	margin-top: 125px;
	margin-bottom: 50px;
	align-content: center;
	text-align: center;
}

#inputLogin{
	margin-top: 2px;
	margin-bottom: 15px;
	padding-left: 3%;
	padding-right: 3%;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	border: none;
	text-decoration: none;
	height: 45px;
	width: 94%;
}

#inputPassword{
	margin-top: 2px;
	margin-bottom: 25px;
	padding-left: 3%;
	padding-right: 3%;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	border: none;
	text-decoration: none;
	height: 45px;
	width: 94%;
}

#styleButton{
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-style: normal;
	height: 45px;
	width: 100%;
	border: none;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

#styleButton:hover{
	background-color: #b4b4b4;
}

#styleButton42{
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-style: normal;
	height: 45px;
	width: 100%;
	border: none;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

#styleButton42:hover{
	background-color: #b4b4b4;
}

#createAccText{
	margin-left: 10px;
	cursor: pointer;
	border-bottom: white 1px solid;
	transition: color 0.3s ease;

}

#createAccText:hover{
	color: rgb(165, 165, 165);
}

#orText{
	align-content: center;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
}

#newAccDiv{
	display: flex;
	flex-direction: row;
	margin-top: 15px;
	margin-bottom: 15px;
	justify-content: center;
}

#loginDiv {
	inset: 0;
	padding-block: 7rem;
	display: flex;
	position: absolute;
	z-index: 500;
	animation: anim1 0.4s;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
	justify-content: center;
}

#globalBg {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	position: absolute;
	z-index: 499;
	top: 0;
	left: 0;
	backdrop-filter: blur(5px);
	animation: anim2 0.5s;
}




#threeDiv {
	width: 20%;
	height: 100%;
	background-color: white;
}




#connectDiv {
	width: 45%;
	height: 100%;
	background-color: #020202;
	display: flex;
	flex-direction: column;
}

#connectDiv #divCenter {
	width: 45%;
	height: 50%;
	margin-left: 27.5%;
}

#connectDiv form {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

#connectDiv form p{
	color: white;
}

#connectDiv #button {
	width: 20%;
	height: 20px;
	margin: 10px;
	cursor: pointer;
	background-color: white;
	text-align: center;
}