@import 'https://fonts.googleapis.com/css?family=Architects+Daughter';
body{
  background-image: url(img/1.jpg);
  background-size: cover;

  font-family: 'Architects Daughter', cursive;
}
button{
    padding:0;
}
.game{
  width:350px;
  height:350px;
  background-color:#fff;
  margin:50px auto;
  padding:40px 25px;
  box-shadow:2px 3px 5px 4px #333;
  border-radius:10px;
}
.content{
  width:318px;
  height:318px;
  padding:16px;
  background-image:radial-gradient(#234635,#101c1c);
}
.chess{
  font-size:0;
  padding:0;
  margin:0;
  list-style:none;
}
.chess li{
  box-sizing:border-box;
  display:inline-block;
  width:104px;
  height:104px;
  padding:0;
  margin:0;
  font-size:10px;
  line-height:104px;
  vertical-align:middle;
  text-align:center;
  font-size:90px;
  color:white;
  font-family: 'Architects Daughter', cursive;
}
.chess .invisible{
  font-size:0;
}
.chess li:nth-child(3n+2),.chess li:nth-child(3n+3){
  border-left:3px solid white;
}
.chess li:nth-child(n+4){
  border-top:3px solid white;
}
.hide{
  display:none;
}
.title{
  text-align:center;
  color:#fff;
  font-size:40px;
  line-height:70px;
  
}
.first-screen{
  text-align:center;
}
.first-screen button{
 
  background:none;
  border-radius:10px;
  color:#ccc;
  font-size:25px;
  border:none;
  width:45%;
  height:50px;
  outline:none;

}
.first-screen button:hover{
  border:2px dashed #fff;
}

#game{
  display:none;
}
.choose{
  text-align:center;
  color:#fff;
  font-size:32px; 
  display:none;
}
.choose button,.reset{
  background:none;
  border-radius:10px;
  color:#ccc;
  font-size:50px;
  border:none;
  width:70px;
  height:75px;
  outline:none;
}
.choose button:hover{
  border:2px dashed #fff;
}
.choose button:last-child{
  font-weight:bold;
  width:40%;
  font-size:35px;
}
.reset{
  position:absolute;
  font-size:20px;
  width:100px;
  height:35px;
  margin-top:-53px;
  margin-left:240px;
  color:#111;
}
.reset:hover{
  border:2px dashed #000;
}
.scoreboard{
  position:absolute;
  margin-top:-50px;

}
.board{
  display:none;
}
.scoreboard+.scoreboard{
  margin-left:79px;
  border-left:2px solid #555;
  
}
.scoreboard p{
  margin:0;
  padding:0;
  padding-left:15px;
  font-size:15px;
  line-height:15px;
}
.block{
  position:absolute;
  width:350px;
  height:350px;
  background-color:rgba(0,0,0,0.7);
  color:#fff;
  text-align:center;
  font-size:30px;
  line-height:350px;
  display:none;
}
.chess .lined{
  background-color:#000;
  color:#00c8c8;
}
@media (max-width: 400px) { 
  .content{
    padding-left:0px;
    padding-right:0px;
  }
  .content{
    margin:0 auto;
  }
  .game{
    padding-left:0px;
    padding-right:0px;
    width:318px;
  }
  .reset{
    margin-left:210px;
  }
 }