* {
    padding: 0;
    margin: 0;
}
.outer {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
h1 {
    text-align: center;
    display: block;
    margin-bottom: 15px;
    background: repeating-radial-gradient(rgb(4, 253, 4), rgb(0, 241, 241) 10%, rgb(255, 0, 0) 30%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: inherit;
}
.control {
    height: 45px;
    width: 840px;
    margin-left: 200px;
}
.control>div {
    float: left;
}
.start,
.stop,
.restart,
.speed,.slow,.speed1 {
    border-radius: 4px;
    padding: 5px;
    margin-right: 35px;
    background-color: blueviolet;
    color: bisque;
    cursor: pointer;
}
span.first {
    color: blue;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 25px;
}
span.score {
    color: cyan;
    font-size: 25px;
}
#map {
    width: 1200px;
    height: 600px;
    position: relative;
    /* background-color: rgb(255, 177, 131); */
    /* margin: 0 auto; */
    /* left: 200px; */
}
#outer-map {
    position: absolute;
    left:0px;
    top: 102px;
    width: 1200px;
    height: 600px;
}
#outer-map>div {
    height: 20px;
    width: 20px;
    box-sizing: border-box;
    border: 0.5px solid whitesmoke;
    float: left;
}
.gray {
    background-color: gray;
}
.back {
    position: absolute;
    z-index: -1;
    width: 1200px;
    height: 600px;
    /* left: 100px; */
}
img {
    height: 600px;
    width: 600px;
}
span.sp {
    color: greenyellow;
}