/* 
Author Logan hejda
Date 9/11/2025
file name: styles.css
*/

/*css reset*/
body, header, nav, main, footer, h1, div, img, ul, figure, figcaption, section, article, aside, audio, video {
	margin: 0;
	padding: 0;
	border: 0; 
}

/*style rules for body and images*/
	body{
			background-color: #000;
	}

	img,video {
			max-width: 100%;
			display: block;
	}

/*style rules for box sizing applies to all elements8*/
	*{ 
		box-sizing:border-box;
	}

/*style rules for moblie veiwport*/

/* style rule for header*/
	header{
			top: 0;
			background-color: #000;
			height: 190px
	}

	header img {
		margin: 0 auto;
}

/* style riles for navigation area */
	nav {
			padding: 1%;
			margin-bottom: 1%;
	}

	Nav ul {
			list-style-type: none;
			text-align: center;
	}

	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; 
	}

/* show moblie class, hide tablet class */
.mobile {
	display: block;
}

.tablet-desktop {
	display:none;
}

/*style riles for main content*/
main {
			background-color: #fff; 
			padding: 2%;
			font-size: 1.15em; 
			font-family: 'roboto Slab', serif;
}

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;
	}
	
	.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: 8px solid #000;
			width: 95%;
			height: 50%;
	}
	
	#form {
		margin-top:2%;
		background-color:#f2f2f2;
		padding:2%
	}
	
	#form h2 {
		text-align:center;
	}
	
	/* style rules fir 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;
			border: none;
			display:block;
			padding:2%;
			background-color: #b3b3b3;
			font-size: 1em;
			border-radius: 10px;
		}
			
	
/* style rules for footer content*/
footer p { 
			font-size: 0.75em;
			text-align: center;
			color: #fff;
			padding: 0 1em;
}

footer p a {
				color: #fff;
				text-decoration: none;
} 

/* media query for tablet veiwport*/
 @media screen and (min-width: 630px), print {

			/* tablet veiwport:show tablet-desktop class,hudr mobile*/
				.tablet-desktop {
					display: block;
			}
			  
				.mobile {
					display: none;
			}
	 
		/*tablet viewport: style rule for header*/
		header {	
				padding-bottom: 2%;
		}

		/* tablet  viewport: style rules for nav area */
		nav li {
				border-top: none;
				display: inline-block;
				border-right: 1px solid #ffff;
		}
		
			nav li:last-child {
				border-right: none;
		}
		
			nav li a {
					padding: 0.1em 0.75em;
		}

	/* tablet viewport: style rules for main conrnet*/
		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;
	}

	 #exercises {
				border-top: 1px solid #000;
				background: linear-gradient (to right, #ccc, #fff);
				border-bottom: 1px solid #000;
				background-color: #f2f2f2;
				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;
		 }

			/* Tablet Viewport: 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 veiwport: style rule for form element*/
		form {
			width:70%;
			margin:0 auto;
		}
		
 }
 
 /* media query for desktop veiwport*/
  @media screen and (min-width: 1015px),print {
 
	 /*  media query for desktop viewport */
	 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;
				}
				
				nav li a {
						padding: 0.5em 1em;			
				}
				
					nav li a:hover {
							color: #000;
							background-color: #fff;
					}
 
 /* destop viewport: style rules for ,main content*/
	main {
		clear: left;
	}
	
		main h1 {
			font-size: 1.8em;
		}
		
		article h3 {
			font-size: 1.75em;
		}
		
		.pic-text {
			font-size: 1.5em;
			padding: 20px;
		}
		
		.frame {
			opacity: 0.9;
		}
		
		.frame:hover {
			opacity: 1;
			box-shadow: 8px 8px 10px #808080;
		}
		
	#weights, #cardio, #training {
			width: 29%;
			float: left;
			margin: 0 2%;
	}
	
		#exercises {
			clear: left;
		}
		
		/* desktop viewport: style rules for from emements */
			form  {
				width: auto;
			}
			
				
				.from-grid {
				display: grid;
				grid-template-columns: auto auto auto;
				grid-gap: 20px;
				}
				
				
				.btn {
					grid-column: 1 / span 3;
				}
  
  }
  
 /* media query for large desktop veiwport */
 @media screen and (min-width: 1921px) {
	
		#container {
			width: 1920px;
			margin: 0 auto;
		}
		
		table {
			width: 80%;
		}

}

/* media quert for print*/
@media print {
	
	body {
		background-color: #fff;
		color: #0000;
	}
	
	
}