body {background-color: skyblue;
	background-image: radial-gradient(white,skyblue);
	background-repeat: no-repeat;
	font-family: arial, sans-serif;
	font-size: 18px;}

#subheading {background-color: rebeccapurple;
		color: white;}

.logo {display: block;
			margin: auto;
			padding-top: 50px;}

main {margin: 25px;}

	li {display: flex;
			background-color: white;
			border-style: solid;
			border-color: black;
			border-radius: 25px;
			width: 100%;
			padding-left: 20px;
			padding-right: 20px;
			margin-left: 20px;
			margin-right: 20px;}

#gallery {display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: space-around;
					row-gap: 10px;
					column-gap: 10px;}

.photo {border-style: solid;
			border-color: black;
			border-width: 5px;
			border-radius: 25px;}

			#gridnav {display: grid;
							grid-template-columns: 100%;
							grid-template-rows: 10%;}

			#gridmain {display: grid;
							grid-template-columns: 220px 220px 220px;
							grid-template-rows: 170px 170px;
							row-gap: 20px;
							}

a:link {color: blue;
	text-decoration: none;}

a:visited {color: green;}

a:hover {color: navy;}

a:active {color: turquoise;}

@media (min-width: 1000px){
	body {background-color: skyblue;
		background-image: radial-gradient(white,skyblue);
		background-repeat: no-repeat;
		font-family: arial, sans-serif;
		font-size: 18px;
		margin-left: auto;
		margin-right: auto;
		width: 1225px;}

		ul {display: flex;
			flex-direction: column;
			align-items: center;
			row-gap: 10px;
			column-gap: 12px;
			list-style-type: none;
			font-size: 26px;
			margin-left: 0px;
			margin-right: 35px;}

		li {display: flex;
				background-color: white;
				border-style: solid;
				border-color: black;
				border-radius: 25px;
				width: 100%;}

				nav {float: left;
					margin-left: 25px;
					margin-right: 100px;
				}
}

@media (max-width: 999px){
				body {background-color: skyblue;
					background-image: radial-gradient(white,skyblue);
					background-repeat: no-repeat;
					font-family: arial, sans-serif;
					font-size: 18px;
					padding: 20px;}

				ul {display: flex;
					flex-direction: column;
					align-items: center;
					row-gap: 10px;
					column-gap: 12px;
					list-style-type: none;
					font-size: 26px;
					margin-left: 0px;
					margin-right: 35px;}

				li {display: flex;
						background-color: white;
						border-style: solid;
						border-color: black;
						border-radius: 25px;
						width: 100%;}

						nav {float: left;
							margin-left: 0px;
							margin-right: 0px;
						}

						main {margin-left: 40px;
									margin-right: 40px;}

				#gallery {display: flex;
									flex-direction: row;
									flex-wrap: wrap;
									justify-content: space-around;
									row-gap: 10px;
									column-gap: 20px;}
			}

@media (max-width: 700px){
				body {background-color: skyblue;
					background-image: radial-gradient(white,skyblue);
					background-repeat: no-repeat;
					font-family: arial, sans-serif;
					font-size: 18px;
					margin-left: 20px;
					margin-right: 20px;}

				ul {display: flex;
					flex-direction: column;
					align-items: center;
					row-gap: 10px;
					column-gap: 12px;
					list-style-type: none;
					font-size: 26px;
					margin-left: 25px;
					margin-right: 25px;
					padding-left: 20px;
					padding-right: 20px;}

					#gallery {display: flex;
										flex-direction: row;
										flex-wrap: wrap;
										row-gap: 10px;
										column-gap: 10px;}

					.logo {display: flex;
									align-items: center;
									margin: auto;
									space-around: 12px;}

					li {display: flex;
							background-color: white;
							border-style: solid;
							border-color: black;
							border-radius: 25px;
							width: 100%;
							padding-left: 80px;
							padding-right: 20px;
							margin-left: 20px;
							margin-right: 20px;}