*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{background:#202020;color:#eee;height:100%;font-family:"Lobster",cursive}main{width:100%;height:100vh}main nav{float:left;width:30%;height:100%;padding:0 1.5rem}main nav header{height:18vh;margin-top:2vh}main nav header h1,main nav header h2{padding-left:.5rem;letter-spacing:2px}main nav header h1{color:#ff4500;font-size:4rem;text-transform:uppercase}main nav header h2{font-size:1rem;padding-bottom:1rem;border-bottom:1px dotted #eee}main nav #configurations{height:60vh;position:relative}main nav #configurations h3{text-align:center;padding:1rem 0}main nav #configurations .top10{padding:.5rem 1rem;height:2rem;border-bottom:1px solid rgba(255,255,255,.1)}main nav #configurations #user-options{padding:2rem;width:100%;position:absolute;top:0;left:0;height:60vh;background:#202020;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}main nav #configurations #user-options .opt{padding:1rem;font-size:2rem;color:#ff4500}main nav #configurations #user-options input,main nav #configurations #user-options button{margin:1rem auto;width:80%;padding:.5rem 1rem;border:1px solid #eee;background:#202020;border-radius:.5rem;font-size:1rem;color:#eee;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:"Lobster",cursive}main nav #configurations #user-options input:focus{background:rgba(238,238,238,.1);outline:none}main nav #configurations #user-options button:hover{background:#eee;color:#111;outline:none}main nav #configurations #user-options button:focus{outline:none}main nav #options{height:20vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}main nav #options #to-leaderboard,main nav #options #to-options{float:left;height:2rem;border:1px solid #eee;padding:1rem 2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}main nav #options #to-leaderboard{border-radius:.5rem 0 0 .5rem}main nav #options #to-options{border-radius:0 .5rem .5rem 0}main section{float:left;width:70%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}main section #board{width:80vh;height:80vh;border:2px solid #eee;position:relative}main section #board #fields{width:100%;height:100%}main section #board #stats{height:2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;top:-2rem;left:0}main section #board #stats p{display:inline;color:#ff4500}main section #board #stats #name{padding-right:1rem}main section #board #stats #result{padding-left:1rem}main section #board #end{width:100%;height:100%;background:rgba(32,32,32,.9);position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);font-size:2rem;padding:1rem 0;border-radius:1rem;font-family:"Lobster",cursive;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}main section #board #end p{text-align:center}main section #board #end #end-result{margin:1rem auto;text-align:center;color:#ff4500;font-size:1.5rem}main section #board #end #save-result,main section #board #end #restart{margin:1rem;padding:.5rem 1rem;border:1px solid #eee;background:#202020;border-radius:.5rem;font-size:1rem;color:#eee;-webkit-transition:all .2s ease;transition:all .2s ease}main section #board #end #save-result:hover,main section #board #end #restart:hover{background:#eee;color:#111;outline:none;cursor:pointer}main section #board #end #save-result:focus,main section #board #end #restart:focus{outline:none}main section #board #count{font-size:3rem;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.checked{background-color:#ff4500}.fruit{background-color:#d3d3d3}