.tile {
    border: 0px solid #ffffff;
    position: absolute;
    height: 30px;
    width: 30px;
}

.tile:hover {
    border: 1px solid #d50000;
    box-sizing: border-box;
}

.tile-0 {
    background-color: #ffffff;
}

.tile-wa {
    background-color: #52270e;
}

.tile-ft {
    background-image: url("../assets/bananas.jpg");
    background-size: cover;
}

.tile-gr {
    background-color: #a7a7a7;
}

.tile-pi {
    background-color: #000000;
}

.tile-bl {
    background-color: #df9712;
}

.tile-b1 {
    background-color: #f8ba47;
}

.tile-fs {
    background-image: url("../assets/firestation2.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-to {
    background-image: url("../assets/townhall.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-po {
    background-image: url("../assets/postoffice.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-sc {
    background-image: url("../assets/elementaryschool.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-fa {
    background-image: url("../assets/factory.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-gs {
    background-image: url("../assets/gasstation2.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-ho {
    background-image: url("../assets/hospital.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-li {
    background-image: url("../assets/library.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-on {
    background-image: url("../assets/onsen.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-sh {
    background-image: url("../assets/shrine.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-su {
    background-image: url("../assets/sushi.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-ps {
    background-image: url("../assets/policestation.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-fo {
    background-image: url("../assets/forkspoon3.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-ch {
    background-image: url("../assets/cityhall.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-mu {
    background-image: url("../assets/museum.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-ko {
    background-image: url("../assets/koban.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-sm {
    background-image: url("../assets/supermarket.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-at {
    background-image: url("../assets/atm.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-hs {
    background-image: url("../assets/highschool.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-hl {
    background-image: url("../assets/hotel.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-fm {
    background-image: url("../assets/familystore.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-ae {
    background-image: url("../assets/shopping.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-7e {
    background-image: url("../assets/11eleven.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-la {
    background-image: url("../assets/coffeestation.png");
    background-size: cover;
    border: white 3px solid;
    box-sizing: border-box;
}

.tile-fsg {
    background-image: url("../assets/firestation2.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-tog {
    background-image: url("../assets/townhall.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-pog {
    background-image: url("../assets/postoffice.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-scg {
    background-image: url("../assets/elementaryschool.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-fag {
    background-image: url("../assets/factory.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-gsg {
    background-image: url("../assets/gasstation2.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-hog {
    background-image: url("../assets/hospital.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-lig {
    background-image: url("../assets/library.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-ong {
    background-image: url("../assets/onsen.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-shg {
    background-image: url("../assets/shrine.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-sug {
    background-image: url("../assets/sushi.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-psg {
    background-image: url("../assets/policestation.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-fog {
    background-image: url("../assets/forkspoon3.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-chg {
    background-image: url("../assets/cityhall.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-mug {
    background-image: url("../assets/museum.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-kog {
    background-image: url("../assets/koban.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-smg {
    background-image: url("../assets/supermarket.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-atg {
    background-image: url("../assets/atm.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-hsg {
    background-image: url("../assets/highschool.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-hlg {
    background-image: url("../assets/hotel.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-fmg {
    background-image: url("../assets/familystore.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-aeg {
    background-image: url("../assets/shopping.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-7eg {
    background-image: url("../assets/11eleven.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-lag {
    background-image: url("../assets/coffeestation.png");
    background-size: cover;
    border: red 3px solid;
    box-sizing: border-box;
}

.tile-st {
    background-color: #2e7d32;
    animation: blinker 2s linear infinite;
    background: #2e7d32;
    color: rgb(14, 78, 5);
    width: 30px;
    font-weight: bold;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.tile-f {
    background-color: #b71c1c;
}

.tilemap {
    width: 50px;
    height: 50px;
}