body {
  background-color:#000;
  font-family: Exo\ 2,Helvetica Neue,Helvetica,Arial,sans-serif;
	height:100%
}

html, body {
    height: 100%;
}

.board {
  padding: 3rem 1.5rem;
  text-align: center;
}

#mainBoard{
	border:1px solid #393939;
}



.navbar{
	background-color:#375a7f;
	height:60px;
	margin-bottom:41px;
}

.btn:focus {
  outline: none;
  box-shadow: none;
}

.board-container{
	display:flex;
	align-items:center;
}
.blockfishBoard{
	border:1px solid #393939;
	background-color:#261d02;
}

.blockfish-section{

position: relative;

padding-left:40px;
padding-right:40px;

height:483px;
}

.bf-wrapper{
	background-color:#44444470;
	border-radius:10px;
	width:100%;
	height:100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tetris-section{
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
position: relative;
height:600px;
	padding-left:79px;
}

.bf-title{
color:white;
position: absolute;
top: 10px;
left: 31%;
}

#pieceQueue{
position:absolute;
right:0px;
top:60px;
}

.board-row{
display:flex;
justify-content:center;
	align-items:center;
}

#back-page-button{
	width:50px;
	height:50px;
	position:absolute;
	left:79px;
	bottom:0px;
}

#next-page-button{
	width:50px;
	height:50px;
	position:absolute;
	right:129px;
	bottom:0px;
}

canvas {
  /* all four are needed to support the most browsers */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* optional: can also be applied to `img` tags */