* {
  margin: 0px;
  list-style: none;
}

html, body {
  min-width: 100%;
  min-height: 100%;
}

body {
  background-image: linear-gradient(
    32deg,
    rgba(178, 208, 233, 0.8),
    rgb(115, 182, 211),
    rgb(53, 145, 165),
    rgb(8, 126, 110),
    rgb(55, 92, 125),
    rgb(30, 89, 133),
    rgba(48, 76, 99, 0.9),
    rgba(70, 103, 129),
    rgb(51, 129, 162),
    rgb(49, 127, 145),
    rgb(8, 126, 110),
    rgb(47, 89, 126),
    rgb(32, 58, 78)
  );
  font-family: Verdana, Geneva, sans-serif;
  margin: 0px auto;
  color: rgb(230, 230, 238);
  text-shadow: 1px 1px 8px rgb(19, 19, 71);
  font-weight: 550;
}

#createBoard {
  text-align: center;
  padding: 30px;
  width: auto;
  margin: 0 auto;
  display: block;
  border: 5px solid rgb(211, 226, 241);
  background-color: rgb(11, 61, 92);
  color: rgb(211, 226, 241);
  border-radius: 15px;
  font-size: 30px;
  font-weight: 600;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  margin-top: 300px;
  margin-bottom: 450px;
  transition: 0.4s;
  opacity: 0.6;
}

#createBoard:hover {
  transform: scale(1.5) translateY(-33px);
  opacity: 1;
  box-shadow: 0 5px 1px -2px rgb(14, 157, 138),
    0 10px 1px -4px rgb(193, 60, 226), 0 15px 1px -6px rgb(3, 94, 94),
    0 18px 1px -8px rgb(204, 242, 232);
}

#btnContainer {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-bottom: 15px;
  max-width: 1000px;
}

section button {
  text-align: center;
  padding: 30px;
  width: auto;
  border: 5px solid rgb(211, 226, 241);
  background-color: rgb(11, 61, 92);
  color: rgb(211, 226, 241);
  border-radius: 15px;
  font-size: 30px;
  font-weight: 600;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  transition: 0.4s;
  opacity: 0.6;
}

#btnContainer button:hover {
  opacity: 1;
  transform: scale(1.1);
}
.coverAllOn {
  opacity: 1;

  animation-name: glow;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-timing-function: ease;
}

@keyframes glow {
  0% {
    border: 5px solid rgb(143, 203, 144);
    background-color: rgb(11, 61, 92);
    color: rgb(143, 203, 144);
  }
  35% {
    border: 5px solid rgb(234, 236, 74);
    background-color: rgb(11, 61, 92);
    color: rgb(234, 236, 74);
  }
  65% {
    border: 5px solid rgb(234, 236, 74);
    background-color: rgb(11, 61, 92);
    color: rgb(234, 236, 74);
  }
  100% {
    border: 5px solid rgb(143, 203, 144);
    background-color: rgb(11, 61, 92);
    color: rgb(143, 203, 144);
  }
}

div:hover span {
  visibility: visible;
}

div span {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

footer {
  bottom: 25px;
  width: 100%;
  line-height: 20px;
  text-shadow: 3px 3px 12px navy;
  text-align: center;
  margin-bottom: 20px;
}

table {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}
td {
  border: 1px outset black;
  box-shadow: 2px 2px rgb(60, 61, 63), -1px -1px rgb(60, 61, 63);
  width: 150px;
  height: 150px;
  position: relative;
  text-align: center;
  background-color: hsl(191, 48%, 60%);
}
td:hover {
  transform: scale(1.1);
  z-index: 1;
}

.stamp {
  animation-name: stamp;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  background: url("../img/resizedLogo.png");
  background-color: lightblue;
  background-size: cover;
}

@keyframes stamp {
  0% {
    opacity: 1;
    transform: scale(4);
  }
  100% {
    opacity: 0.5;
  }
}

#freeSpace {
  z-index: 2;
}
.victory {
  background: url("../img/resizedLogo.png");
  background-color: lightblue;
  background-size: cover;
  /* opacity: 0.6; */

  animation-name: winner;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

@keyframes winner {
  0% {
    /* transform: scale(1.2); */
    opacity: 1;
    /* padding-top: 5px; */
  }
  100% {
    transform: scale(5.2);
    opacity: 1;
    box-shadow: none;
    white-space: pre-line;
    padding-top: 25px;
  }
}

header h1 {
  text-align: center;
  color: rgb(211, 226, 241);
  text-decoration: wavy;
  text-shadow: 5px 8px 6px rgb(1, 54, 46);
  font-size: 60px;
  margin-top: 30px;
  margin-bottom: 30px;
}

body section {
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

body #main {
  margin-top: 50px;
}

a {
  color: white;
}

a:hover {
  font-size: 1.1em;
}