/*animated background*/

body{
    min-height: 100vh;
    background: black;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: blanchedalmond;
  
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
.container{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.bubbles{
    position: relative;
    display: flex;
}
.bubbles span{
    position : relative;
    width: 20px;
    height: 20px;
    background:#4fc3dc ;
    margin:0 4px;
    border-radius: 50%;
    box-shadow: 0 0 0 10px #4fc3dc44,
                0 0 50px #4fc3dc,
                0 0 100px #4fc3dc;
    animation:animate 15s linear infinite;    
    animation-duration: calc(125s /var(--i));        
    
}  
.bubbles span:nth-child(even){
    background: red;
    box-shadow: 0 0 0 10px rgb(147, 11, 11),
                0 0 50px red,
                0 0 100px red;
}   
@keyframes animate {
    0%{
        transform: translateY(100vh) scale(0);
    }
    100%{
        transform:translateY(-10vh) scale(1);
    }
}

 button:hover{
    background-color: green;
   color: white;


}

button{
    font-size: 30px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    padding: 1% 3%;
    border-width: 8px;
    background-color:deepskyblue;
    
}



/*  game design*/

hr{
    width: 500px;
}


#board{
    width: 400px;
    height: 400px;
    background-color:#f0bd7a;
    border: 6px solid #cf8c35;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}
#score:hover{
   
    color:yellowgreen;
}
.tile{
    height: 90px;
    width: 90px;
    font-size: 40px;
    font-weight: bold;
    border: 5px solid #cf8c35 ;

    justify-content: center;
    align-items: center;

    display: flex;
}
.x2 {
    background-color: #eee4da;
    color: #727371;
}

.x4 {
    background-color: #f4b032;
    color: #727371;
}

.x8 {
    background-color: #f57a15;
    color: white;
}

.x16{
    background-color: #a13410;
    color: white;
}

.x32{
    background-color: #b6dc20;
    color: white;
}

.x64{
    background-color: red;
    color: white;
}

.x128{
    background-color: #5733fb;
    color: white;
}

.x256{
    background-color: #ed1bae;
    color: white;
}

.x512{
    background-color: #e9ce7c;
    color: white;
}

.x1024{
    background-color: #fdc306;
    color: white;
}

.x2048{
    background-color: #ecc230;
    color: white;
}

.x4096 {
    background-color: #3dfe53;
    color: white;
}

.x8192 {
    background-color: #190101;
    color: white;
}