/* Set font for the entire document */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #e7dbdb;
}

/* Center align content in sections */
section {
  text-align: center;
}

.gam--title {
  font-family: Arial;
  font-size: 60px;
  animation: fadeIn 2.5s;
  margin-bottom: 13rem;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Styling for individual cells */
.cell {
  font-family: "Permanent Marker", cursive;
  width: 100px;
  height: 100px;
  border: 2px solid #ffffff;
  cursor: pointer;
  line-height: 100px;
  font-size: 60px;
}

/* Styling for the game title */
.game--title {
  font-size: 50px;
  color: #47992f;
  margin: 50px auto;
  opacity: 0.8;
  background-color: #000000;
}

/* Styling for the game container */
.game--container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  width: 306px;
  margin: 10px auto;
  background-color: #252121;
  color: #04c0b2;
}

/* Styling for game status messages */
.game--status {
  font-size: 50px;
  color: #1ed86c;
  margin: 20px auto;
}

/* Styling for game restart button */
.game--restart {
  width: 200px;
  border-radius: 5px;
  height: 50px;
  font-size: 25px;
  color: #000000;
}
.game--restart {
  border: 4px solid rgb(238, 233, 233);
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  border-radius: 1rem;
}

/* Styling for hover effect on game restart button */
.game--restart:hover {
  background-color: #3fad0b;
}

body {
  margin: auto;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: auto;
  background: linear-gradient(
    315deg,
    rgba(101, 0, 94, 1) 3%,
    rgba(60, 132, 206, 1) 38%,
    rgba(48, 238, 226, 1) 68%,
    rgba(255, 25, 25, 1) 98%
  );
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
  background-attachment: fixed;
}

@keyframes gradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.wave {
  background: rgb(255 255 255 / 25%);
  border-radius: 1000% 1000% 0 0;
  position: fixed;
  width: 200%;
  height: 12em;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.gam--title {
  margin-top: -0.001rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: solid 2px rgb(94, 87, 87);
  padding: 2rem;
  /* border-radius: 1.1rem; */
  /* font-size: 1.2rem; */
  background-color: #b9c4c2;
  transition: 0.5s;
  border-bottom-left-radius: 11rem;
  border-bottom-right-radius: 11rem;
  box-shadow: rgba(6, 141, 13, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  /* max-width: 50%; */
}

.game--title {
  width: 16rem;
  height: 2rem;
  margin-top: -0.001rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: solid 2px rgb(135, 144, 148);
  padding: 3rem;
  border-radius: 1rem;
  font-size: 1.6rem; 
  background-color: #b9c4c2;

  transition: 0.5s;
  box-shadow: rgba(236, 241, 236, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  /* max-width: 50%; */
}

body {
  /* font-family: Arial;
    font-size: 50px; */
  animation: fadeIn 1.5s;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#menu {
  justify-content: center;
  align-items: center;
  display: flex;
  margin-top: 3vh;
}
.returnButton {
  width: 200px;
  font-size: x-large;
  background-color: orange;
  border: none;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
  border-radius: 4px;
  height: 36px;
  font-family: "Baloo", sans-serif;
  color: white;
}
.reloadButton {
  width: 200px;
  font-size: x-large;
  background-color: blue;
  border: none;
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 4px;
  height: 36px;
  font-family: "Baloo", sans-serif;
  color: white;
}