#game {
    background-color: lightgray;
}
.field {
    margin: 40px auto;
    padding: 0px;
    /* border: 1px solid black; */
    width: 385px;
    cursor: pointer;
}
.container {
    width: 300px;
    height: 100px;
    margin: 0px auto;
    text-align: center;
    display: flex;
    background-color: white;
}
.container .tile {
    width: 100px;
    /* border: 1px solid black; */
}
div[data-index="1"] {
    background: url("../images/hotei-g-pattern.webp") no-repeat top center;
}
div[data-index="2"] {
    background: url("../images/hotei-g-pattern.webp") no-repeat top right;
}
div[data-index="3"] {
    background: url("../images/hotei-g-pattern.webp") no-repeat center left;
}
div[data-index="4"] {
    background: url("../images/hotei-g-pattern.webp") no-repeat center center;
}
div[data-index="5"] {
    background: url("../images/hotei-g-pattern.webp") no-repeat center right;
}
div[data-index="6"] {
    background: url("../images/hotei-g-pattern.webp") no-repeat bottom left;
}
div[data-index="7"] {
    background: url("../images/hotei-g-pattern.webp") no-repeat bottom center;
}
div[data-index="8"] {
    background: url("../images/hotei-g-pattern.webp") no-repeat bottom right;
}
h1{
    text-align: center;
}
#timer{
    font-size: 40px;
    text-align: center;
    color: red;
    margin: 0px;
}

@media screen and (max-width: 640px) {
    body{
        margin: 0;
    }
    h1{
        font-size: 20px;
    }
  }