html, body {
	height: 100%;
} 

body {
	background-image: url(../images/background-pattern-design-31.png);
	background-color: #ffffff; 
	font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
	font-size: 18px;
	color: #0c6e25;
}

.crystal-pic {
    width: 125px;
    cursor: pointer;
}

#game-title {
    font-family: 'Georgia', Times, Times New Roman, serif;
    background-color: #a86518;
    color: #ffffff;
    max-width: 100%;
    margin: 6px auto auto 6px;
}

#game-rules {
    font-family: 'Georgia', Times, Times New Roman, serif;
    font-size: 16px;
    font-weight: bold;
    background-color: #f3ece5;
    max-width: 100%;
    margin: 6px auto auto 6px;
}

#random-number {
    font-family: 'Georgia', Times, Times New Roman, serif;
    font-size: 28px;
    background-color: #069e64;
    color: #21145a;
    height: 140px;
    margin: 6px;
}

#running-score {
    font-family: 'Georgia', Times, Times New Roman, serif;
    font-size: 22px;
    background-color: #28c6e2;
    color: #10069c;
    margin: 6px;
}

#total-score-display {
    font-family: 'Georgia', Times, Times New Roman, serif;
    font-size: 28px;
    background-color: #05595f;
    color: #ffffff;
    max-width: 100%;
    margin: 6px auto auto 6px;
}

#score-display {
    font-family: 'Georgia', Times, Times New Roman, serif;
    font-size: 32px;
    background-color: #05595f;
    color: #ffffff;
    max-width: 100%;
    margin: 6px auto auto 6px;
    height: 60px;
}

footer {
    height: 50px;
    width: 20%;   
    background: #a86518;
    border: 3px solid #4aaaa5;
    color: white;
    text-align: center;
    margin: 60px auto auto 1px;
    }

.footer-copyright {
    font-size: 16px;
    color: #ffffff;
    } 


/* device responsive media queries */

@media screen and (max-width: 1190px) {
	.container {
	 	max-width: 1150px;
    }
    footer {
        height: 50px;
        width: 25%;   
        margin: 50px auto auto 1px;
        }
}

@media screen and (max-width: 980px) {
	.container {
	 	max-width: 940px;
    }
    footer {
        height: 50px;
        width: 40%;   
        margin: 50px auto auto 1px;
        }
}

@media screen and (max-width: 768px) {
    .container {
        max-width: 750px;
    }
    footer {
        height: 50px;
        width: 60%;   
        margin: 50px auto auto 1px;
        }
}

@media screen and (max-width: 640px) {
	.container {
		max-width: 600px;
    }
    #random-number {
        height: 70px;
    }
    #running-score {
        font-size: 26px;
    }
    footer {
        height: 50px;
        width: 70%;   
        margin: 50px auto auto 1px;
    }
    .crystal-pic {
        width: 125px;
        cursor: pointer;
    }
}