html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


.minesweeper-grid {
  border-collapse: collapse;
}
.minesweeper-grid td {
  width: 32px;
  height: 32px;
  text-align: center;
  vertical-align: middle;
  background-color: #bdbdbd;
  border: 2px outset #eee;
  font-weight: bold;
  font-size: 1.2em;
}
.minesweeper-grid td.revealed {
  background-color: #eee;
  border: 1px solid #9e9e9e;
}
.minesweeper-grid a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: black;
}
.color-1 { color: blue; }
.color-2 { color: green; }
.color-3 { color: red; }
.color-4 { color: darkblue; }
.color-5 { color: brown; }
.color-6 { color: cyan; }
.color-7 { color: black; }
.color-8 { color: grey; }

.new-game-grid {
  border-collapse: collapse;
}
.new-game-grid td {
  width: 32px;
  height: 32px;
  background-color: #bdbdbd;
  border: 2px outset #eee;
}
.new-game-grid a {
  display: block;
  width: 100%;
  height: 100%;
}

.minesweeper-grid td .mine.exploding {
    display: inline-block; /* Needed for transform */
    animation: pop 0.3s ease-out;
}

@keyframes pop {
    0% { transform: scale(0.1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

.fit-content-width {
  width: fit-content;
}