* {
    margin: 0;
    padding: 0;
}

body {
    background: #ffe699;
}

canvas {
    display: block;
    margin: 40px auto 20px;
    border: 1px solid #990033;
    box-shadow: 0 0 16px 2px rgba(0,0,0,0.8);
    border-radius: 29px;
    margin-top:80px;
}

#upball {
    width: 70px;
    height: 62px;
    margin-left: 68px;
    
    cursor:pointer;
}

#leftball {
    margin-top: 30px;
    width: 76px;
    height: 54px;
    margin-left: 504px;
    cursor: pointer;
}

#rightball {
    width: 72px;
    height: 63px;
    margin-left: 64px;
    cursor: pointer;
}

.popup {
    background: url(../image/WinPopup.png);
    height: 349px;
    position: absolute;
    top: 102px;
    left: 505px;
}

.losepopup {
    background: url(../image/WinPopup.png);
    height: 349px;
    position: absolute;
    top: 102px;
    left: 505px;
}

.losemsg {
    margin-top: 106px;
    position: absolute;
    left: 483px;
    color: white;
    font-weight: bold;
    font-family: monospace;
    font-size: 26px;
}

.winmsg {
    margin-top: 106px;
    position: absolute;
    left: 488px;
    color: white;
    font-weight: bold;
    font-family: monospace;
    font-size: 19px;
}

.restart {
    margin-top: 230px;
    position: absolute;
    left: 611px;
    color: black;
    font-weight: bold;
    font-family: monospace;
    font-size: 23px;
    cursor: pointer;
    border-radius: 14px;
    box-shadow: 9px 10px burlywood;
    padding:5px;
}

.sound {
    width: 50px;
    height: 50px;
    margin-top: -65px;
    margin-left: 559px;
    cursor: pointer;
    position: absolute;
}

.restartgame {
    width: 40px;
    height: 40px;
    position: absolute;
    cursor: pointer;
    margin-top: -57px;
    margin-left: 746px;
}

p, a {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 19px;
    color: #777;
    display: block;
    width: 400px;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
}

.info {
    margin: 14px auto;
    text-align: justify;
    font-size: 18px;
    color: #999;
}

a {
    color: #3377ee;
}

@media screen and (max-width:1000px) {
    #leftball {
        margin-left: 21px;
        margin-top: 35px;
    }

    #upball {
        margin-left: 40px;
    }

    #rightball {
        margin-left: 41px;
    }

    canvas {
        height: 416px;
        margin-top: 140px;
        width: 334px;
    }

    .popup {
        left: -10px;
        top: 163px;
    }

    .losepopup {
        left: -10px;
        top: 163px;
    }

    .losemsg {
        left: -26px;
        top: 161px;
    }

    .winmsg {
        left: -27px;
        top: 161px;
    }

    .restart {
        left: 89px;
        top: 151px;
        font-size: 26px;
    }

    .sound {
        margin-left: 71px;
        margin-top: -84px;
    }

    .restartgame {
        margin-left: 229px;
        margin-top: -77px;
    }
}