:root {
--main-bg-color: #bfc8b2;
--deem-color: #9da591;
--dark-color: #000000;
--food-color: #555;
--pixel-size: 0.6em;
--pixel-border-size: 0.2em;
--pixel-size:calc((100vmin) / 32);
}
@font-face {
    font-family: 'Digit';
    src: url('digit.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  

body{
    background-color: var(--main-bg-color);
    font-family: Digit;
    margin: 0;
    padding: 2em;
    display: flex;
    overflow: hidden;
}
div {
    float: left;
}
span {
    border: var(--pixel-border-size) solid var(--main-bg-color);
    outline: var(--pixel-border-size) solid var(--deem-color);
    background-color: var(--deem-color);
    content: " ";
    display: block;
    width: var(--pixel-size);
    height: var(--pixel-size);
    margin: 0.15em;
}
.active {
    outline-color: var(--dark-color);
    background-color: var(--dark-color);
}
.food {
    outline-color: var(--food-color);
    background-color: var(--food-color);
}
table {
    background-color: var(--main-bg-color);
    border: .1em solid;
}

[panel-div]{
    display: none;
}

#gamepanel{
    margin: auto;
}


.scorediv,.leveldiv,.scoretext,.leveltext{
    font-size:5vmin;
    position: absolute;
    right: 10vmin;
    top:5vmin;
}

.scorediv,.leveldiv{
    right: 2vmin;
}

.scorediv,.scoretext{
    top:10vmin;
}

*{
    box-sizing: border-box;
}