#titleBar {
  font-weight: bolder;
  font-size: 40px;
  padding: 10px 0px;
  color: #8860d0;
  background-color: #84ceeb;
}

.clean {
  background: -webkit-linear-gradient(to right, #b993d6, #8ca6db, #c1c8e4);
  background: linear-gradient(to right, #b993d6, #8ca6db, #c1c8e4);
  width: 100%;
  height: 100%;
}

.notice {
  color: white;
  font-size: x-small;
}

h4,
h5,
h6 {
  color: #5680e9;
}

.button {
  background-color: #c1c8e4;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.square {
  background-color: skyblue;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0.5px;
  color: aliceblue;
}

.subSquare {
  background-color: firebrick;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0.5px;
  color: aliceblue;
}

.fieldBtn {
  border: 3px solid yellow;
  margin: 0.1rem;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
}

.spacer {
  padding: 1rem;
  margin: 2rem;
}

img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.selectedCell {
  border: 1px solid #000;
}

/* border for inner blocks */
#C0,
#C1,
#C2,
#C3,
#C4,
#C5,
#C6,
#C7,
#C8 {
  border-right: 4px dotted blue;
}

#G0,
#G1,
#G2,
#G3,
#G4,
#G5,
#G6,
#G7,
#G8 {
  border-left: 4px dotted blue;
}

#A3,
#B3,
#C3,
#D3,
#E3,
#F3,
#G3,
#H3,
#I3 {
  border-top: 4px dotted blue;
}

#A6,
#B6,
#C6,
#D6,
#E6,
#F6,
#G6,
#H6,
#I6 {
  border-top: 4px dotted blue;
}

/* border around the board */
#A0,
#A1,
#A2,
#A3,
#A4,
#A5,
#A6,
#A7,
#A8 {
  border-left: 4px solid red;
}

#I0,
#I1,
#I2,
#I3,
#I4,
#I5,
#I6,
#I7,
#I8 {
  border-right: 4px solid red;
}

#A0,
#B0,
#C0,
#D0,
#E0,
#F0,
#G0,
#H0,
#I0 {
  border-top: 4px solid red;
}

#A8,
#B8,
#C8,
#D8,
#E8,
#F8,
#G8,
#H8,
#I8 {
  border-bottom: 4px solid red;
}

.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7,
.box8,
.box9 {
  text-align: center;
}

.invalidEntry
{
  color:red;
}

.green
{
  background-color: green;
}

.blue
{
  background-color: blue;
}

.red
{
  background-color: red;
}

/* The Modal (background) pull from w3school.com*/
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; 
  padding: 20px;
  border: 1px solid #888;
  width: 80%; 
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* responsive design for game board */
@media screen and (max-width: 992px) {
  .square {
    width: 3.5rem;
    height: 3.5rem;
  }
}

@media screen and (max-width: 768px) {
  .square {
    width: 3rem;
    height: 3rem;
  }
}

@media screen and (max-width: 480px) {
  .square {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* responsive design for field buttons for game board entry */

@media screen and (max-width: 640px) {
  .fieldBtn {
    border: 3px solid yellow;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
  }
}