* {
  padding: 0;
  margin: 0;
}

body {
  background: rgb(11, 49, 66);
  background: linear-gradient(
    330deg,
    rgba(11, 49, 66, 1) 0%,
    rgba(146, 134, 155, 1) 80%,
    rgba(185, 230, 255, 1) 105%
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  font-family: Arial;
}

.title {
  color: white;
}

.game {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  padding: 50px;
}

.hud {
  background-color: #92869b;
  padding: 5px;
  width: calc(100% - 14px);
  height: 56px;
  border: solid 2px;
  border-color: #b9e6ff #0b3142 #0b3142 #b9e6ff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

img {
  margin: 0;
  padding: 0;
}

.mines-display {
  display: inline;
  color: white;
}

.difficulty-select {
  display: block;
  margin: 10px 0 0 0;
}

.reset-button {
  display: block;
  float: right;
  margin: 3px 0;
}

.grid-container {
  background-color: #0b3142;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(10, 1fr);
  justify-items: center;
}

.cell {
  width: 30px;
  height: 30px;
  background-image: url('./assets/minesweeper_tile.png');
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
}

.flagged {
  background-image: url('./assets/minesweeper_flagged.png');
}

.incorrect-flag {
  background-image: url('./assets/minesweeper_incorrect_flag.png');
}

.mine {
  background-image: url('./assets/minesweeper_mine.png');
}

.killer-mine {
  background-image: url('./assets/minesweeper_killer_mine.png');
}

.reveal-0 {
  background-image: url('./assets/minesweeper_empty.png');
}

.reveal-1 {
  background-image: url('./assets/minesweeper_1.png');
}

.reveal-2 {
  background-image: url('./assets/minesweeper_2.png');
}

.reveal-3 {
  background-image: url('./assets/minesweeper_3.png');
}

.reveal-4 {
  background-image: url('./assets/minesweeper_4.png');
}

.reveal-5 {
  background-image: url('./assets/minesweeper_5.png');
}

.reveal-6 {
  background-image: url('./assets/minesweeper_6.png');
}

.reveal-7 {
  background-image: url('./assets/minesweeper_7.png');
}

.reveal-8 {
  background-image: url('./assets/minesweeper_8.png');
}

/* preload images to prevent accidental misclicks because something didn't load */
body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url('./assets/minesweeper_tile.png')
    url('./assets/minesweeper_flagged.png')
    url('./assets/minesweeper_incorrect_flag.png')
    url('./assets/minesweeper_mine.png')
    url('./assets/minesweeper_killer_mine.png')
    url('./assets/minesweeper_empty.png') url('./assets/minesweeper_1.png')
    url('./assets/minesweeper_2.png') url('./assets/minesweeper_3.png')
    url('./assets/minesweeper_4.png') url('./assets/minesweeper_5.png')
    url('./assets/minesweeper_6.png') url('./assets/minesweeper_7.png')
    url('./assets/minesweeper_8.png');
}