body {
    background: lightpink;
    overflow:hidden;
}

* {
    padding: 0px;
    margin: 0;
}

canvas {
    /*font-family:'Global Monospace';*/
    /*background: navajowhite;*/
    display: block;
    margin: 56px auto;
}

.startmsg {
    position: absolute;
    margin-top: -321px;
    margin-left: 464px;
    font-size: 28px;
    color: red;
    font-family: monospace;
}

.winmsg {
    position: absolute;
    margin-top: -289px;
    margin-left: 629px;
    font-family: monospace;
    color: black;
    font-size: 23px;
}

.losemsg {
    position: absolute;
    margin-top: -254px;
    margin-left: 617px;
    font-family: monospace;
    color: black;
    font-size: 23px;
}

.star {
    position: absolute;
    margin-top: -248px;
    margin-left: 628px;
    width: 93px;
    height: 56px;
}

.winpopup {
    position: absolute;
    margin-top: -325px;
    margin-left: 576px;
    width: 207px;
}

.losepopup {
    position: absolute;
    margin-top: -325px;
    margin-left: 576px;
    width: 207px;
}

.reset {
    position: absolute;
    margin-left: 620px;
    font-size: 21px;
    margin-top: -185px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: monospace;
}

@media screen and (max-width:1000px) {
    canvas {
        margin-top: -41px;
    }

    .startmsg {
        margin-left: 166px;
    }

    .reset {
        margin-left: 351px;
    }

    .losepopup {
        margin-left: 309px;
    }

    .winpopup {
        margin-left: 307px;
    }

    .winmsg {
        margin-left: 355px;
    }

    .losemsg {
        margin-left: 347px;
    }

    .star {
        margin-left: 357px;
    }
}