body 
		{
		color:black;  /*text color*/
		background-image: linear-gradient(to bottom right,MistyRose,Moccasin,Lavender,Plum);
		font-family:"Segoe Print";
		font-size:12pt;
		}

	.logo{				/* controls the logo */
		transform: skewY(5deg);
		background-color:Thistle;	
		border-radius:10px;
		padding:12px 12px 12px 12px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 30%;
		}
		
		p{
		font-size:20px;
		}
		
	nav ul{				/* makes adjustments to the navigation - ul only */
		border: 1px solid black;
		margin-left:20px;
		margin-right:20px;
		margin-bottom:5px;
		padding:5px;
		border-radius:25px;
		background-color:Thistle;
		width:250px;
		}
						
	.flexbox{
		display:flex;	/* creates a flex container */
		flex-wrap:wrap;	/* wraps the content on the screen */
		justify-content:space-around;  /*creates space around the individual boxes */
		}
				
	.flexbox li{		/* controls the li in the flexbox */
		width:155px;	/*creates the width of the flexbox */
		background-image:linear-gradient(to bottom right,#FFCCCC,Lavender,PeachPuff);
		border:5px solid Thistle;
		box-shadow:10px 20px 30px gray;
		border-radius:10px;		/*rounds the corners of the border */
		margin-left:10px;
		margin-right:10px;
		margin-bottom:15px;
		padding-left:18px;
		padding-right:12px;
		padding-bottom:2px;
		padding-top:8px;
		list-style-type: none;  /*turns off the bullet points */
		}

	
			
	.leftjustify{  /* left justify the table headers and data */
		text-align:left;
		border:none;
		}

	.border{     /*  adds a outline border to the table  */
		border-top: 3px solid black;
		border-bottom: 3px solid black;
		border-left:3px solid black;
		border-right:3px solid black;
		}
		
	.centerbutton{    /* centers the reset and submit buttons  */
		text-align:center;
		}
	
	table,th,td{    /* styles the table headers and data cells  */
		padding-left:10px;
		padding-right:10px;
		padding-top:5px;
		padding-bottom:5px;
		border: 1px solid black;
		border-collapse:collapse;
		background-color:Thistle;
		text-align:center;
		margin-left:200px;
		margin-right:100px;
		}
		
	.layoutformat{
		background-image:linear-gradient(to bottom right,#FFCCCC,Lavender,PeachPuff);
		border:5px solid Thistle;
		box-shadow:10px 20px 30px gray;
		border-radius:10px;	 /*rounds the corners of the border */
		padding:15px;
		width:150px;		
		}	
		
@media only screen and (max-width:700px) /* if screen width is less than 700 px */
	{
		main{
			float:left;
			font-size:12px;
			display: block;
			margin-right: auto;
			width: 100%;
			}	
				
			
		nav ul{
			width:auto;
			}
			
		nav li{   			/* makes navigation buttons on the list */
			padding: 30px;
			border: 2px solid black;
			background-color:white;
			font-size:20px;
			text-align:center;
			margin:10px 5px 10px 5px;
			list-style-type: none;  /*turns off the bullet points */
			border-radius:10px;
			}
				
		.flexbox{
				width:400px;	/* sets the flexbox width */
				}
				
		.flexbox li{	/* sets the layout of the flexbox list */
			width:155px;
			background-image:linear-gradient(to bottom right,#FFCCCC,Lavender,PeachPuff);
			border:5px solid Thistle;
			box-shadow:10px 20px 30px gray;
			border-radius:10px;	/*rounds the corners of the border */
			margin-left:3px;
			margin-right:3px;
			margin-bottom:15px;
			padding-left:6px;
			padding-right:2px;
			padding-bottom:3px;
			padding-top:15px;
			list-style-type: none;  /*turns off the bullet points */
			}
	}
		
@media only screen and (min-width:700px) and (max-width:999px)/* if screen width between 700 to 999 px */
	{
		nav {		/* controls the navigation pane */
			float:left;
			display:block;
			font-size:15px;
			width:auto;
			}
 
		nav a:hover{		/* psuedo class to highlight when mouse hovers over navigation button */
			font-size:17px;
			color:DarkCyan;
			}
			
		nav li{   			/* make buttons for the list */
			padding:5px;
			border: 2px solid black;
			background-color:white;
			font-size:12px;
			text-align:center;
			margin:5px 5px 5px 5px;
			list-style-type: none;  /*turns off the bullet points */
			border-radius:10px;
			}

		main{
			font-size:15px;
			padding-left:15px;
			margin-left:150px;
			}
	
		.flexbox{
			width:450px;
			}

		.flexbox li{
			width:155px;
			background-image:linear-gradient(to bottom right,#FFCCCC,Lavender,PeachPuff);
			border:5px solid Thistle;
			box-shadow:10px 20px 30px gray;
			border-radius:10px;	/*rounds the corners of the border */
			margin-left:10px;
			margin-right:10px;
			margin-bottom:15px;
			padding-left:15px;
			padding-right:15px;
			padding-bottom:15px;
			padding-top:15px;
			list-style-type: none;  /*turns off the bullet points */
			}
	}

@media only screen and (min-width:1000px) /* if screen width >= 1000 px */
	{
		.wrapper{  /* wrapper only works for the large screen -  designs the outside border of the screen */
			width:1000px;   /* width should be less than 1024px */
			margin:auto;
			background-image:linear-gradient(to bottom right,LightSkyBlue,LightSteelBlue);
			border:5px solid Thistle;
			box-shadow:30px 50px 30px gray;
			border-radius:20px;	/*rounds the corners of the border*/
			padding-bottom:90px;
			padding-left:50px;
			padding-right:50px;
			padding-top:10px;
			}
			
		nav li{   			/* make buttons on the list */
			padding:5px;
			border: 2px solid black;
			background-color:white;
			font-size:12px;
			text-align:center;
			margin:5px 5px 5px 5px;
			list-style-type: none;  /*turns off the bullet points */
			border-radius:10px;
			}
 
		nav {
			float:left;
			display:block;
			font-size:15px;
			width:auto;
			}
 
		nav a:hover{    /* psuedo class to highlight when mouse hovers over navigation button */
			font-size:17px;
			color:DarkCyan;
			}
			  
		main{			/* sets the layout in <main> */
			font-size:15px;
			padding-left:15px;
			margin-left:60px;
			}
				
		.flexbox li{
			width:155px;
			background-image:linear-gradient(to bottom right,#FFCCCC, Lavender,PeachPuff);
			border:5px solid Thistle;
			box-shadow:10px 20px 30px gray;
			border-radius:10px;	/*rounds the corners of the border */
			margin-left:10px;
			margin-right:10px;
			margin-bottom:15px;
			padding-left:18px;
			padding-right:12px;
			padding-bottom:2px;
			padding-top:8px;
			list-style-type: none;  /*turns off the bullet points */
			}
	}