body { margin:0; padding:0; font-size:1em; font-family:Roboto, Arial, sans-serif; background:url(motus.jpg); background-size:cover; background-position:center; overflow-x:hidden}
.bg { position:fixed; width:100%; height:100%; box-shadow:inset 0 0 20vw rgba(0,0,0,0.2); box-shadow:inset 0 0 100px rgba(0,0,0,0.8); top:0; background:rgba(0,0,0,0.4); }

a { color : #fff }
a.btn { width:auto; height:34px; box-sizing:border-box; border:1px solid rgba(255,255,255,0.6); font-weight:500; font-size:20px; text-align:center; vertical-align:center; text-transform:uppercase; text-shadow:2px 2px 2px rgba(0,0,0,0.5); background:linear-gradient(to bottom, #2fabf1 3%,#0067bc 100%); color:#fff; box-shadow:inset -2px -2px 2px rgba(0,0,0,0.2); padding:5px; text-decoration:none }
#screens { height:100vh; position:relative; z-index:1 }
#screen-options, #screen-endwin, #screen-endlose, #screen-highscores, #screen-home , #screen-game-complete { text-align:center; color:#fff; padding-top:20px }
#screen-options .content { position:relative; z-index:1 }
#screen-options  .field { margin-bottom:20px; }
#screen-options  select, #screen-highscores  select{ width:200px; margin-top:20px; height:40px; text-align:center; font-weight:700; background:#fff; border:1px solid #fff; color:#333; font-family:Roboto, Arial, sans-serif; }
#screen-options  input{ width:200px; margin-top:20px; height:30px; text-align:center; font-weight:700; font-size:20px; background:#fff; border:1px solid #fff; color:#333; font-family:Roboto, Arial, sans-serif; }
#screen-options  a.btn { width:200px; font-size:1em; display:block; margin:auto; }
#infos { margin-top:5vh; height:10vh }
#infos #logo { width:100%; text-align:center; margin:10px 0; }
#infos #chronoscore { width:150px; margin:auto; }
#infos #chronoscore #chrono { width:100px; height:40px; line-height:40px; float:left; font-size:30px; text-align:center; vertical-align:center; text-transform:uppercase; text-shadow:2px 2px 2px rgba(0,0,0,0.5); background:linear-gradient(to bottom, #2fabf1 3%,#0067bc 100%); color:#fff; box-shadow:inset -2px -2px 2px rgba(0,0,0,0.2); position:relative; z-index:1 }
#infos #chronoscore #score { width:50px; height:50px; line-height:50px; float:right; margin:auto;  margin-top:-5px; font-size:40px; text-align:center; vertical-align:center; text-transform:uppercase; text-shadow:2px 2px 2px rgba(0,0,0,0.5); background:linear-gradient(to bottom, #fff 3%,#ddd 100%); color:#333; box-shadow:inset -2px -2px 2px rgba(0,0,0,0.2); position:relative; left:-5px; z-index:0 }
#screen-game-complete #score { width:100px; height:50px; line-height:50px; margin:0 auto 20px; background:linear-gradient(to bottom, #32b6ff 3%,#1488e1 100%); box-shadow:inset -2px -2px 2px rgba(0,0,0,0.2); text-shadow: 2px 2px 10px rgba(0,0,0,0.5); color:#fff; font-size:32px; font-weight:bold; }
#screen-game-complete #message { width:270px; margin:auto; padding:25px; background:linear-gradient(to bottom, #32b6ff 3%,#1488e1 100%); border:2px solid #fff; }
#grid { height:40vh; display:flex; justify-content:center; margin-bottom:10px; }
#grid table { border-collapse:collapse; border:2px solid #fff; }
#grid tr#try-0 { display:none }
#grid table td { width:34px; height:34px; box-sizing:border-box; border:1px solid rgba(255,255,255,0.6); font-weight:500; font-size:24px; text-align:center; vertical-align:center; text-transform:uppercase; text-shadow:2px 2px 2px rgba(0,0,0,0.5); background:linear-gradient(to bottom, #32b6ff 3%,#1488e1 100%); color:#fff; box-shadow:inset -2px -2px 2px rgba(0,0,0,0.2); }
#grid table td.active { background:linear-gradient(to bottom, #f7990c 3%,#d8600b 100%); }
#grid table td .in { background:#edd652; color:#fff; border-radius:30px; display:block; height:30px; line-height:30px; }
#grid table td .ok { filter:brightness(1); background:linear-gradient(to bottom, #d66c6e 3%,#b43a39 100%); color:#fff; display:block; height:30px; line-height:30px; box-shadow:inset -2px -2px 2px rgba(0,0,0,0.2); }
#grid table tr.anim td .ok { animation-name:anim; animation-duration:1s; animation-iteration-count:3; }
#grid table tr.anim td:nth-child(2) .ok { animation-delay:.1s; } #grid table tr.anim td:nth-child(3) .ok { animation-delay:.2s; } #grid table tr.anim td:nth-child(4) .ok { animation-delay:.3s; } #grid table tr.anim td:nth-child(5) .ok { animation-delay:.4s; } #grid table tr.anim td:nth-child(6) .ok { animation-delay:.5s; } #grid table tr.anim td:nth-child(7) .ok { animation-delay:.6s; } #grid table tr.anim td:nth-child(8) .ok { animation-delay:.8s; } #grid table tr.anim td:nth-child(9) .ok { animation-delay:1s; } #grid table tr.anim td:nth-child(10) .ok { animation-delay:1.2s; }

#nbgrid { height:40vh; display:flex; justify-content:center; margin-bottom:10px; }
#nbgrid table { border-collapse:collapse; border:2px solid #fff; }
#nbgrid table td { width:54px; height:44px; padding:5px; box-sizing:border-box; border:1px solid rgba(255,255,255,0.6); font-family:Arial; font-weight:700; font-size:24px; text-align:center; vertical-align:center; text-transform:uppercase; background:linear-gradient(to bottom, #32b6ff 3%,#1488e1 100%); color:#fff; box-shadow:inset -2px -2px 2px rgba(0,0,0,0.2); letter-spacing:-1px }
#nbgrid table td span { background:#fbda0f; color:#000; border-radius:30px; width:30px; height:30px; line-height:30px; display:block; box-shadow:0 0 15px rgba(0,0,0,.8); font-family:Arial; margin:auto; }
#nbgrid table td span.hidden { display:none }
#nbgrid table td .ok { color:transparent; background:radial-gradient(ellipse at center, #f7e4af 0%,#f1a910 100%); }
#nbgrid table td .motus { color:#fff; background:radial-gradient(ellipse at center, #d66c6e 0%,#b43a39 100%); }

#nbgridballs { width:200px; height:200px; margin-bottom:10px; padding:25px; border:2px solid #fff; margin:auto; background:linear-gradient(to bottom, #32b6ff 3%,#1488e1 100%); display:none }
#nbgridballs .ball { width:200px; height:200px; line-height:200px; margin:auto; font-size:150px; font-weight:bold; background:radial-gradient(ellipse at center, #f7e4af 0%,#f1a910 100%); border-radius:100px; color:#000; text-align:center; display:none; box-shadow:0 0 20px rgba(0,0,0,0.5) }
#nbgridballs .ball.black { background:radial-gradient(ellipse at center, #222 0%,#000 100%); }
#nbgridballs .ball.active { display:block; }

#keyboard { height:180px; position:fixed; bottom:0; filter:grayscale(0%); opcaity:1; transition:all ease 0.5s }
#keyboard ul { margin:0; padding:0; list-style:none; width:100%; float:left; display:flex; flex-wrap:wrap; justify-content:center }
#keyboard ul li { display:flex; flex:0 1 auto; text-align:center; }
#keyboard ul a { width:calc(100vw / 10 - 4px); box-sizing:border-box; height:50px; line-height:calc(50px - 16px); font-weight:500; font-size:20px; display:block; padding:8px 4px; margin:2px; border:1px solid rgba(255,255,255,0.6); text-transform:uppercase;background:linear-gradient(to bottom, #2fabf1 3%,#0067bc 100%);box-shadow:inset -2px -2px 2px rgba(0,0,0,0.2);  color:#fff; text-decoration:none; text-align:center; }
#keyboard ul a:active { background:linear-gradient(to bottom, #f7990c 3%,#d8600b 100%); }
#keyboard ul:last-child li:first-child a, #keyboard ul:last-child li:last-child a { background:linear-gradient(to bottom, #f7990c 3%,#d8600b 100%); width:calc(100vw / 5 - 4px); }

#keyboard.disabled { filter:grayscale(100%); opacity:0.75 }

audio { position:absolute; left:-999px; }

#screen-highscores table { width:350px; margin:auto; }

@keyframes anim {
    0% { filter:brightness(1) } 50% { filter:brightness(1.4) } 100% { filter:brightness(1) }
}

@media(min-width:800px) {
	#keyboard ul a { width:calc(100vw / 10 - 10px); }
}