body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.navigation, header{
  border-bottom: 1px solid #e7e7e7;
  display:flex;
  height: 4rem;
  background-color:#F8F8F8;
}

.header{
  display:flex;
  align-items:center;
  width:100%;
  font-size:2rem;
  justify-content:center;
}

.icons{
  display:flex;
  justify-content: space-around;
  align-items:center;
  width:15%;
}


.header_icons{
  padding:10px;
  border:none;
  background-color:inherit;
  cursor:pointer;
}

#block{
  width:15%;
}



#footer{
  position: relative;
  display:flex;
  font-size: 12px;
  justify-content:center;
  align-items:center;
  height:3rem;
  border-top: 1px solid #e7e7e7;
  bottom: 0px;
}

.button{
  width: 100%;
  text-align: center;
  margin-top:20px;
  margin-bottom: 40px;

}

#restart{ /* the start over button*/
  background-color:	#8fbc8f;
  color:white;
  border-color: 1px solid gray;
  padding: 10px 30px;
  border-radius:5px;
}


.dark-mode{
  background-color: #28282B;
  color:white !important;
  border-color:#fff !important;
}


#gameboard {
  width: 280px;
  height: 280px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-top: 40px;
}

.box{ /* these are the content inside each box*/
  width: 65px;
  height: 65px;
  border: 0.5px solid black;
  margin: 2px; 
  text-transform: uppercase;
  font-size: 45px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.web_container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  
}

.winner_gif, .noboard{
  width:0px;
  height:0px;
  font-size: 0px;
  visibility: hidden;
  
}

.gif_div{
  display: flex;
  justify-content: center;
  height: inherit;
}

.winner_gifpopup{
  width:500px;
  height:500px;
  visibility: visible !important;
  
}

/* INFORMATION*/
.column1{
  width: 100%;
  height: 100%;
}

.column1_half{
  width: 50%;
  height:100%;
  border-right: 1px solid #e7e7e7;
  
}

.column2_half{
  width: 49% !important;
  height: 100%;
  visibility: visible !important;
  font-size: 15px !important;

}

.column2{
  width:0%;
  font-size: 0px; 
  visibility: hidden;
 
}

h3{
  text-align: center;
}


.message_hint{
  background-color: #FBCEB1;
  height: 60px;
  width: 100%;
  margin-top: 165px;
  bottom:0px;
  visibility: hidden;
}

.lose_msg{
  position: absolute;
  background-color: #FA5F55;
  height: 60px;
  width: 99%;
  bottom:45px;
  visibility: hidden;
}

.win_msg{
  position: absolute;
  background-color: rgb(143, 177, 206);
  height: 60px;
  width: 99%;
  bottom: 45px;
  visibility: hidden;
  top: 4.5rem;
}

.winner_popup, .loser_popup, .message_visible{
  visibility: visible !important;
  display: flex;
  justify-content: center;
  align-items: center;
  
}


.greenBox{
  background-color: #03C03C;
  color: white;
  border-color: white;
}

.yellowBox{
  color: white;
  border-color: white;
  background-color: #FDDA0D;
}

.grayBox{
  background-color: #A9A9A9;
  color: white;
  border-color: white;

}