:root {
  --index: calc(1vw + 1vh);
}

/*----------------------------MAIN------------------------*/

/* Основні стилі для тіла сторінки*/
body {
  background-color: #0e2d21;
  color: #efbf7f;
  text-align: center;
  font-family: "Mulish", sans-serif;
  overflow-y: hidden;
}

/* Стилі для заголовків */
.text_h2 {
  font-family: "Mulish", sans-serif;
  font-size: calc(var(--index) * 3);
}

/* Стилі для ігрової дошки */
#board {
  width: 400px;
  height: 400px;
  background-color: #b39475;
  border: 7px solid #5a3a15;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

/* Стилі для плиток на дошці */
.tile {
  width: 90px;
  height: 90px;
  border: 5.5px solid #5a3a15;
  transition: all 0.3s ease-in-out;
  font-size: 40px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Стилі для кожної плитки з числовим значенням, що помножується на 2 */
.x2 {
  background-color: #eee4da;
  color: #727371;
}
.x4 {
  background-color: #ece0ca;
  color: #727371;
}
.x8 {
  background-color: #f4b17a;
  color: white;
}
.x16 {
  background-color: #f59575;
  color: white;
}
.x32 {
  background-color: #f57c5f;
  color: white;
}
.x64 {
  background-color: #f65d3b;
  color: white;
}
.x128 {
  background-color: #edce71;
  color: white;
}
.x256 {
  background-color: #edcc63;
  color: white;
}
.x512 {
  background-color: #edc651;
  color: white;
}
.x1024 {
  background-color: #eec744;
  color: white;
}
.x2048 {
  background-color: #ecc230;
  color: white;
}
.x4096 {
  background-color: #fe3d3d;
  color: white;
}
.x8192 {
  background-color: #ff2020;
  color: white;
}

.footer {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

/*----------------------------FOOTER------------------------*/

.footer {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

/* Стилі для кнопки з посиланням */
.ppp {
  font-size: calc(var(--index) * 2);
  padding: 40px 40px;
  background-color: #efbf7f;
  color: #0e2b07;
  border-radius: 20px;
  margin-bottom: 40vh;
  display: inline-block;
  text-decoration: none;
}