* {
	box-sizing: border-box;
}

body {
	color: white;
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 40px;
	color: #a5714b;
}

p {
	line-height: 1.75;
}

section:not(#home) {
	margin: 50px 0;
}

img:not(.small-pic) {
	border-radius: 10px;
	box-shadow: 0 5px 30px white;
}

/*Navigation Side Bar*/
.sidebar {
	margin: 0;
	padding: 0;
	width: 200px;
	background-color: white;
	overflow: auto;
	position: fixed;
	text-align: center;
}

.sidebar a {
	display: block;
	color: #a5714b;
	padding: 20px 24px;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
	letter-spacing: 1.5px;
}

.sidebar a:hover {
	background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://i.postimg.cc/yN0hk1JH/paws-Nbones.png");
	color: #a5714b;
	font-size: 23px;
	padding: 24px;
}

.sidebar a:hover:not(.active) {
	background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://i.postimg.cc/yN0hk1JH/paws-Nbones.png");
	color: white;
}

.sidebar .icon {
	display: none;
}

.small-pic {
	margin-bottom: 0px;
}

/*Main Content*/
#main {
	background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://i.postimg.cc/yN0hk1JH/paws-Nbones.png");
	background-size: contain;
	margin-left: 200px;
	margin-top: -30px;
	padding: 12px 30px;
}

#home {
	text-align: center;
	padding: 32px 0;
}

#home p {
	line-height: 1.75;
}

.dog-container h1 {
	float: left;
	padding-left: 15px;
}

.dog-img1 {
	float: left;
	width: 50%;
}

.dog-description1 {
	float: left;
	width: 50%;
	text-align: justify;
	padding-left: 20px;
}

.dog-container2 h1 {
	float: left;
	padding-right: 15px;
}

.dog-img2 {
	float: right;
	width: 40%;
}

.dog-description2 {
	float: right;
	width: 60%;
	text-align: justify;
	padding-right: 20px;
	padding-top: 10px;
}

#more,
#continue,
#extra {
	display: none;
}

.read-more-btn {
	background-color: white;
	color: #a5714b;
	font-weight: bold;
	font-size: 12px;
	border-radius: 4px;
}

.clear {
	clear: both;
	display: block;
}

/*Footer*/
footer {	
	font-size: 15px;
	color: burlywood;
	text-align: center;
	padding: 32px 0;
	font-weight: bold;	
}

.footer {
	background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://i.postimg.cc/85d4khkX/Paw-Print-and-Heart-Infinity.png");
	background-size: contain;
}

.footer h2 {
	font-size: 18px;
}

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

.footer p {
	font-size: 12px;
}

/*Media Queries*/
@media screen and (max-width: 600px) {
	.topnav a:not(:first-child) {
		display: none;
	}
	.topnav a.icon {
		float: right;
		display: block;
		color: white;
		font-size: 18px;
	}
	.sidebar img {
		display: none;
	}
}

@media screen and (max-width: 600px) {
	.topnav.responsive {
		position: relative;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
		color: white;
	}
	.topnav.responsive a:not(:first-child):hover {
		font-size: 18px;
	}
	.topnav.responsive a:hover {
		float: none;
		display: block;
		text-align: left;
		font-size: 18px;
	}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 18px;
		color: white;
	}
	.topnav.responsive .icon:hover {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 18px;
		color: white;
	}
}

@media screen and (max-width: 865px) {
	.dog-container p {
		text-align: justify;
		margin-top: 10px;
	}
	.dog-description1 {
		width: 100%;
		text-align: left;
	}
	.dog-container2 h1 {
		float: right;
	}
	.dog-container2 p {
		text-align: justify;
		margin-top: 10px;
	}
	.dog-description2 {
		width: 100%;
		text-align: left;
	}
}

@media screen and (max-width: 900px) {
	p {
		line-height: 2;
		padding: 0 10px;
	}
	h1 {
		text-align: center;
	}
	.sidebar {
		width: 100%;
		height: auto;
		background-image: linear-gradient(rgba(174, 18, 19, 0.9), rgba(0, 0, 0, 0.9)), url("https://i.postimg.cc/Kc9D8crN/paw_heart.png");
		position: relative;
	}
	.sidebar a {
		float: left;
		color: white;
		font-size: 13px;
	}
	.sidebar a:hover {
		background-image: none;
		background-color: linear-gradient(rgba(174, 18, 19, 0.9), rgba(0, 0, 0, 0.9));
		color: burlywood;
		font-size: 18px;
	}
	.sidebar a:hover:not(.active) {
		background-image: none;
		background-color: linear-gradient(rgba(174, 18, 19, 0.9), rgba(0, 0, 0, 0.9));
		color: burlywood;
		font-size: 18px;
	}
	.small-pic {
		display: none;
	}
	#main {
		background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url("https://i.postimg.cc/Kc9D8crN/art-clipart-print-1.png");
		margin-left: 0;
	}
	#topBtn {
		background-color: white;
		color: #ae1213;
		font-size: 25px;
		font-weight: 900;
		border-radius: 5px;
		box-shadow: 0px 3px 10px 1px #ae1213;
		display: none;
		position: fixed;
		bottom: 20px;
		left: 3px;
		cursor: pointer;
		letter-spacing: 2px;
		z-index: 99;
	}
	#topBtn:hover {
		background-color: #ae1213;
		color: white;
		box-shadow: 0px 3px 10px 1px white;
	}
}