body 
		{
		color:black;  /*text color*/
		background-image: linear-gradient(to bottom right,#736CFF,#66C48F);
		font-family:"Segoe Print";
		font-size:12pt;
		}


		.logo{
			background-color:white;	
			border-radius:10px;
			padding:12px 12px 12px 12px;
			display: block;
			margin-left: auto;
			margin-right: auto;
			width: 50%;
			
			}
		nav ul{
			border: 1px solid black;
			margin-left:20px;
			margin-right:20px;
			margin-bottom:5px;
			padding:5px;
			border-radius:25px;
			background-color:lightgreen;
			}
						
	.flexbox{
				display:flex;	/* creates a flex container */
				flex-wrap:wrap;
				justify-content:space-around;
				}
				
	.flexbox li{
			width:155px;
			background-image:linear-gradient(to bottom right,#88E899,#EAFDC0);
			border:5px solid green;
			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 */
			}

		.gridbox_nav{
		display:grid;
		grid-template-columns:100%;
		grid-template-rows: 20% 20% 20% 20% 20% 20%;
		border-radius:30px;
		margin-right:35px;
		}
	
	
		.gridbox{
		display:grid;
		grid-template-columns:30% 30% 30%;
		grid-template-rows:33% 33% 33%;
		column-gap:10px;
		grid-row-gap:20px;
		padding-left:5px;
		}
		
		
		

	.layoutformat{
		background-image:linear-gradient(to bottom right,#88E899,#EAFDC0);
		border:5px solid green;
		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{
			display: block;
			margin-left: auto;
			margin-right: auto;
			width: 100%;
			}	
			
			nav li{   			/* make buttons on the list */
			padding: 30px;
			border: 2px solid black;
			background-color:white;
			font-size:15px;
			text-align:center;
			margin:10px 5px 10px 5px;
			list-style-type: none;  /*turns off the bullet points */
			border-radius:10px;
			}
		
		
		.flexbox{
				width:400px;
				}
				
		.flexbox li{
			width:155px;
			background-image:linear-gradient(to bottom right,#88E899,#EAFDC0);
			border:5px solid green;
			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 {
			float:left;
			display:block;
			font-size:15px;
			width:auto;
			}
 
		nav a:hover{
			font-size:17px;
			color:DarkCyan;
			}
			
		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;
			}

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

		.flexbox li{
			width:155px;
			background-image:linear-gradient(to bottom right,#88E899,#EAFDC0);
			border:5px solid green;
			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{
			width:1000px;
			margin:auto;
			background-image:linear-gradient(to bottom right,#59D0CE,#C2FCCC);
			border:10px solid green;
			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{
			font-size:17px;
			color:DarkCyan;
			}
			  
		main{
			font-size:15px;
			padding-left:15px;
			margin-left:60px;
			}
		
		
		.flexbox li{
			width:155px;
			background-image:linear-gradient(to bottom right,#88E899,#EAFDC0);
			border:5px solid green;
			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 */
			}
}