/*
					Author: Greanlee Pike
					Datw: 9-12-24
					file name: styles.css
				*/
				
				*{
					margin: 0;
					padding: 0;
					border: 0;
				}
				
				
				body {
					background-color: #000;
				}
				
				img, video { 
					max-width: 100%;
					display: block;
				}
				
				/* style rule for box sizing, applies to all elements*/ 
				
				* {
					box-sizing: border-box;
				}
				
				
				/* style rules for mobile viewport */
				
				header {
					top: 0;
					background-color: #000;
					height: 190px;
				}
				
				header img {
					margin: 0 auto;
				}
				
				/*hamburger menue*/

				.mobile-nav a {
					color: #fff;
					font-family: 'Francois One', sans-serif;
					text-align: center;
					font-size: 2em;
					text-decoration: none;
					padding: 3%;
					display: block;
				}

				.mobile-nav a.menu-icon {
					display: block;
					position: absolute;
					right: 0;
					top: 0;
				}
				
		.mobile {
			display:block;
		}
				nav li {
					font-size: 1.5em;
					font-family: 'Francois One', sans-serif;
					border-top: 1px solid #fff; 
				}
				
				nav li:first-child {
					
					border-top: none;
				}

				nav li a {
					display: block;
					color: #fff;
					padding: 0.5em 1em;
					text-decoration: none;
				}
				
				nav li a:hover {
					color: #000;
					background-color: #fff;
				}
				
				
				.mobile { 
					display: block;
				}
				
				.tablet-desktop, #menu-links {
					display: none;
				}
				
				main {
					clear: left;
					background-color: #fff;
					padding: 2%;
					font-size: 1.15em;
					font-family: 'Roboto Slab' , seif;
				}
				
				video {
					margin: 0 auto 4%;
				}
				
				.mobile h3 {
					text-shadow: 5px 5px 8px #ccc;
				}
				
				article {
					padding: 2%;
				}
				
				article h3 {
					text-align: center;
				}
				
				article img{
					margin: 0 auto;
				}
				
				article ul {
					margin-left: 10%;
				}
				
				article:nth-of-type(2){
					background-color: rgba(204, 204, 204, 0.3);
				}
				
				
				.tel-link {
					background-color: #404040;
					padding: 2%;
					margin: 0 auto;
					width: 80%;
					text-align: center;
					border-radius: 5px;
				}
				
				.tel-link a {
					color: #fff;
					text-decoration: none;
					font-size: 1.5em;
					display: block;
				}
				
				.hours {
					margin-left: 10%;
				}
				
					
				
				.action {
					font-size: 1.35em;
					color: #666600;
					font-weight: bold;
					text-shadow: 5px 5px 8px #ccc;
				}
				
				.frame {
					position: relative;
					max-width: 450px;
					margin: 2% auto;
				}
				
				.pic-text {
					position: absolute;
					bottom: 0;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
					width: 100%;
					padding: 20px;
					text-align: center;
					font-family: Verdana, Arial, sans-serif;
					font-size: 1.5em;
					font-weight: bold;
				}
				
				
				#weights, #cardio, #training {
					margin: 0 2%;
				}
				
				.round{
					border-radius: 8px;
				}
				
				.map {
					border: 2px solid #000;
					width: 95%;
					height: 50%;
				}

				#form {
					margin-top: 2%;
					background-color: #f2f2f2;
					padding: 2%;
				}

				#form h2 {
					text-align: center;
				}

				/* style rules for form elements*/
				fieldset, input, select, textarea {
					margin-bottom: 2%;
				}
				fieldset legend {
					font-weight: bold;
					font-size: 1.25em;
				}
				label{
					display: block;
					padding-top: 3%;
				}

				form #submit {
					margin: 0 auto;
					border: none;
					display: block;
					padding: 2%;
					background-color: #b3b3b3;
					font-size: 1em;
					border-radius: 10px;
				}
				/* media query for tablet viewport */
				
		@media screen and (min-width: 630px), print {
				
					
				
				/* tablet viewpoint: show tablet-desktop class, hide mobile class */
				.tablet-desktop {
					display: block;
				}
				
				.mobile, .mobile-nav {
					display: none;
				}
				
		
				/* Tablet Viewport: Style rule for header */
				
				header {
					padding-bottom: 2%;
				}
				
				
				 /* Tablet Viewport: Style rules for nav area */
				
				 nav {
					padding: 1%;
					margin-bottom: 1%;
				 }

				 nav ul {
					list-style-type: none;
					text-align: center;
				 }
				nav li {
					font-size: 1.5em;
					border-top: none;
					display: inline-block;
					border-right: 1px solid #fff;
				}
				
				nav li:last-child {
					border-right: none;
				}
				nav li a {
					padding: 0.1em 0.75em;
				}
				
				 /* Tablet Viewport: Style rules for main content area */
				
				main ul {
					margin: 0 0 4% 10%;
				}
		
				.grid {
					display: grid;
					grid-template-columns: auto auto auto;
					grid-gap: 20px;
				}
				
				.pic-text {
					font-size: 1em;
					padding:10px;
				}
				
				aside {
					text-align: center;
					font-size: 1.25em;
					font-style: italic;
					font-weight: bold;
					padding: 2%;
					background-color: rgba(204, 204, 204, 0.5);
					box-shadow: 5px 5px 8px #000;
					text-shadow: 5px 5px 5px #b3b3b3;
					border-radius: 0 15px;
				}
				
				.grid-item4 {
					grid-column: 1 / span 3;
				}
				
				
				/*media query for tablet viewport*/
				

					
					#exercises {
						clear: left;
						border-top: 1px solid #000;
						background-color: #f2f2f2;
						background: linear-gradient(to right, #ccc, #fff);
						padding: 1% 2%;
					}
				
					#exercises dt {
					font-weight: bold;
					}
				
					#exercises dd {
					padding: 0.5% 1% 2% 0;
					}
					
					.tel-num {
						font-size: 1.25em;
					}
					
					.map {
						width: 600px;
						height: 450px;
					}

				/*tab style rules for table*/
					table {
						border: 1px solid #000;
						border-collapse: collapse;
						margin: 0 auto;
						width: 100%;
					}

					caption {
						font-size: 1.5em;
						font-weight: bold;
						padding: 1%;
					}

					th, td {
						border: 1px solid #000;
						padding: 2%;
					}

					th {
						background-color: #000;
						color: #fff;
						font-size: 1.15em;
					}

					tr:nth-child(odd) {
						background-color: #ccc;
					}

					/* tablet style for form element*/

					form {
						width: 70%;
						margin: 0 auto;
					}

					/*tab viewport animation*/
					@-webkit-keyframes text-animation {
						0% {font-size: 1em;}
						50% {font-size: 2em;}
						100% {font-size: 1.35em;}
					}

					@keyframes text-animation {
						0% {font-size: 1em;}
						50% {font-size: 2em;}
						100% {font-size: 1.35em;}
					}

					figcaption {
						-webkit-animation-name: text-animation;
						animation-name: text-animation;
						-webkit-animation-delay: 3s;
						animation-delay: 3s;
						animation-duration: 5s;
					}
		}
	
				/* Media Query for Desktop Viewport */
				
		@media screen and (min-width: 1015px), print {
					
				
				
				/* desktop viewport: style rule for header */
				
					header {
						
						width: 25%;
						float: left;
						padding-bottom: 0;
					}
					
					/* desktop viewport style rules for nav area*/
					
						nav {
							float: right;
							width: 70%;
							margin: 4em 1em 0 0;

						}
						
						nav ul {
							text-align: right;
						}
						
						nav li {
							border: none;
							background-color:black;
						}
						
						nav li a {
							padding: 0.5em 1em;
						}
						
						nav li a:hover {
							color: #000;
							background-color: #fff;
							transform: scale(1.3);
						}
				/* desktop viewport style rules for main content */
				
						main {
							clear: left;
						}
						
						main h1 {
						font-size: 1.8em;
						}
						
						article h3 {
							font-size: 1.75em;
						}
						
						
						#weights, #cardio, #training {
							width: 29%;
							float: left;
							margin: 0 2%;
						}
						
						.pic-text{
							font-size: 1.5em;
							padding: 20px;
						}
						
						.frame {
							opacity: 0.9;
						}
						
						.frame:hover {
							opacity: 1;
							box-shadow: 8px 8px 10px #808080;
							transform: translateY(10px);
						}
						
						#exercises {
							clear: left;
						}
						
						/*desktop rules for form shit*/

						form {
							width: auto;
						}
						.form-grid {
							display: grid;
							grid-template-columns: auto auto auto;
							grid-gap: 20px;
						}
						.btn {
							grid-column: 1/ span 3;
						}

				}
				
				
				/* media query for large destop viewports */
				
				@media screen and (min-width: 1921px) {
					
					#container {
						margin: 0 auto;
					}

					table {
						width: 80%;
					}
				}
				
				/* media query for print*/
				@media print {
					
						body {
							background-color: #fff;
						color: #000;
						}

				}
				
				
				
				
				.external-link {
					color: #666600;
					font-weight: bold;
					text-decoration: none;
				}
				
				#contact {
					text-align: center;
				}
				#contact .contact-email-link {
					color: #666600;
					text-decoration: none;
				}
				
				.map {
					border: 2px solid #000;
					width: 95%;
					height: 50%;
					
				}
				
				footer p {
					font-size: 0.75em;
					text-align: center;
					color: #fff;
					padding: 0 1em;
				}
				
				footer p a {
					color: #fff;
					text-decoration: none;
				}