/* @general */
body { /* load font style */
    font-family: 'Press Start 2P', cursive, Fallback, sans-serif;
}
canvas { /* centers the canvas */
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
/* @mobile */
#on-mobile{ /* sets up apology div for mobile users to be displayed via media query */
    color: white;
    text-align: center;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
/* @layout */
#instructions { /* instructions */
    margin: auto;
    margin-right: 15px;
    display: block;
    position: absolute;
    width: 300px;
    height: 300px;
    right: 77%;
    top: 12%;
    color:white;
    text-align: center;
}
#game-title {   /* centers h1 title text */
    color: white;
    position: absolute;
}

/* @buttons, button style, button hover, button-div */
#button-div {   /* button position */
    margin: auto;
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 82%;
    top: 15%;
}

#button{    /* button style */
    font-family: 'Press Start 2P', cursive, Fallback, sans-serif;
    color: white;
    background-color: black;
    border-radius: 10px, 10px, 10px, 10px;
    border-width: 0 0 3px;
    border-style: none;
    cursor: pointer;
}

#button:hover { /* creates border on hover */
    border: 1px solid;
    border-width: 5px;
    border-color: white;
}
/* @mediaqueries */
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
    #game-title{
        font-size: 1.5em;
        left: 33%;
    }
    canvas, #button-div, #instructions {
        display: none;
    }
    #on-mobile {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        font-size: 1.2em;
        left:10%;
    }
}
@media only screen and (min-width:1025px) {
    canvas { /* centers the canvas */
        padding: 0;
        margin: auto;
        display: block;
        width: 800px;
        height: 600px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 6%;
    }
    #on-mobile{
        display:none;
    }
    /* @layout */
    #instructions { /* instructions */
        margin: auto;
        margin-right: 15px;
        display: block;
        position: absolute;
        width: 300px;
        height: 300px;
        right: 76%;
        top: 20%;
        color:white;
        text-align: center;
        font-size: 0.7em;
        }
    #game-title {   /* centers h1 title text */
        color: white;
        position: absolute;
        left: 40%;
    }
    /* @buttons, button style, button hover, button-div */
    #button-div {   /* button position */
        margin: auto;
        display: block;
        position: absolute;
        width: 100px;
        height: 100px;
        left: 86%;
        top: 23%;
    }
    #button{    /* button style */
        font-family: 'Press Start 2P', cursive, Fallback, sans-serif;
        color: white;
        background-color: black;
        border-radius: 10px, 10px, 10px, 10px;
        border-width: 0 0 3px;
        border-style: none;
        cursor: pointer;
    }
    #button:hover { /* creates border on hover */
        border: 1px solid;
        border-width: 5px;
        border-color: white;
    }
}