*,
::before,
::after {
  -webkit-box-sizing : border-box;
  box-sizing         : border-box;
  outline            : none !important;
  -webkit-user-select: none !important;
  -moz-user-select   : none !important;
  -ms-user-select    : none !important;
  user-select        : none !important;
}

body {
  font-family     : "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin          : 0;
  background-color: #f3eee3;
  width           : 100vw;
  height          : 100vh;
  overflow-x      : hidden;
}

header {
  padding          : 12px;
  display          : -webkit-box;
  display          : -ms-flexbox;
  display          : flex;
  -webkit-box-align: center;
  -ms-flex-align   : center;
  align-items      : center;
  -webkit-box-pack : space-evenly;
  -ms-flex-pack    : space-evenly;
  justify-content  : space-evenly;
  margin-bottom    : 20px;
}

header .title {
  font-size    : 28px;
  font-weight  : 900;
  color        : #776E65;
  margin-bottom: 5px;
}

header .description {
  font-size  : 14px;
  color      : #776E65;
  line-height: 24px;
}

header .scoreboard {
  width           : -webkit-max-content;
  width           : -moz-max-content;
  width           : max-content;
  height          : 100%;
  background-color: #776E65;
  color           : #fff4ea;
  font-weight     : 500;
  font-size       : 18px;
  padding         : 5px 10px;
  text-align      : center;
  border-radius   : 5px;
  margin-left     : 25px;
}

header .scoreboard #score {
  display    : block;
  font-size  : 18px;
  margin     : 5px 0;
  font-weight: 700;
}

main {
  width           : auto;
  height          : auto;
  position        : relative;
  display         : -webkit-box;
  display         : -ms-flexbox;
  display         : flex;
  -webkit-box-pack: center;
  -ms-flex-pack   : center;
  justify-content : center;
}

 .gameboard {
  width                : 90%;
  max-width            : 400px;
  margin               : 0 auto;
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : 10px;
  padding              : 10px;
  background-color     : #cab8a5;
  border-radius        : 5px;
}

.gameboard .cell {
  position        : relative;
  background-color: #e0d1bf;
  text-align      : center;
  border-radius   : 5px;
}

.gameboard .tile {
  position          : absolute;
  display           : -webkit-box;
  display           : -ms-flexbox;
  display           : flex;
  -webkit-box-align : center;
  -ms-flex-align    : center;
  align-items       : center;
  -webkit-box-pack  : center;
  -ms-flex-pack     : center;
  justify-content   : center;
  z-index           : 10;
  top               : 0;
  left              : 0;
  width             : 100%;
  height            : 100%;
  border-radius     : 5px;
  cursor            : pointer;
  font-weight       : bold;
  -webkit-transition: left 0.1s linear, top 0.1s linear;
  transition        : left 0.1s linear, top 0.1s linear;
  font-size         : 24px;
  background-color  : #20305a;
  color             : #fff;
}

@media (max-width: 400px) {
  .gameboard .tile {
    font-size: 15px;
  }
}

.gameboard .tile.pop {
  -webkit-animation: pop 0.1s ease forwards;
  animation        : pop 0.1s ease forwards;
}

.gameboard .tile[data-value="2"],
.gameboard .tile[data-value="4"],
.gameboard .tile[data-value="8"] {
  font-size: 40px;
}

@media (max-width: 400px) {

  .gameboard .tile[data-value="2"],
  .gameboard .tile[data-value="4"],
  .gameboard .tile[data-value="8"] {
    font-size: 30px;
  }
}

.gameboard .tile[data-value="16"],
.gameboard .tile[data-value="32"],
.gameboard .tile[data-value="64"] {
  font-size: 34px;
}

@media (max-width: 400px) {

  .gameboard .tile[data-value="16"],
  .gameboard .tile[data-value="32"],
  .gameboard .tile[data-value="64"] {
    font-size: 26px;
  }
}

.gameboard .tile[data-value="128"],
.gameboard .tile[data-value="256"],
.gameboard .tile[data-value="512"] {
  font-size: 28px;
}

@media (max-width: 400px) {

  .gameboard .tile[data-value="128"],
  .gameboard .tile[data-value="256"],
  .gameboard .tile[data-value="512"] {
    font-size: 22px;
  }
}

.gameboard .tile[data-value="1024"],
.gameboard .tile[data-value="2048"] {
  font-size: 28px;
}

@media (max-width: 400px) {

  .gameboard .tile[data-value="1024"],
  .gameboard .tile[data-value="2048"] {
    font-size: 20px;
  }
}

.gameboard .tile[data-value="2"] {
  color     : #776E65;
  background: #eee4da;
}

.gameboard .tile[data-value="4"] {
  color     : #776E65;
  background: #eee1c9;
}

.gameboard .tile[data-value="8"] {
  color     : #f9f6f2;
  background: #f3b27a;
}

.gameboard .tile[data-value="16"] {
  color     : #f9f6f2;
  background: #f69664;
}

.gameboard .tile[data-value="32"] {
  color     : #f9f6f2;
  background: #f77c5f;
}

.gameboard .tile[data-value="64"] {
  color     : #f9f6f2;
  background: #f75f3b;
}

.gameboard .tile[data-value="128"] {
  color     : #f9f6f2;
  background: #edd073;
}

.gameboard .tile[data-value="256"] {
  color     : #f9f6f2;
  background: #edcc62;
}

.gameboard .tile[data-value="512"] {
  color     : #f9f6f2;
  background: #edc950;
}

.gameboard .tile[data-value="1024"] {
  color     : #f9f6f2;
  background: #edc53f;
}

.gameboard .tile[data-value="2048"] {
  color     : #f9f6f2;
  background: #edc22e;
}

.gameOver {
  position             : absolute;
  display              : none;
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
  -webkit-box-align    : center;
  -ms-flex-align       : center;
  align-items          : center;
  -webkit-box-pack     : center;
  -ms-flex-pack        : center;
  justify-content      : center;
  width                : 90%;
  max-width            : 400px;
  height               : 100%;
  margin               : 0 auto;
  background           : rgba(255, 255, 255, 0.5);
  color                : #776E65;
  z-index              : 11;
}

.gameOver .replay {
  border       : none;
  background   : #776E65;
  padding      : 10px 15px 7.5px 15px;
  border-radius: 5px;
  cursor       : pointer;
}

.gameOver .replay:active {
  -webkit-transform: scale(0.8);
  transform        : scale(0.8);
}

.gameOver .replay .material-icons-round {
  font-size  : 28px;
  font-weight: 900;
  color      : #e0d1bf;
}

@-webkit-keyframes pop {
  from {
    -webkit-transform: scale(0.5);
    transform        : scale(0.5);
  }

  to {
    -webkit-transform: scale(1);
    transform        : scale(1);
  }
}

@keyframes pop {
  from {
    -webkit-transform: scale(0.5);
    transform        : scale(0.5);
  }

  to {
    -webkit-transform: scale(1);
    transform        : scale(1);
  }
}















-------------------------------

body
{

}
.all
{
    position:absolute;
    top:110%;
    left:50%;
    transform:translate(-50%,-50%);
}
.y
{
    text-decoration:none;
    color:white;
    position:relative;
    left:25px;
    top:10px;
    text-shadow:2px 2px silver;
}


.b{
    text-decoration:none;
    position:relative;
    color:white;
    left:3px;
    top:5px;
    text-shadow:2px 2px silver;
}


 input[type="checkbox"]
{
    -webkit-appearance:none;
    width:100px;
    height:50px;
    background-color: #FFCC21;
    border-radius:50px;
    outline:none;
    border:2px solid black;
}
input:checked[type="checkbox"]
{
    background-color: black;
}
input[type="checkbox"]:before
{
    content: " ";
    position: absolute;
    width:35px;
    height:35px;
    background:url("https://i.ibb.co/MP7kfVy/kisspng-cartoon-sun-5aa18799cfc412-323267561520535449851.png");
    border-radius: 50px;
    background-color: white;
    top:10px;
    left:14px;
    transition-duration: 0.5s;
    background-size: 110%;
}
input:checked[type="checkbox"]:before
{
    left:60px;
    background-image:url();
    background-color: #FFCC21;

}
input[type="checkbox"]:after
{
    content: " ";
    position: absolute;
    width:35px;
    height:35px;
    background:transparent;
    border-radius: 50px;
    top:10px;
    left:2px;
    background-size: 110%;
}
input:checked[type="checkbox"]:after
{
    left:52px;
    top:6px;
    background-color: black;

}