/* getting the background and gameboard to expand to the size of the window */
html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Mina', sans-serif;
  color: #400000;
  background: url('images/supermarket.jpg');
  /* putting bkgrd image here to remove white space under */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

h1 {
  text-align: center;
  margin: 10px auto 0;
  font-size: 50px;
  font-weight: bolder;
  color: rgb(49, 149, 95);
}

h2 {
  font-size: 30px;
  font-weight: bolder;
  text-align: center;
  margin: 5px auto;
  color: rgb(49, 149, 95);
}

p {
  font-size: 20px;
  margin: 5px auto;
}

#controls {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  /* height: 10%; */
}

#controls>button {
  font-family: 'Mina', sans-serif;
  font-size: 12px;
  color: rgb(49, 149, 95);
  background-color: whitesmoke;
  font-weight: bolder;
  border: 1px solid rgb(49, 149, 95);;
  width: 100px;
  margin: 5px;
  margin-top: 0;
  border-radius: 5px;
}

#main {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: scroll;
}

#game-board {
  display: flex;
  margin: 10px 5px;
  width: 600px;
  height: 600px;
  flex-flow: row wrap;
  /* border: 0.5px outset whitesmoke; */
  border: 0.5px solid #EFBC7F;
  border-radius: 5px;
  /* background-color: rgba(232, 183, 82, 0.7); */
  /* background-color: rgba(193, 166, 149, 0.7); */
  background-color: rgba(250, 218, 186, 0.7);
}

.square {
  display: flex;
  width: 119px;
  height: 99px;
  /* border: 0.5px outset #EFBC7F; */
  border: 0.5px outset rgba(250, 218, 186, 0.4);
  margin: 0;
  padding: 0;
  justify-content: space-around;
  align-items: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.player {
  display: flex;
  height: 50px;
  padding: 0;
  margin: 0;
}

#aside1, #aside2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 10px 5px;
  width: 100px;
  height: 600px;
  background-color: rgba(49, 149, 95, 0.7);
  max-width: 100px;
  min-width: 80px;
}

#aside1 img, #aside2 img {
  width: 80px;
}

#aside2 img {
  /* flipping player 2 image in aside to face game board */
  transform: scaleX(-1);
}

#aside2 h3 {
  color: white;
}

#aside1 h3 {
  color: black;
}

#roll, #roll2 {
  margin: 20px;
  font-size: 20px;
  font-family: 'Mina', sans-serif;
  color: #400000;
  padding: 5px 20px;
  border-radius: 5px;
}

#roll-num, #roll-num2 {
  /* table display centers paragraph inside */
  display: table;
  background-color: whitesmoke;
  width: 80px;
  height: 80px;
}

#roll, #roll-num, #roll-num p {
  background-color: black;
  color: white;
}

#roll2, #roll-num2, #roll-num2 p {
  background-color: white;
  color: black;
}

#roll2 {
  border-color: black;
}

#roll-num p, #roll-num2 p {
  font-size: 40px;
  /* the following centers the p */
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  line-height: 100%;
  font-weight: bolder;
}

/* #modal-load-bkgrd, #modal-inst-bkgrd  */
#modal-bkgrd {
  display: flex;
	background-color: rgba(0,0,0,.4);
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	overflow: auto;
}

/* #modal-inst-bkgrd {
  	display: none;
} */

#modal-on-load, #modal-instructions, #modal-win, #modal-delay, #modal-propel, #modal-battle, #modal-battle-result {
  display: flex;
  flex-direction: column;
  align-items: center;
	background-color: white;
	height: 350px;
	width: 350px;
	border-radius: 5px;
  padding: 10px;

	margin: 150px auto;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

#modal-instructions, #modal-win, #modal-delay, #modal-propel, #modal-battle, #modal-battle-result {
  display: none;
}

.modal-btn {
  font-family: 'Mina', sans-serif;
  font-size: 20px;
  color: rgb(49, 149, 95);
  background-color: whitesmoke;
  font-weight: bolder;
  border: 1px solid rgb(49, 149, 95);;
  width: 300px;
  margin-top: 5px;
  border-radius: 5px;
}

button:disabled {
  opacity: 0.6;
}