@import url(./style.css);


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

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

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

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

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

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

/* ====== LIGHT MODE ====== */

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

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

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

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

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

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

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

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

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

.confirmer{
	text-align: center;
}

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

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

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

.createAccount{
    font-size: 1em;
}

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

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

    .btn{
		width: 60%;
	}

    .createAccount{
        font-size: 13px;
    }

    .connectAccount{
		font-size: 13px;
	}

}

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

@media (max-width: 480px){

}