:root {
  --board-size: 400px;
}

.ganar {
  width: 100%;
  height: 100%;
  background-color: black;
  position: absolute;
  display: none;
  opacity: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.ganar > a,
.ganar > div {
  margin: auto;
  display: flex;
  justify-content: center;
  width: 300px;
}

div#info2.col-6.alert.alert-info {
  background-color: green;
  color: white;
}

.inicio {
  display: flex;
  justify-content: center;
}

.inicio > img {
  width: 200px;
  height: 250px;
  position: absolute;
  margin-top: 80px;
  border-radius: 10%;
  border: 3px solid;
  box-shadow: 5%, 5%, 5%;
}

body {
  background-image: url(asets/hd-wallpaper-247391_1920.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tablero {
  width: var(--board-size);
  height: var(--board-size);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc(var(--board-size) / 3);
}

#b11,
#b12,
#b13 {
  border-top: none;
}

#b31,
#b32,
#b33 {
  border-bottom: none;
}

#b11,
#b21,
#b31 {
  border-left: none;
}

#b13,
#b23,
#b33 {
  border-right: none;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 6px solid white;
  display: grid;
  font-size: 3em;
}
a {
  display: block;
  color: aliceblue;
  text-decoration: none;
  font-size: 2em;
  text-align: center;
}

#info,
#info2 {
  margin-top: 20px;
  background-color: antiquewhite;
  border: 1px solid white;
}
.alert {
  text-align: center;
}

.btn-primary {
  margin-top: 5px;
  background-color: rgb(47, 25, 17) !important;
  border: 1px solid !important;
  justify-content: center;
}

div.d-grid.gap-2.col-3.mx-auto a:hover,
a:hover {
  background-color: black !important;
  scale: 1.05;
}

input {
  width: 150px;
  text-align: center;
  background-color: antiquewhite;
  border-radius: 5%;
  border: 1px solid black;
}

.nav-link {
  position: relative;
  margin-top: 180px;
  display: block;
  padding: 0.5rem 1rem;
  color: whitesmoke !important;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}