@import url(./style.css);

/* ====== DARK MODE ====== */

body.dark-mode h1{
	color : var(--main-dark-text-color);
}

body.dark-mode p{
	color : var(--main-dark-text-color);
}

body.dark-mode .login{
	background: var(--main-dark-other-color);
}

body.dark-mode .createAccount{
	color : var(--main-dark-text-color);
}

body.dark-mode a{
	color: var(--main-dark-text-color);
}

body.dark-mode .buttonSudmite{
	background: var(--main-dark-gradient); 
	color: var(--main-dark-text-color);
}

/* ====== LIGHT MODE ====== */
body.light-mode h1{
	color : var(--main-light-text-color);
}

body.light-mode p{
	color : var(--main-light-text-color);
}

body.light-mode .login{
	background: var(--main-light-other-color);
}

body.light-mode .createAccount{
	background: var(--main-light-other-color);
}

body.light-mode .buttonSubmit{
	background: var(--main-light-gradirent); 
	color: var(--main-light-text-color);
}

body.light-mode a{
	color: var(--main-light-text-color);
}


/* ====== ECRAN DEFAULT ====== */

.buttonSubmitDiv{
	text-align: center;
}

h1{
	font-family: "Lemon", serif;
	text-align: center;
	font-size: 32px;
	margin-top: 10%;
}

p{
	margin-top: 6%;
	margin-bottom: 2%;
	font-size: 20px;
	font-family: "Lemon", serif;
}

.login{
	width: 35vw;
	margin-left: 30.5vw;
	margin-top: 3vh;
	border-radius: 25px;
	padding: 2vw;
}

.createAccount{
	margin-top: 5%;
	margin-bottom: 5%;
	font-size: 1em;
	text-align: center;
	padding-top: 1%;
	font-family: "Lemon", serif;
}

.buttonSudmite{
	font-family: "Lemon", serif;
	border: none;
	padding: 2%;
	border-radius: 25px;
	width: 50%;
	font-size: 1.25em;
}

.connexion{
	width:94%;
	height: 40px;
	padding-left: 3%;
	margin-left: 1%;
	margin-top: -1%;
	border-radius: 25px;
	border: none;
	font-size: 15px;
}

/* ====== ECRAN TABLETTE ====== */

@media (max-width: 834px){
    .login{
		width: 50vw;
		margin-left: 22vw;
		margin-top: 9vh;
		padding: 3vh;
		padding-bottom: 5vh;
	}

	.createAccount{
		font-size: 13px;
	}

	.buttonSudmite{
		width: 60%;
	}
}

/* ====== ECRAN TELEPHONE====== */

@media (max-width: 480px){

}