body{
    background-image: url(images/bgpink.png);
    background-size: cover;
    text-align: center;
    justify-content: center;
    align-items: center;
}
#board{
    width:420px;
    height:420px;
    background-color: #966378;
    border: 5px solid #966378;
    border-radius:10px;
    margin: auto;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
#title{
    margin-top:1px;
    padding: 0;
}
#scoretext{
    margin-top: -40px;
    padding: 0;
}
#result{
    position: absolute;
    margin-top: -50vh;
    justify-self: center;
    background-color: red;
    padding: 2%;
    width: 50%;
    font-size: 60px;
    color: white;
    border-radius: 15px;
    display: none;
}
#board div{
    width: 90px;
    height: 90px;
    background-color: white;
    color: #966378;
    font-size: 50px;
    border-radius: 7px;
    text-align: center;
    margin: auto;
}
.MFR{
    font-family:MFR;
}
.QS{
    font-family: Quicksand;
}
.pink{
    color:#bb698a;
}
@font-face {
    font-family: MFR;
    src: url(MotleyForcesRegular.ttf);
}

/* progressions */
/* .x0{
    background-image: url('/images/0.png');
    background-size: contain;
} */
.x2{
    background-color: #ffd8e8;
    /* background-image: url(/images/2.PNG); */
}
.x4{
    background-color: #ffc6df;
}
.x8{
    background-color: #ffc5dc;
}
.x16{
    background-color: #fab3d0;
}
.x32{
    background-color: #fdafcd;
}
.x64{
    background-color: #fb9ac1;
}
.x128{
    background-color: #fa8cb8;
}
.x256{
    background-color: #f170a4;
}
.x512{
    background-color: #df6b99;
}
.x1024{
    background-color: #d25f8d;
}
.x2048{
    background-color: #c84f7f;
}
.x4096{
    background-color: #b43769;
}
.x8192{
    background-color: #9c2454;
}
.x16384{
    background-color: #921748;
}
.x32768{
    background-color: #85083a;
}