.wrapper {
    width:300px;
}
#board {
    width:300px;
    height:300px;
    border:1px solid Blue;
    position:relative;
    background-color:black;
}
#board>div {
    position:absolute;
    width:10px;
    height:10px;
    background-color:#139504;
    box-sizing: border-box;
}
#board>div:nth-child(2) {
    background-color:inherit;
    background:url(head.png);
    z-index: 1;
}
#board>div:last-child {
    background-color:inherit;
    background:url(tail.png);
}
#board>div:last-child.right, #board>div:nth-child(2).right {
    transform: rotate(180deg);
}
#board>div:last-child.up, #board>div:nth-child(2).up {
    transform: rotate(270deg);
}
#board>div:last-child.down, #board>div:nth-child(2).down {
    transform: rotate(90deg);
}
#board>span {
    position:absolute;
    width:10px;
    height:10px;
    background:url(apple.png);
    box-sizing: border-box;
}
#board.fail {
    border-color:red;
}

#buttons {
    padding: 10px;
    display:flex;
    justify-content:space-evenly;
}
#buttons>input {
    border:0px;
    padding:5px 20px;
    background-color:#a7cf5f;
    border:1px solid #70863e;
    color:#59772f;
}
#buttons>input:disabled {
    background-color: #b3b3b3;
    color:#686868;
}