html, body {
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  background: #efefef url(mine.jpg) center center no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
}

footer a {
  color: #472860;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

.body {
  display: flex;
  align-items: center;
  justify-content: flex-center;
  flex-direction: column;
  margin-bottom: 2em;
}

#message, #notes {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#message {
  font-size: 1.5rem;
}

#boardWrapper {
  padding: 5px;
}
.board {
  margin: 5px auto 5px 5px;
  display: flex;
  flex-wrap: wrap;
  user-select: none;
}

.board div {
  box-shadow: inset 0px 0px 4px rgba(64,9,96,0.5);
  color: green;
  font-size: 2rem;
  width: 75px;
  height: 75px;
  border: 1px #ccc dotted;
  border-radius: 10%;
  background-color: white;
  margin: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.mine, div.marked {
  box-shadow: inset 5px 0 10px -5px rgba(0,0,0,0.5),
  inset -5px 0 10px -5px rgba(0,0,0,0.5),
  inset 0px -5px 10px -2px rgba(0,0,0,0.5)
}
.board div:hover {
  background-color: white;
}

div.mine, div.mine:hover {  
  background: no-repeat center/60% url("images/bomb.svg") crimson;
}

div.hidden {
  background: rgba(64, 9, 96, 0.1);
  box-shadow: inset 5px 0 10px -5px rgba(0,0,0,0.1),
  inset -5px 0 10px -5px rgba(0,0,0,0.1),
  inset 0px -5px 10px -2px rgba(0,0,0,0.1)  
}

div.hidden:hover {
  background: rgba(64, 9, 96, 0.2);
}

div.marked, div.marked:hover {
  background: no-repeat center/60% url("images/flag.png") rgba(64, 9, 96, 0.2);
}

div.win, div.win:hover {
  background-color: green;
}


div.indicated, div.indicated:hover {
  background: rgba(64, 9, 96, 0.2);
}

.hint, .warn {
  font-size: 20px;
  line-height: 50px;
  vertical-align: middle;
}
.warn {
  color: red;
}

.hint img, .warn img {
  padding: 5px;
  margin-right: 1em;
  height: 40px;
  width: auto;
  float: left;
}

#buttons {
  margin-top: 1em;
}

#buttons .col-sm {
  text-align: center;
}
.col-sm button, #hideInstructions {
    background-color: rgba(64, 9, 96, 0.6);
    border: none;
    width: 190px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 3px;
    box-shadow: 2px 2px 4px darkgrey;
    margin: 1em auto 0px auto;
    position: relative;
    top: 0px;
    left: 0px;
    transition: top 0.05s linear, left 0.05s linear;
}
.col-sm button:hover, #hideInstructions:hover  {
  top: -1px;
  left: -1px;
  box-shadow: 4px 4px 4px darkgrey;
}

.col-sm button:active, #hideInstructions:active  {
  top: 1px;
  left: 1px;
  box-shadow: 0px 0px 4px darkgrey;
}

#harder {
  background-color: rgba(64, 9, 96, 0.8);
}

#easier {
  background-color: rgba(64, 9, 96, 0.7);
}

#instructions {
  font-size: 0.8em;
  width: 90%;
  background-color: rgba(255, 255, 255, 0.9);
  position: absolute;
  padding: 1em;
  z-index: 2;
  border: solid 1px rgba(64, 9, 96, 1);
  border-radius: 1em;
  display: none;
  transition: display 0.05s linear;
}

#showInstructions {
  background-color: rgba(64, 9, 96, 1);
}

#hideInstructions {
  font-size: 0.8em;
  display: block;
  margin: auto;
  padding: 5px;
  background-color: rgba(64, 9, 96, 1);
}