/*
Author:  Student name
Date: 2022-01-12
File Name: styles.css
*/

/* CSS reset to make firefox and chrome look the same
   since they have different defaults on these items.
   Include at the top of the first css file to reset these values to 
   be the same for them.  Use the below body, header and things
*/
/* responsive add ul to the list of reset */
body, header, nav, main, footer, h1, div, img, ul, li, figure, figcaption, 
sections, 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 rule for box sizing and applies to all elements */

* {
	box-sizing: border-box;
}


/* Style rules for moble viewport */

/* Style rule for header */
header {
	
	/* -webkit- is needed for some browers so you need both of the positions */
	/* comment out the sticky stuff for grid
	position: -webkit-sticky;
	position: sticky;   */
	top: 0;
	background-color: #000;
	height: 190px;
	
	/*  old original header items
	width: 25%;
	float: left;
	*/
}

header img {
	margin: 0 auto;
}
	
/* style rule for hamburger menu for mobile */
.mobile-nav a {
	color: #fff;
	font-family: 'Francois One', sans-serif;
	text-align: center;
	font-size: 2em;
	text-decoration: none;
	padding: 3%;
	display: block;
}	

	/*  I left out .mobile-nav now */
a.menu-icon {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
}
  
	
	/* comment out nav and nav ul instead of cutting them out
	   this is in chapter 10  move to line 262 or later
    Style rule for navigation area 
nav {
	
	padding: 1%;
	margin-bottom: 1%;
	
	 commented out the original one
	float: right;
	margin: 5em 3em 0 0 ;
	width: 70%;
	
}
	

nav ul {
	list-style-type: none;
	 comment out margin line for responsive
	margin: 0;
	
	 change text-align to be center instead of right 
	text-align: center;
}

*/

/*  commented out in chapter 10 instead of deleted
nav li {
	/* comment out display: inline-block 
	display: inline-block;  
	/* comment out old font-family and change to above
	font-family: Verdana, Arial, sans-serif; 
	/* comment out font-weight for responsive 
	font-weight: bold; 
	/* add border-top for responsive 
	border-top: 1px solid #fff;
}
*/

/*  commented out instead of delete in chapter 10 
nav li a {
	display: block;
	color: #fff;
	 for responsive remove text align center 
	text-align: center;  
	padding: 0.5em 1em;
	text-decoration: none;
}

*/

video {
	margin: 0 auto 4%;
}


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

.tablet-desktop, #menu-links {
	display: none;
}


/* to remove the top border line use the below  & then deleted in chapter 10
nav li:first-child {
	border-top: none;
}

*/

/* Style rule for main content */
main {
	/* removed clear and changed font size
	clear: left; */
	background-color: #fff;
	padding: 2%;
	font-size: 1.15em;
	/* add below from google font family */
	font-family: 'Roboto Slab', serif;
}

.mobile h3 {
	text-shadow: 5px 5px 8px #ccc;
}

/* added in chapter 7 */

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


/* end of added in chapter 7 */

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

/* added for chapter 7 */
.frame {
	position: relative;
	max-width: 450px;
	font-weight: bold;
}

.pic-text {
	position: absolute;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5); 
	color: #fff;
	/* it had width 100% but it was too big i changed to 90% */
	width: 100%;
	padding: 20px;
	text-align: center;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
}
	

/* end of add for chapter 7 */

#weights, #cardio, #training {
	/* comment out the width and float for responsive
	width: 29%;
	float: left;   */
	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: 2px solid #000;
	width: 95%;
	height: 50%;
}


/* added in chapter 8 forms */
#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;
}

/* i added below question font-size as it was too big.  Need to try it on a cell phone */
form #questions {
	font-size: 0.65em;
}



/* Style rule 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 viewport */

@media screen and (min-width: 630px), print {
	
	/* tablet viewport: show tablet-desktop class, hide mo ile class */
	.tablet-desktop {
		display: block;
	}
	
	.mobile, .mobile-nav {
		display: none;
	}


	/* tablet viewport: style for header */
	header {
		/* removed position static chapter 7 
		position: static;  */
		padding-bottom: 2%;
	}
	
	/* tablet Viewport: style rules for nav area */
	
	
    /* Style rule for navigation area */
    nav {
	
	    padding: 1%;
	    margin-bottom: 1%;
	
	/* commented out the original one
	float: right;
	margin: 5em 3em 0 0 ;
	width: 70%;  */
	
    }
	

    nav ul {
	    list-style-type: none;
	    /*  comment out margin line for responsive
	    margin: 0;
	
	     change text-align to be center instead of right */
	    text-align: center;
    }	
	
	nav li {
	    font-size: 1.5em;
	    font-family: 'Francois One', sans-serif;
		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;
		display: block;
	    color: #fff; 
	    text-decoration: none;

	}
	

	/* Tablet Viewport: style rules for main context area */
	
	main ul {
		margin: 0 0 4% 10%
	}

/* added chapter 7 for .grid  */
	.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;
		border-bottom: 1px solid #000;
		/* background doesn't work give css error comment out
		background: linear-gradient (to right, #ccc, #fff); */
	    background-color: #f2f2f2;  
		padding: 1% 2%;
	}

	#exercises dt {
		font-weight: bold;
	}

	#exercises dd {
		padding: 0.5% 1% 2% 0%;
	}
		
	.viewex {
		font-weight: bold;
		cursor: pointer;
	}
	/* the curor: pointer change for arrow to a hand pointer */

	#example {
		display: none;
	}
	
	
	.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;
	}

	td {
		font-size: 1em;
	}

	/* table viewport: style rule for form elements */

	form {
		width: 70%;
		margin: 0 auto;
	}
	
	form #questions {
		font-size: 1.0em;
	}
	
	/* tablet viewport: animation chapter 10 added 01-16-2022 */
	@-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;
		-webkit-animation-delay: 3s;
		animation-delay: 3s;
		-webkit-animation-duration: 5s;
		animation-duration: 5s;
	}
	
}

/* media query for Desktop Viewport */
/* changed to 1015px from 769px */

@media screen and (min-width: 1015px), print {
	
	header {
		width: 25%;
		float: left;
		padding-bottom: 0;
	}
	
	nav {
		float: right;
		width: 70%;
		margin: 4em 1em 0 0;
	}
	
	nav ul {
		text-align: right;
	}
	
	nav li {
		border: none;
		font-size: 1.2em; 
	}
	
	nav li a {
		padding: 0.5em 1em;
	}
	
	nav li a:hover {
		color: #000;
		background-color: #fff;
		/* added transform chapter 10, on 01-16-2022 */
		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;
	}
	
	.pic-text {
		font-size: 1.5em;
		padding: 20px;
	}
	
	.frame {
		opacity: 0.9;
	}
	
	.frame:hover {
		opacity: 1;
		box-shadow: 8px 8px 10px #808080;
		/* added transform chapter 10 - 01-16-2022 */
		transform: translateY(10px);
	}
		
	
	
	#weights, #cardio, #training {
		width: 29%;
		float: left;
		margin: 0 2%;
	}
	
	#exercises {
		clear: left;
		
	}
	
	/* Desktop viewport: style rules for form elements */
	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 Desktop Viewports */

@media screen and (min-width: 1921px) {
	
	#container {
		width: 1920px;
		margin: 0 auto;
	}
	
	table {
		width: 80%;
	}
	
	nav li {
		font-size: 1.5em; 
	}		
	
}


/* Media Query for printer */
@media print {
	
	
	body {
		background-color: #fff;
		color: #000;
	}
	
}