@import url(./style.css);

/* ====== DARK MODE ====== */
body.dark-mode h1{
	color : white;
	font-family: "Lemon", serif;
	text-align: center;
	font-size: 35px;
	margin-top: 10%;
}

body.dark-mode p{
	margin-top: 6%;
	margin-bottom: 2%;
	color : white;
	font-size: 20px;
	font-family: "Lemon", serif;
}


body.dark-mode .buttonSudmite{
	background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
	font-family: "Lemon", serif;
	border: none;
	color: white;
	padding: 5%;
	border-radius: 25px;
	width: 75%;
	font-size: 20px;
}

body.dark-mode .createQuote{
	margin-top: 5%;
	margin-bottom: 5%;
	font-size: 15px;
	text-align: center;
	padding-top: 1%;
	color: white;
	font-family: "Lemon", serif;
}

body.dark-mode .login{
	background-color: black;
	width: 30%;
	margin-left: 35%;
	margin-top: 9%;
	border-radius: 25px;
	padding-top: 1px;
	padding-bottom: 1%;
	border: 2px solid transparent;
}

body.dark-mode .imgModify{
	width: 3%;
	margin-left: 5%;
	margin-top: 5%;
	filter: invert(100%) brightness(1000%) contrast(1000%);
}


body.dark-mode .infoProfil > input {
	width:90%;
	height: 40px;
	padding-left: 3%;
	margin-left: 1%;
	margin-top: -1%;
	border-radius: 25px;
	border: none;
	font-size: 15px;
	font-family: "Lemon", serif;
	
}


body.dark-mode .inputPasswd{
	font-family: "Lemon", serif;
	margin-top: 40%;
	color: black;
}

body.dark-mode .saveButtonPasswd {
	background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
	font-family: "Lemon", serif;
	border: none;
	color: white;
	padding: 1%;
	border-radius: 25px;
	width: 55%;
	font-size: 15px;
	margin-top: 5%;
}



/* ====== LIGHT MODE ====== */
body.light-mode h1{
	color : black;
	font-family: "Lemon", serif;
	text-align: center;
	font-size: 35px;
	margin-top: 10%;
}
body.light-mode p{
	margin-top: 6%;
	margin-bottom: 2%;
	color : black;
	font-size: 20px;
	font-family: "Lemon", serif;
}


body.light-mode .buttonSudmite{
	background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); 
	font-family: "Lemon", serif;
	border: none;
	color: black;
	padding: 5%;
	border-radius: 25px;
	width: 75%;
	font-size: 20px;
}



body.light-mode .createQuote{
	margin-top: 5%;
	margin-bottom: 5%;
	font-size: 15px;
	text-align: center;
	padding-top: 1%;
	color: black;
	font-family: "Lemon", serif;
}

body.light-mode .login{
	background-color: white;
	width: 30%;
	margin-left: 35%;
	margin-top: 9%;
	border-radius: 25px;
	padding-top: 1px;
	padding-bottom: 1%;
	border: 2px solid black;
}

body.light-mode .imgModify{
	width: 3%;
	margin-left: 5%;
	margin-top: 5%;
}


body.light-mode .infoProfil > input {
	width:90%;
	height: 40px;
	padding-left: 3%;
	margin-left: 1%;
	margin-top: -1%;
	border-radius: 25px;
	border: 1px solid black;
	background-color: #fff1f1;
	font-size: 15px;
	font-family: "Lemon", serif;
	color :  black;
}


body.light-mode .inputPasswd{
	font-family: "Lemon", serif;
	margin-top: 40%;
	color: black;
}

body.light-mode .saveButtonPasswd {
	background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); 
	font-family: "Lemon", serif;
	border: none;
	color: black;
	padding: 1%;
	border-radius: 25px;
	width: 55%;
	font-size: 15px;
	margin-top: 5%;
}


/* ====== OTHER ====== */
.buttonSudmiteDiv{
	text-align: center;
}

.changeValue{
	color: red;
}


.imageProfil{
	width: 25%;
	border-radius: 25px;
	display:block;
	margin-left: 38%;
	margin-top: 5%;
}

.infoProfil{
	margin-left: 10%;
	text-align: center;
	font-size: 120%;
}


.languageDiv{
	margin-left: 25%;
}
.languageTitle{
	text-align: left;
	font-size: 100%;
}
.languageImage{
	width: 300px;
	height: 40px;
	margin-left: 25%;
	display:block;
}