/*
Name: Tyler Avirett
File name: Css.css
Date: 11/20/22 */

/* CSS Reset */

body, header, main, footer, h1, h2, h3, h4, p, div, img section, article, aside, figure, figcaption{
  margin: 0;
  padding: 0;
  border: 0;
}


																										
/* Header style*/
header{
  font-family: Arial, Lato, Tahoma, sans-serif;
  color:black;
  background-image: url('https://www.wallpapers4u.org/wp-content/uploads/background_leaf_light_bright_colors_18449_1920x1080.jpg');
  background-repeat: no-repeat;
  width: 100%;
  height: 10%;
}

.background {
	background-image: url('https://static.vecteezy.com/system/resources/previews/000/664/710/original/vector-abstract-technology-background-hi-tech-communication-digital-background.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
/* Main Style */
.iframe {
  color: white;
  text-align: center;
  border-style: outset;
  border-color: white;
}
main {
  font-family: Arial, Lato, Tahoma, sans-serif;
  font-size: 1em;
}
.textbox {
  color: white;
  text-align: left;
  text-shadow: 2px 2px 2px black, 0 0 1em blue, 0 0 0.2em yellow;
  font-size: 105%;
  border-width: .25em;
  border-style:hidden;
  border-color: white;
  display:grid;
  grid-template-columns: auto;
  border-radius: 5%;
  width: 100%;
}
.list {
	margin-left: 0em;
	margin-right: 0em;
	width: 100%;
}

/*Media Query*/


@media screen and (min-width: 280px) {
 
  nav li a:link {color:black;}
  nav li a:visited {color:rgb(0, 4, 87);}
  nav li a:hover {color:rgb(7, 107, 2);}
  nav li a:active {color:darkcyan;}
}

/* nav style*/
.navbar {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-image: linear-gradient(to bottom right, darkgray, white);
}

.brand-title {
	font-size: 1.5rem;
	margin: .5rem;
}
.navbar-links ul {
	margin: 0;
	padding: 1rem;
	display: flex;
	font-size: 1.5em;
}

.navbar-links li {
	list-style: none;
	
}

.navbar-links li a {
	text-decoration: none;
	padding: 1rem;
	display: block;


}
.toggle-button {
	position: absolute;
	top: .75rem;
	right: 1rem;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 21px;
}

	.toggle-button .bar {
		height: 3px;
		width: 100%;
		background-color: black;
		border-radius: 10px;
		
	}
@media (max-width: 490px) {

	.toggle-button {
		display: flex;
	}

	.navbar-links {
		display: none;
		width: 100%;
	}

	.navbar {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.navbar-links ul {
		width: 100%;
		flex-direction: column;
	}

	.navbar-links li {
		text-align: center;
	}

		.navbar-links li a {
			padding: .5rem 1rem;
		}

	.navbar-links.active {
		display: flex;
	}

	.iframe2 {
		height: 600px;
		width: 430px;
	}

	.textbox {
		width: 80%;
	}

	td {
		font-size: 70%;
	}

	iframe {
		width: 400px;
	}

	.headerPicture {
		height: 30%;
		width: 30%;
	}
	.headerPicture2 {
		height: 26%;
		width: 26%;
	}
}


	

#Puppies {
  padding: 3em 3em;
  border-radius: 60%;
  height: 20%;
  width: 20%;
  max-height: 100%;

}
#Personal {
  padding: 3em 3em;
  border-radius: 40%;
  height: 20%;
  width: 18%;
  max-height: 100%;
  top: -12em;
}

/* Footer style */
footer img{
  border-radius: 10%;
}