@media screen and (max-width: 1060px){
    .container {
        width: 90%; 
    }
    .half_container { /* provides a two column presentation */
      width: 80%;
      float: none;
      margin-left: auto;
      margin-right: auto; 
    }
    
    ul#menu li a.button {
	/* this padding defines the size of the buttons */
	padding: 20px 40px 20px 40px;
    }
    
    iframe{
        width: 100%;
    }
    #history img{
        width: 90%;
        height: auto;
    }
    #author img{
        width: 90%;
        height: auto;
    }
    #title-page{
        width: 100%;
        padding-top: 300px; /* provides a lot of space above title to view the background image */
	padding-bottom: 40px;
    }
    #splash{
        height: auto;
        background-size: 1060px;
    }
    #title-page h1{
	font-size: 50px;
    }
	p {
		font-size: 1em; 
	}
}

@media screen and (max-width: 767px){
    
    ul#menu li a.button {
	/* this padding defines the size of the buttons */
	padding: 20px 12px 20px 12px;
    }
    
    img{
        width: 100%;
        height: auto;
    }
    #footer img {
        width: 100px;
    }
    
    #title-page{
        width: 100%;
        padding-top: 200px; /* provides a lot of space above title to view the background image */
    }
    #splash{
        background-size: 767px;
    }
    #title-page h1{
        font-size: 30px;
    }
}

@media screen and (max-width: 480px){
    
    ul#menu li a.button {
	/* this padding defines the size of the buttons */
	padding: 20px 4px 20px 4px;
    }
    
    #title-page{
        width: 100%;
        padding-top: 150px; /* provides a lot of space above title to view the background image */
	padding-bottom: 10px;
    }
    #splash{
        background-size: 520px;
    }
    #title-page h1{
	font-size: 25px;
	padding-bottom: 10px;
	height: auto;
    }
    

}