@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;800&display=swap');


body {
margin:0;
font-family:'Quicksand',arial;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}


html {height: 100%;}

h1{color:#31a4ba}
h2{color:#666}
p{color:#333;}
a{color:#403d83;}
a:hover{color:#999;}

#Global{margin-top:40px;}

#LogBoxMaster{
background:white;
width:30%;
min-width:480px;
padding:0 30px 30px 30px;
margin:auto;
/*box-shadow: 0px 8px 14px 2px rgba(0, 0, 0, 0.3);*/
border-radius:20px;
text-align:center;  
margin-bottom:20px;  
}

.loginf{
text-align:center;
color:#000;
font-size:14px;    
} 
.loginf a{
text-align:center;
color:#fff;
} 
.loginf a:hover{
color:#000;
}
  
@media screen and (max-width: 640px) {
/*2 par ligne*/
#LogBoxMaster{
float:left;
width:60%;
min-width:auto;
margin:0 10%;    
padding:10%;
}
}

#LogBoxMaster span{
color:#31a4ba;
font-size:18px;
text-transform:uppercase;
font-weight:bold;
}
#LogBoxMaster .comlogo{
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
}
#LogBoxMaster .comlogo img{
width:100%;
height:auto;
margin:10px 0; 
max-width:400px; 
}

#LogBoxMaster .error{
color:red;
text-align:center;
font-size:18px;
}

#LogBox{
clear:left;
margin-top:10px;
margin:auto;
}

#LogBox input{
width: 99%;
padding:5px 0 5px 5px;
border:none;
text-align:center;
font-size:16px;
border:1px solid #ddd;
cursor:pointer;
border-radius:5px;
}

#LogBox input:focus{
background:#eee;
}

#LogBox form{
text-align:center;
}

#LogBox .submit{
margin-top:10px;
width:auto;
height:30px;
font-size:16px;
width:50%;
border:1px solid #ddd;
color:#666;
padding:0 10px;  
border-radius:5px;
cursor:pointer;
}
#LogBox .submit:hover{
background:#403d83;
border:1px solid #403d83;
color:white;
}