body {
    background-color: papayawhip;
}

.gameboard {
    position: relative;
    width: 500px;
    left: -50px;
    margin: 100px auto;
}

.brick {
    width: 100px;
    height: 100px;
    position: absolute;
    background-image: url('image.png');
    background-size: 400px;
}

.number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgb(255, 255, 255);
    font-size: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000;
    opacity: 1;
    transition: opacity ease-in-out 1s;
    user-select: none;
    pointer-events: none;
}

.hidden {
    opacity: 0;
}

.brick1 {
    background-position: 0px 0px;
}
.brick2 {
    background-position: -100px 0px;
}
.brick3 {
    background-position: -200px 0px;
}
.brick4 {
    background-position: -300px 0px;
}

.brick5 {
    background-position: 0px -100px;
}
.brick6 {
    background-position: -100px -100px;
}
.brick7 {
    background-position: -200px -100px;
}
.brick8 {
    background-position: -300px -100px;
}

.brick9 {
    background-position: 0px -200px;
}
.brick10 {
    background-position: -100px -200px;
}
.brick11 {
    background-position: -200px -200px;
}
.brick12 {
    background-position: -300px -200px;
}

.brick13 {
    background-position: 0px -300px;
}
.brick14 {
    background-position: -100px -300px;
}
.brick15 {
    background-position: -200px -300px;
}
.brick16 {
    background-position: -300px -300px;
    z-index: -1;
    transition: top ease-in-out 1s, left ease-in-out 1s;
}