@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Love+Ya+Like+A+Sister&display=swap');


#global .smart{display:none;}
#global .notsmart{display:inline-block;}

body {
margin:0;
font-family:arial;
background:#white;
/*background: linear-gradient(-45deg, #403d83, #e94282, #fbba00);
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%;}
}
*/

*{
margin-top:0;
}

html {
height: 100%;
width:100%;
font-size:14px;
text-align:center;
background:white url(/img/grille.png);
background-attachment:fixed;
}

body p a{
color:white;
margin-top:10px;
display:inline-block;

}

#global{
margin:0 auto;
width:80%;
max-width:800px;
text-align:center;
position:relative;
border-radius:0 0 30px 30px;
padding-bottom:30px;
background: linear-gradient(#fbbf00,#ffffff 800px);
}
#header{
position:relative;
margin-bottom:30px;
}
#header h1 a{
color:#ffffff;
font-family:arial;
font-weight:200;
font-size:20px;
text-decoration:none;
}
#header .pigarus1{
position:relative;
margin-top:-10px;
margin-bottom:-10px;
width:80px;
height:auto;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}

.pigarus2{
position:absolute;
bottom:-32px;
left:-40px;
width:128px;
height:auto;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}

.buy-pigarus{
font-family:arial;
font-size:22px;
border:none;
background:#e94282;
cursor:pointer;
border-radius:5px;
margin-bottom:30px;
padding:8px 20px 8px;
font-weight:400;
color:white;
transition:background ease .2s;
text-transform:uppercase;
}
.buy-pigarus:hover{
background:#403d83;
}


.rules{
width:85%;
margin: 0 auto;
background:#403d83;
padding:2.5%;
border-radius:10px;
margin-bottom:30px;
}
.rules h3{
font-weight:800;
color:#fbba00;
text-transform:uppercase;
font-size:2em;
margin:0 0 10px 0;

}
.rules p{
color:white;
margin:0 0 5px 0;
font-size:16px;
font-weight:200;
}
.rules p a{
display:inline;  
color:#e94282;
}
.rules p a:hover{
display:inline;  
color:#fbba00;
}

h2 img{
max-width:70%;
height:auto;
display:block;
margin:20px auto;
}

p{font-size:14px;}
p a{color:#e94282;}

.bloc{
border:1px solid #bbb;
width:80px;
height:80px;
display:inline-block;
color:#000;
text-align:center;
}
.bloc strong{
font-size:42px;
display:block;
color:#e94282;
}



#Prizes{
display:inline-block;
margin-bottom:20px;
}
#Prizes h3{
color:#403d83;
text-transform:uppercase;
font-size:3em;
display:block;
font-weight:800;
}
#Prizes h3 .tiny{
display:block;
font-weight:100;
font-size:24px;
text-transform:none;
}
#Prizes h3 .tiny strong{
color:#e94282;
font-style:italic;	
}
.prize{
display:inline-block;
width:35%;
vertical-align:top;
margin:auto 20px;
text-align:center;
}
.prize img{
width:100%;
height:auto;
}
img.smart{
width:100%;
margin-bottom:10px;
}
#global h3.smart{
margin:-40px 0 0 0;
color:#fbba00;
font-size:96px;
font-weight:800;
}

.prize h4{
color:#e94282;
text-transform:uppercase;
font-size:2em;
line-height:1em;
margin-bottom:5px;
font-weight:400;
}
.prize p{
font-size:14px;
}
.rules strong{
color:#fbba00;
}

#scores{
width:90%;
margin:0 auto;
border-collapse:collapse;
font-family:"Press Start 2P",arial;
}
#scores th{
background:#403d83;
color:white;
font-weight:400;
font-size:1.3em;
padding:10px 0;
border-radius: 10px 10px 0 0;

}
#scores td{
padding:8px 0;
font-size:1.2em;
border-bottom:1px solid #ddd;
text-transform:uppercase;
}

#scores .rank1{background:#e94282;}
#scores .rank2{background:#f2803d;}
#scores .rank3{background:#fbba00;}
/*#scores tr:nth-child(odd) { background: #eee; }*/

#myScore{
width:85%;
margin:0 auto;
background:#403d83;
padding:2.5%;
margin-bottom:30px;
color:white;
border-radius:10px;
}
#myScore h3{
color:#fbba00;
font-size:140%;
margin-bottom:10px;
}

#myScore .error{
font-size:16px;
font-weight:400;
background:#e94282;
text-transform:uppercase;
color:white;
width:auto;
display:inline-block;
padding:4px 16px;
border-radius:6px;
}

#myScore input{
width:40%;
margin:5px 2.5%;
border:none;
padding:8px;
font-size:14px;
border-radius:4px;
transition:background ease 0.8s;
}
input[placeholder]{
font-style:italic;
color:#444
}
input[placeholder]:hover,
input[placeholder]:focus{
background:#ddd;
font-style:normal;
color:black;
}

input[type="submit"]{
background:#fbba00;
color:black;
font-weight:800;
text-transform:uppercase;
cursor:pointer;
transition:background ease 0.8s;
}
input[type="submit"]:hover{
background:#e94282;
color:white;
}

@media screen and (max-width: 960px) {
#global{width:90%;max-width:none;}
}

@media screen and (max-width: 780px) {
#global{width:95%;max-width:none;}
.pigarus2{left:-20px;width:96px;height:auto;}
}

@media screen and (max-width: 580px) {
body{background:none}
body p a{color:#e94282}
#header h1 a{font-size:24px;}
#header h1 img{height:30px;}
#global{width:100%;max-width:none;border-radius:0 0 15px 15px;}
#header .pigarus1{width:64px;margin-top:-40px;margin-bottom:-10px;}
.pigarus2{display:none;}
.prize{margin:auto 10px;}
.prize img{max-width:220px;}
#global .prize h4{border-top:none;font-size:13px;}
#myScore input{width:90%;}
#scores td, #scores th{font-size:14px;padding:4px 0;font-family:arial;font-weight:600;}
#scores th{border-radius: 4px 4px 0 0;}
#global .smart{display:block;}
#global .notsmart{display:none;}
h2 img{max-width:80%;}
#Prizes h3, #Prizes h3 .tiny{font-size:20px}
}