main.css

@import url(http://fonts.googleapis.com/css?family=Amatic+SC);
 div,
header,
footer,
section,
span,
a,
li,
ul {
    display: block;
    vertical-align: baseline;
    margin: 0;
    outline: none;
}
a {
    font-style: none;
    text-decoration: none;
    outline: none;
    color: inherit;
}
body {
    width: 100%;
    height: 100%;
    font-family: Helvetica;
    color: #545454;
    margin: 0;
    text-align: center;
    overflow-x: hidden;
    background-image: url(images/1.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
#logo {
    font-family: 'Amatic SC', cursive;
    color: lightgray;
    margin: 0 auto;
    font-size: 60px;
    text-shadow: 2px 2px 5px #999;
}
.canvas {
    height: 100%;
    padding: 10px 0;
    display: block;
    z-index: 1001;
}
#cannotPlay {
    display: none;
}
.frame {
    margin: 0px auto 20px auto;
    display: table;
    border: solid 10px white;
    -webkit-box-shadow: 0 0 10px 1px #333;
    -moz-box-shadow: 0 0 10px 1px #333;
    box-shadow: 0 0 10px 1px #333;
}
footer {
    padding-bottom: 10px;
    font-size: 12px;
    color: lightgray;
}
/* --------------- media queries start here ---------- */

@media (min-width: 150px) and (max-width: 800px) {
    #cannotPlay {
        height: 100%;
        padding: 0 10px;
        display: block;
        color: red;
        font-weight: 900;
        text-shadow: 0 0 30px #FFF, 0 0 30px #FFF;
    }
    .frame {
        display: none;
    }
}