:root{
    --scale:2;
    --sprite: url('images/sprite.png');
    --image-rendering: pixelated;
    --cursor: default;
}

body{
    background: white;
    color:black;
    text-align: center;
}

.window{
    background-color: #c2c2c2;
    width: fit-content;
    margin: auto;;
}

#field
{
    display: grid;
    grid-template-columns: repeat(10, calc(16px * var(--scale)));
    grid-template-rows: repeat(10, calc(16px * var(--scale)));
    gap: 0px;
    width: fit-content;
}

.smiley{
    cursor: var(--cursor);
    border:none;
    width: calc(26px * var(--scale));
    height: calc(26px * var(--scale));
    background-size: calc(144px * var(--scale)) auto; /* width of your sprite sheet */
    background-image: var(--sprite);
    background-repeat: no-repeat;
    background-position: calc(0px * var(--scale)) calc(-55px * var(--scale));
    image-rendering: var(--image-rendering);
}

/*when mine is pressed change smile to shocked*/
.smiley:active{
    background-position: calc(-26px * var(--scale)) calc(-55px * var(--scale));
}
.smiley.shocked{
    background-position: calc(-52px * var(--scale)) calc(-55px * var(--scale));
}
.smiley.win{
    background-position: calc(-104px * var(--scale)) calc(-55px * var(--scale));
}
.smiley.dead{
    background-position: calc(-78px * var(--scale)) calc(-55px * var(--scale));
}

/* forced pressed state (used by JS) */
.smiley.pressed{
    background-position: calc(-26px * var(--scale)) calc(-55px * var(--scale));
}

.mine{
    border:none;
    flex-wrap: 1;
    width: calc(16px * var(--scale));
    height: calc(16px * var(--scale));
    background-size: calc(144px * var(--scale)) auto; /* width of your sprite sheet */
    background-image: var(--sprite);
    background-repeat: no-repeat;
    background-position: calc(0px * var(--scale)) calc(-39px * var(--scale));
    image-rendering: var(--image-rendering);
    cursor: var(--cursor);
}

.mine:active{
    background-position: calc(0px * var(--scale)) calc(-23px * var(--scale));
}
.mine.empty{
    background-position: calc(0px * var(--scale)) calc(-23px * var(--scale));
    cursor: default;
}

.mine.flagged{
    background-position: calc(-16px * var(--scale)) calc(-39px * var(--scale));
    cursor:default;
}
.mine.hit{
    background-position: calc(-32px * var(--scale)) calc(-39px * var(--scale));
    cursor: default;
}
.mine.falseflag{
    background-position: calc(-48px * var(--scale)) calc(-39px * var(--scale));
    cursor: default;
}
.mine.revealed{
    background-position: calc(-64px * var(--scale)) calc(-39px * var(--scale));
    cursor: default;
}

.mine.number1{
    background-position: calc(-16px * var(--scale)) calc(-23px * var(--scale));
    cursor: default;
}
.mine.number2{
    background-position: calc(-32px * var(--scale)) calc(-23px * var(--scale));
    cursor: default;
}
.mine.number3{
    background-position: calc(-48px * var(--scale)) calc(-23px * var(--scale));
    cursor: default;
}
.mine.number4{
    background-position: calc(-64px * var(--scale)) calc(-23px * var(--scale));
    cursor: default;
}
.mine.number5{
    background-position: calc(-80px * var(--scale)) calc(-23px * var(--scale));
    cursor: default;
}
.mine.number6{
    background-position: calc(-96px * var(--scale)) calc(-23px * var(--scale));
    cursor: default;
}
.mine.number7{
    background-position: calc(-112px * var(--scale)) calc(-23px * var(--scale));
    cursor: default;
}
.mine.number8{
    background-position: calc(-128px * var(--scale)) calc(-23px * var(--scale));
    cursor: default;
}
.top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(5px * var(--scale));
    background-color: #c2c2c2;
    border-bottom: calc(2px * var(--scale)) solid #808080;
}
.display{
    background-color: black;
    width: min-content;
    display: flex;
}
.display div{
    width: calc(13px * var(--scale));
    height: calc(23px * var(--scale));
    background-size: calc(144px * var(--scale)) auto; /* width of your sprite sheet */
    background-image: var(--sprite);
    image-rendering: var(--image-rendering);
    background-repeat: no-repeat;
    background-position: calc(0px * var(--scale)) calc(0px * var(--scale));
}
.display .number0{
    background-position: calc(0px * var(--scale)) calc(0px * var(--scale));
}
.display .number1{
    background-position: calc(-13px * var(--scale)) calc(0px * var(--scale));
}
.display .number2{
    background-position: calc(-26px * var(--scale)) calc(0px * var(--scale));
}
.display .number3{
    background-position: calc(-39px * var(--scale)) calc(0px * var(--scale));
}
.display .number4{
    background-position: calc(-52px * var(--scale)) calc(0px * var(--scale));
}
.display .number5{
    background-position: calc(-65px * var(--scale)) calc(0px * var(--scale));
}
.display .number6{
    background-position: calc(-78px * var(--scale)) calc(0px * var(--scale));
}
.display .number7{
    background-position: calc(-91px * var(--scale)) calc(0px * var(--scale));
}
.display .number8{
    background-position: calc(-104px * var(--scale)) calc(0px * var(--scale));
}
.display .number9{
    background-position: calc(-117px * var(--scale)) calc(0px * var(--scale));
}
.display .numberNegative{
    background-position: calc(-130px * var(--scale)) calc(0px * var(--scale));
}