/*

Final Project
Author: Martin Anchondo
Date: 05/05/2023

*/

/* The astrix applied the box-sizing declaration univerally to all elements in CSS page */
* { box-sizing: border-box; }

/*Formats linear gradient for website*/
html,body {	
	height:100%;
	background-image: linear-gradient(#F6F6F1,#FFFFFF);
	background-repeat:no-repeat;}
	
/*removes hyperlinks from title of page, centers, removes navigation hyperlinks  */
h1 {text-align:center;}	
h1 a { 
  text-decoration: none;
}
nav li {display:inline;padding:.5em;}
nav ul{text-align:center;}
nav a {text-decoration:none ; 
}

/*displays the color of the link*/
a:link {
	color:#000000;
} 
/*Displays color of already clicked links*/
a:visited{
	color:#000000;
}
/*Displays color when hovering over it*/
a:hover {
	color:#38ADA9;
}

.center {
	margin: auto;
	width: 50%;
	border: 3px solid white;
	text-align:center;}

/*Created a separate navigation area for blog topics  */	
.blognav {
	margin: auto;
	width: 100%;
	border: 3px solid #38ADA9;
	text-align:center;
	color:white;
	background-color:#38ADA9;
	word-spacing:2em;
	font-size:1em;
	font-weight:bold;
	}
	
/*Changed color of hyperlinks found in blognav for anchor hovor and active elements   */	
.blognav a{color:white;text-decoration:none;}
.blognav a:hover{color:black;}
.blognav a:active{color:#38ADA9;}


	
/*Fixed footer to bottom of web pages  */	
.footer {
	position:fixed; bottom:0; width:100%; background-color: #38ADA9; text-align:center; clear:both; display:block;
}

.clear{width:100%;height:5em;background-color:transparent;}

.centeronly{text-align:center}



/*Created relative and absolute classes to help add elements to picure such as site map or titled banner  */
.relative{position:relative}
.absolute{
	position:static; font-size:1em;
	background-color:white;opacity:.8;
	color:black;
}

/*Can delete this and use the relative one  */
.imagemap{position:absolute;}


/*Created container to show center of pages when needed  */
.centeredcontainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color:white;
}

/*helped me center table  */
.table {
	margin-left: auto;
	margin-right:auto;
}

/*Left blank for mobile view, changed for media quarries  */
#mygrid{}
#topnav{}
#blog2{}


/*helped me center images  */
img{
	display:block;
	margin-left:auto;
	margin-right:auto;
	width:50%
}

/*Form will display as flex when in mobile view  */
form { 
	display: flex;
	flex-flow: column nowrap; }
input, datalist textarea { margin-bottom: .5em; }


/*Will help display regular in mobile view  */
.blog1{}
.blog2{}


/*helped center blogs with 80percent width on page  */
.blogpost{
	margin-left:auto;
	margin-right:auto;
	clear:both;
	width:80%;
	text-align:center;}

/*displays figcaption a bit smaller in mobile view  */
@media (max-width:600px){
	figcaption {font-size:.75em}
}

/*displays form as grid for better viewing in bigger screens  */
@media (min-width:600px){
	form {
		display:grid; 
		grid-gap:1em; 
		max-width:40em;
		width:60%;
		grid-template-columns:9em 1fr;
		grid-template-rows:auto;}
	input[type="submit"] {
		grid-column: 2 / 3; width: 9em;
		margin-left: 0; }
	
}

/*Displays banner on about me section on picture  */
@media (min-width:820px){
	.absolute{
	position:absolute;
	top:20%;
	left:50%;
	transform: translate(-50%, -50%);
	background-color:white;opacity:.8;
	color:black;}
}

/*Chanages the navigation to transition to the left side of title  */
@media (min-width:1020px){
	#topnav{display:flex; align-items:center}
	#beach{ }
	h1{flex:.75;order:2;}
	nav{order:1;}
	nav li{padding-left:1em;display:inline;}
	h1{
		justify-content:center;}	
	form {margin-left:80px;}
	
	/*displays side banner  */
	.blog1{
		float:left; 
		width:20%;
		border:solid;
		padding-right:20px;
		background-color:transparent;}
		
	/*displays direction of text on bigger screens  */	
	.blog2{
		direction:ltr;
		text-align:center;
		width:80%;}
		
		/*This is a repeat added bigger text  */
	.absolute{
		position:absolute;
		top:20%;
		left:50%;
		transform: translate(-50%, -50%);
		background-color:white;opacity:.8;
		color:black;
		font-size:1.25em;}
}