#board {
    text-align: center;
}
#board div[name="container"]{
    position: relative;
    display: block;
}
#board div[name="tiles"]{
    display: inline-block;
}
#board [name="score"]{
    font-family: Trebuchet MS;
    color:rgb(0, 0, 0);
}
#board div[name="box"]{
    display: inline-block;
    width: 412px;
    height: 412px;
    font-family: Trebuchet MS;
    font-size: 70px;
    background-color: #f1a00a;
}
#board div[name="box"]>div{
    position: absolute;
    background-color: #f2d194;
    width: 90px;
    height: 90px;
}
#board div[name="box"]>.cell{
    background-color: #f2d194;
}
#board div[name="box"]>[value]{
    display: flex;
    font-family: Trebuchet MS;
    align-items: center;
    justify-content: center;
    transition: 150ms;
}
#board [name="message"] {
    font-family: Trebuchet MS;
	position: absolute;
	width: 412px;
	height: 412px;
	font-size: 30px;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	background: #ddfc;
}
#board [name="message"][hide] {
	display: none;
}
#board div[name="box"]>div[x-pos="0"]{left: 10px;}
#board div[name="box"]>div[x-pos="1"]{left: 110px;}
#board div[name="box"]>div[x-pos="2"]{left: 210px;}
#board div[name="box"]>div[x-pos="3"]{left: 310px;}
#board div[name="box"]>div[y-pos="0"]{top: 10px;}
#board div[name="box"]>div[y-pos="1"]{top: 110px;}
#board div[name="box"]>div[y-pos="2"]{top: 210px;}
#board div[name="box"]>div[y-pos="3"]{top: 310px;}

#board div[name="box"]>div[value="2"]{font-size: 70%; background: #edc76f;}
#board div[name="box"]>div[value="4"]{font-size: 70%; background: #edb26f;}
#board div[name="box"]>div[value="8"]{font-size: 70%; background: #ed9f6f;}
#board div[name="box"]>div[value="16"]{font-size: 60%; background: rgb(237, 147, 111);}
#board div[name="box"]>div[value="32"]{font-size: 60%; background: rgb(237, 121, 111);}
#board div[name="box"]>div[value="64"]{font-size: 60%; background: rgb(149, 237, 111);}
#board div[name="box"]>div[value="128"]{font-size: 50%; background: rgb(101, 219, 140);}
#board div[name="box"]>div[value="256"]{font-size: 50%; background: rgb(101, 219, 182);}
#board div[name="box"]>div[value="512"]{font-size: 50%; background: rgb(101, 219, 219);}
#board div[name="box"]>div[value="1024"]{font-size: 40%; background: rgb(101, 182, 219);}
#board div[name="box"]>div[value="2048"]{font-size: 40%; background: rgb(101, 154, 219);}
#board div[name="box"]>div[value="4096"]{font-size: 40%; background: rgb(250, 255, 100);}
#board div[name="box"]>div[value="8192"]{font-size: 40%; background: rgb(250, 255, 100);}
#board div[name="box"]>div[value="16384"]{font-size: 30%; background: rgb(250, 255, 100);}
#board div[name="box"]>div[value="32768"]{font-size: 30%; background: rgb(250, 255, 100);}
#board div[name="box"]>div[value="65536"]{font-size: 30%; background: rgb(250, 255, 100);}