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


:root{
  --default: #121213;
  --empty:#3a3a3c;
  --exist:#b59f3b;
  --right:#538d4e;
}

/*nav bar stuff*/
.navBar{
  display: flex;
  justify-content: center;
  border-bottom: 1px solid;
  border-color: rgb(219, 219, 219);
  padding: 0px;
}
#navPadding{
  flex: 1;
}
#navTitle{
  align-self: center;
  font-size: 3rem;
}
.navButtonBar{
  flex: 1;
  display:flex;
  list-style-type: none;
  align-items: center;
  justify-content: right;
  
}

.navButton{
  font-size: 2rem;
  border: none;
  background: none;
  padding: 2rem;
}
.navButton:hover{
  background-color: rgb(211, 211, 211);
}


/* box stuff*/
.box{
  width: 60px;
  height: 60px;
  border:4px solid rgb(22, 22, 22);
  margin: 1px;
  color:black;
  font-size: 2rem;
  text-transform: uppercase;
  display: grid;
  place-items: center;
  font-weight: bolder;
  
}

.box.empty{
  background: var(--empty);
}

.box.right{
  background: var(--right);
}

.box.exist{
  background: var(--exist);
}

.boxList{
  display: flex;
  list-style: none;
  padding-left:0;
  padding-top: .2rem;
  

}
.boxList.main{
  display: flex;
  flex-direction: column;
  padding-top: 4rem;
}


/*game stuff*/
.game{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 45rem;
  flex-grow: 1;
  border-bottom: 1px #ccc solid;
  
}
#restart{
  display: inline-block;
  padding: .8rem 3rem;
  background-color: rgb(126 201 126);
  font-size: 1.5rem;
  border-radius: 7px;
  color: rgb(248, 248, 245);
}
#restart:hover{
  border-color: #207ba5;
}
#loadBar{
  font-size: 2rem;
  color: rgb(0, 0, 0);
  background-color: rgb(231, 231, 231);
  border-radius: 1rem;
  padding: 10px;
}
#congratImg{
  display: none;
}

#hint{
  text-align: center;
  background-color: rgb(249, 241, 232);
  align-self: stretch;
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin-top: 5rem;
  color: #121213;

  
}

#winMessage{
  text-align: center;
  background-color: rgb(233, 233, 233);
  border: rgb(226, 226, 226);
  align-self: stretch;
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin-top: 5rem;
  display: none;
  color: #121213;
}

#fail{
  text-align: center;
  background-color: rgb(255, 98, 98);
  border: rgb(226, 226, 226);
  align-self: stretch;
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin-top: 5rem;
  color: #121213; 
}
.gameContainer{
  display: flex;
  
}

#infoBox{
   flex : 1;
   border-left: 1px #ccc solid;
  border-bottom: 1px #ccc solid;

}

.hidden{
  display:none;
}

#infoTitle{
  margin-left: 1rem;
}

#infoList{
  justify-items: center;
  list-style-type: circle;
  font-size: large;
  
}

.infoItem{
  padding : 1rem;
  font-size: 1.4rem;
}

#tag{
  text-align: center;
  color: rgb(196, 196, 196);
}


.dark{
  background-color: #222;
  color: #e6e6e6;
  
}

.dark .box{
  color: #e6e6e6;

}

.dark #hint ,
.dark #winMessage
{
  background-color: rgb(75, 75, 75);
  color: #e6e6e6;
  
}


.dark #restart{
  background-color: rgb(29, 54, 29);
}