.twentyfourtyeightHeroImg {
  width: 100%;
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.5), 
      rgba(0, 0, 0, 0.5)), 
    url("images/other/ptwoodenboatfestival.jpg");
  height: 75vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
}

p {
  text-align: left;
}

/* 2048 Board Styling */
#board {
  width: 400px;
  height: 400px;

  background-color: #e3e3e3;
  border: 6px solid #D3D3D3;

  margin: 0 auto;
  display: flex; /* 2048 tiles will be inline */
  flex-wrap: wrap; /* 2048 tiles will be inline */
}

/* Template tile */
.tile {
  width: 97px;
  height: 97px;
  border: 3px solid #D3D3D3;

  font-size: 20px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Creating the different sailboat tiles */
.openskiff { /* 2 */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/openskiffs.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.sabot { /* 4 */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/sabot.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.sunfish { /* 8 */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/sunfish.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.ilca { /* 16 */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/ilca2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.fj { /* 32 */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/fj.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.fourtwenty { /* 64 */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/420.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.moth { /* 128 */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/moth.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.snipe { /* 256 */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/snipe.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.twentyniner { /* 512 */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/29er.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.fortyniner { /* 1024 */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/49er.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.j22 { /* 2048 */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/j22.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.melges24 { /* 4096 */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/melges24.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

.yachts { /* 8192 and beyond */
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)), 
    url("/images/sailboats/yachts2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
}

/* Game controls styling */
.gameControls {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.gameControls .button {
  margin: 0;
}

#gameOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#gameOverlay.hidden {
  display: none;
}

.overlayContent {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 85vw;
  text-align: center;
  
  box-shadow: 0px 0px 20px 3px var(--clr-accent-1);
  background-color: var(--clr-white);
}