*{box-sizing:border-box;}

body{padding:0.625em 6em 0.625em 6em;}

header{text-align:center;
      background-color:#2E5E64;
      color:#FFFFFF;
	  }
	  /*^^ it is design for the header in all the pages    */

header a{text-decoration:none;}
header a:link{color:#FFFFFF;}
header a:visited{color:#FFFFFF;}  
header a:hover{color:#97BCC1;}
   /* ^^ when the link is pressed/hover it turns this color   */
#wrapper{
		background-color: #89C5CD;
        background-image: linear-gradient(to bottom,#FFFFFF,#89C5CD);
		background-repeat: no-repeat;}
nav{
  font-size:135%;
  font-weight:bold;
  padding:0;
  text-align:center;
}
/*design for the navigation */ 

nav a{
  text-decoration:none;
}
nav ul{list-style-type:none;
		padding-left:0;
	}




nav a:link{color:#2E5E64;}
nav a:hover{color:#97BCC1;}
nav a:visited{color:#00A9C7;} /*design of the links of the navigation  */

main{
	display:block;
	padding-top:0.0625em;
	padding-right:1.25em;
	padding-left:1.25em;
	padding-bottom:1.25em;
	overflow:auto;
}
/*the overflow lets it have the scroll bar if the information doesn't fit on the screen */ 

main p{float:left;}




#monacohero{
	height:90%;
	background-image: url(monaco.jpg);
	background-size:90% 90%;
	background-repeat:no-repeat;
}
/*picture on the first page */ 

h1{margin-bottom:none;
	}

footer{text-align:center;
    	font-style: italic;
  		font-size: 75%;
  		font-family: Georgia,"Times New Roman",serif;
  		padding: 2em;
    	}

form{display:grid;
	grid-gap:1em;
	grid-template-column:6em 1fr;
	grid-template-rows:auto;
	width:60%}
	
input[type="submit"] {grid-column:2/3;
						width: 9em;} /*design of the button */ 
h3{
	text-align:center;}

#center{
	text-align:center;}
h4{
	font-weight:normal;}

img{
	width:55%;
	height:45%;
}
#lyleshero{
	height:80%;
	background-image: url(lyles.jpg);
	background-size:55% 55%;
	background-repeat:no-repeat;
}
/* picture on the world championships page */
#milehero{
	height: 85%;
	background-image: url(preClassic.jpg);
	background-size:85% 85%;
	background-repeat:no-repeat;
}
/*picture of Jakob and Yared on the mile page */

table{
	border:2px solid #000000;
	
}  /*adds the border around the table */
td,th{
	padding:0.5em;
	border:2px solid#000000;
}  /*adds the lines on the table */ 
td{
	text-align:center;}
	
.text{text-align:left;}

iframe{float:right;
	   padding:left 20px;}



@media(min-width:600px) { /*media query for devices bigger than a phone. about tablet size */  
		nav ul{
			display:flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-around;
			text-align:center;
		}
		nav li{
			border-bottom: none;
		}
		.content main{display:grid;
					  grid-template-rows:auto;
					  grid-template-columns:1fr 1fr 1fr;
		}					  

		h2{
			grid-row:1/2;
			grid-column: 1/5;

		}

		footer{grid-row: auto;  
			   grid-column: 1/5;}
		
		
		
		input[type="submit"] {grid-column:2/3;
								width: 10em;}
		main{overflow:auto;}

}


@media (min-width:1024px){ /*media query for devices bigger than a tablet like a laptop. */ 
		nav ul{display:flex;
				flex-flow: column;
				padding-top:1em;
		}
		
		#wrapper{
				margin:auto;
				width:80%;
				border:1px solid #333333;
				display:grid;
				grid-template-rows: auto;
				grid-template-columns: 190px auto;
		}
		header {
			grid-row: 1/2; 
			grid-column: 1/3;
		}

		nav {grid-row:2/5; 
			grid-column: 1/2;}

		div {grid-row: 2/3; 
			grid-column: 2/3; }

		main {grid-row: 2/3; 
			  grid-column: 2/3;
			  overflow:hidden;}

		footer{grid-row: 4/5;
			   grid-column: 2/3;}
		
		.content main{display:grid;
					  grid-template-rows:auto;
					  grid-template-columns:1fr 1fr 1fr;
					  }
					  

		h2{
			grid-row: 1/2; 
			grid-column: 1/5;
		}
		

		footer{grid-row: auto;
			   grid-column: 1/5;}


}