.background {
	background-image: url("../images/administration-american-architecture.jpg");
	background-size: auto;
    background-repeat: no-repeat;
	background-color: #0044b3;    
}
h1{
	font-family: "Lobster", serif;;
	color:#BF0A30;
	font-size: 120px;
	margin-top:20px;
	margin-bottom:15px;
}

.button {
    background-color: #0044b3;
    border: double;
    color: white;
    padding: 7px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    cursor:pointer;
  }

.start{
    color: #ffffff;
    margin-top:140px;   
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 50px;
}
#random-state {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 70px;
    color: #BF0A30;
    letter-spacing: 5px;
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 50px;
    font-weight: bolder;
    white-space: pre;
}

#sound {
	margin-top: 20px;
}

.stats{
	background-color: #0044b3;
	padding:50px;
}

.stats-middle{
    background-color: #002868;
	padding:50px;
}

#wins, #losses, #guesses, #letters {
	color: #ffffff;
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}

footer {
    height: 50px;
    width: 15%;
    background: #0044b3;
    border: 2px solid #BF0A30;
    color: white;
    text-align: center;
    margin: 70px auto;
    }

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


/* device responsive media queries */

@media screen and (max-width: 980px) {
	.container {
	 	max-width: 940px;
    }

    #random-state {
        color: #ffffff;
        letter-spacing: 2px;
    }

    footer {
        height: 50px;
        width: 40%;
        margin: 30px auto;
        }
}   

@media screen and (max-width: 768px) {
    .container {
        max-width: 750px;
    }

    #random-state {
        color: #ffffff;
        letter-spacing: 2px;
    }

    .stats{
        background-color: #0044b3;
        padding:10px;
    }
    
    .stats-middle{
        background-color: #002868;
        padding:10px;
    }

    footer {
        height: 50px;
        width: 50%;
        background: #0044b3;
        border: 2px solid #BF0A30;
        color: white;
        text-align: center;
        margin: 50px auto;
        }
    
    .footer-copyright {
        font-size: 16px;
        color: #ffffff;
        } 
}

@media screen and (max-width: 640px) {
	.container {
		max-width: 600px;
    }
    .background {
        background-blend-mode: multiply; 
    }
    h1{
        font-size:60px;
    }
    #wins, #losses, #guesses, #letters, #random-state {
    	text-align: left;
    }
    .start{
        margin-top:40px;   
        font-size: 40px;
    }
    .stats{
        background-color: #0044b3;
        padding:10px;
    }
    .stats-middle{
        background-color: #002868;
        padding:10px;
        font-size: 10px;
    }
    #random-state {
        margin-top: 20px; 
        margin-bottom: 40px; 
        letter-spacing: normal;
        color: #ffffff;
        font-size: 30px;
        text-align: center;
    }

    footer {
        height: 50px;
        width: auto;
        background: #0044b3;
        border: 2px solid #BF0A30;
        color: white;
        text-align: center;
        margin: 70px auto;
        }
    
    .footer-copyright {
        font-size: 16px;
        color: #ffffff;
        } 
}