html,body{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;

  font-weight: 100;
  font-family: Helvetica, Arial, sans-serif;
  
  background-color:#F1F3F2;
}

h1{
  font-weight:100;
}

h2{
  font-weight:100;
  color:grey;
}

*{
  box-sizing: border-box;
}

#holder{
  background-color:grey;
  line-height:0;
}

.gridBlock{
  position:relative;
  background-color:white;
  border:2px solid #F1F3F2;
  display: inline-block;
}

.gridBlock::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-right:1px solid rgba(121,121,121,0.15);
  border-bottom:1px solid rgba(121,121,121,0.15);
}

.selected{
  background-color:greenyellow;
}

.blocked{
  background-color:red !important;
}

#holder.hideGrid .gridBlock{
  border:none;
}

.dimension{
  padding:8px;
  font-size:14px;
  width:40px;
  text-align: center;
  border:none;
  border-right:1px solid rgba(121,121,121,0.2);
  border-bottom:1px solid rgba(121,121,121,0.2);
}

#siteContainer{
  padding:20px;
  padding-top:0;
}

#siteContainer,#holder,#highscores{
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

#holder{
  margin-bottom:10px;
}

#yourScore{
  margin-top:10px;
  font-size:24px;
  margin-bottom:10px;
}

#rules{
  text-align: left;
  margin-left:auto;
  margin-right: auto;
  width:550px;
}

#highscores td,th{
  padding:10px;
  background-color:grey;
  color:white;
}

#highscores th{
  background-color:#4B4B4B;
  font-weight:100;
}

#scoreDetails{
  white-space:pre-wrap;
  margin-bottom:10px;
  color:grey;
}

#controls{
  margin-bottom:40px;
}

#squareGridHolder{
  margin-top:-10px;
  margin-bottom:5px;
}

.hide{
  display:none;
}

#links{
  position:fixed;
  top:10px;
  left:10px;
  font-size:20px;
}

#links .fa{
  margin-right:5px;
  vertical-align:middle;
}

#links .linkText{
  position:relative;
  top:1px;
  vertical-align:middle;
}

#links a{
  display:block;
  text-decoration:none;
  color:#6CC3FF;
  transition: 0.3s all;
}

#links a:hover{
  color:#447BA1;
}