@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
/*Desktop view ------------------------------------------------------------------*/
/* All pages Desktop Pages - This set of CSS applies to each page, for the CSS specific to each page find the comment for that page -----------------------------------------------------------*/
html *{
	border: 0;
	margin: 0;
}
.wrapper{
  width:90%;
  margin-right:auto;
  margin-left:auto;
  background-color:#FFFFFF;
}
img{
  width:100%;
  height:100%;
	background-color:lightgray;
}
header{
	grid-area: header;
  background-color:#8C786C;
  padding:25px 0px 10px 0px;
}
header a{
  text-decoration:none;
}
header h1{
  margin-left:25px;
  color:white;
  padding-bottom:25px;
  font-size:3em;
  font-family:'Luckiest Guy', cursive;
  font-weight:800;
}
nav{
	text-align: left;
	padding: 25px;
  background-color:#8C786C;
  border-top:solid thick #D9946C;
  /*border-bottom:solid thick #D9946C;*/
}

nav a{
	margin-right: 25px;
	padding-right: 10px;
	border-right: thick solid #D9946C;
  text-decoration:none;
  color:#FFFFFF;
  font-weight:bold;
  font-size:18pt;
  font-family:'Oswald', sans-serif;
   -webkit-transition: color 1s border-right 1s; /* Safari prior 6.1 */
  transition: color 1s border-right 1s;
}
nav a:hover{
  color:#594839;
  border-right: solid thick #D9946C;
}

p{
   font-size: 16pt;
  line-height: 120%;
}
h1, h2, h3{
  margin-bottom: 8px;
}

.socialMedia svg{
 margin-right: 50px;
}
.socialMedia{
  margin-top:10px;
  padding:5px 0px;
  text-align:center;
  margin-bottom: 20px;
  background-color:#8C786C;
  border-top:solid thick #594839;
  /*border-bottom:solid thin #BF1F3C;*/
}

footer{
  grid-area:footer;
  background-color:#8C786C;
  padding-top:0px;
  color:white;
}

footer p{
	margin-top: 15px;
  margin-left:25px;
}

/*Index CSS for Desktop View--------------------------------------------------------*/
.indexContainer{
	display:grid;
	grid-gap:25px;
	grid-template-areas:
		'header header'
		'text1 image1'
		'image2 image3'
		'text2 text3'
		'footer footer';
	overflow:hidden;
	align-content:center;
	justify-content:center;
}
.giftMessage{
	grid-area:text1;
	margin-left:25px;
}
.familyPet{
	grid-area:image1;
	margin:0px 25px;
}
.adoptImage{
	grid-area:image2;
	margin-left:25px;
}
.adoptPet{
	grid-area:text2;
	margin-left:25px;
}
.wishList{
	grid-area:text3;
	margin-right:25px;
}
.wishImage{
	grid-area:image3;
	margin-right:25px;
}
.giftMessage p{
line-height:150%;
}
/*Adopt Page CSS Desktop View ----------------------------------*/
.adoptContainer{
	display:grid;
	grid-gap:50px;
	grid-template-areas:
		'header header'
		'text1 image1'
		'image2 image3'
		'image4 text2'
		'footer footer';
	overflow:hidden;
}
.adoptableMessage{
	grid-area:text1;
	padding:0px 25px;
}
.image1{
	grid-area:image1;
	padding:0px 25px;
}
.image2{
	grid-area:image2;
	padding:0px 25px;
}
.image3{
	grid-area:image3;
	padding:0px 25px;
}
.image4{
	grid-area:image4;
	padding:0px 25px;
}
.adoptContainer h3{
	font-size:2.5em;
	margin:-17% 0% 0% 2%;
	color:white;
	text-shadow:1px 1px 1px black;
}
/*Wish List Page Desktop View -------------------*/
.wishContainer{
	display:grid;
	grid-gap:25px;
	grid-template-areas:
		'header header'
		'text image'
		'lists lists'
		'footer footer';
	overflow:hidden;
	justify-content:center;
	align-content:center;
	width:100%;
}
.wishMessage{
	grid-area:text;
	margin:0px 25px 0px 25px
}
.donateImage{
	grid-area:image;
	/*Clip created manually due to not being working with Edge/IE*/
	clip-path: inset(70px 0px 10px 0px);
	margin-top:-20%;
	margin-right:25px;
	overflow:hidden;
}
.lists{
	grid-area:lists;
	display:grid;
	grid-template-columns:.15fr .35fr .35fr .15fr;
	grid-gap:20px;
	margin-bottom:75px;
}
.list1{
grid-column:2;
	line-height:150%;
}
.list2{
	grid-column:3;
	line-height:150%;

}
.wishMessage p{
	line-height:150%;
}
/*Donate Page Desktop View CSS -------------------------------*/
.donateContainer{
display:grid;
	grid-gap:25px;
	grid-template-areas:
		'header header'
		'text image'
		'form form'
		'footer footer';
	overflow:hidden;
	justify-content:center;
	align-content:center;
}
.donations{
	grid-area:text;
	margin-left:25px;
}
.familyDog{
	grid-area:image;
	margin-top:-150px;
	margin-right:25px;
	clip-path:inset(150px 0px 0px 0px);
}
.donateForm{
	grid-area:form;
	margin:0px 25px 0px 25px;
}
#form1{
	display:grid;
	grid-template-areas:
		'amount type name'
		'address address address'
		'address2 address2 address2'
		'email email email'
		'payment payment payment'
		'buttons buttons buttons';
	line-height:200%;
	font-size:14pt;
}
.amount{
	grid-area:amount;
	margin-right:50px;
}
.type{
	grid-area:type;
}
.name{
	grid-area:name;
}
.email{
	grid-area:email;
}
.address{
	grid-area:address;
}
.address2{
	grid-area:address2;
}
.payment{
	grid-area:payment;
}
.buttons{
	grid-area:buttons;
	text-align:right;
}
#textfield, #textfield2, #textfield3, #textfield6 {
	width:100%;
	height:30px;
	margin-bottom:25px;
	margin-right:25px;
}
#email{
	width:70%;
	height:30px;
	margin-right:25px;
	margin-bottom:25px;
}
#textfield4{
width:10%;
	height:30px;
	margin-right:25px;
	margin-bottom:25px;
}
#textfield5{
	width:27%;
	height:30px;
	margin-right:25px;
	margin-bottom:25px;
}
#textfield7{
	width:30%;
	height:30px;
	margin-right:25px;
	margin-bottom:25px;
}
#textfield8{
	width:27%;
	height:30px;
	margin-bottom:25px;
}
#submit{
width:150px;
	height:30px;
	background-color:#8C786C;
	color:#white;
	border-radius:5px;
	border:solid thin #000;
	margin-left:25px;
}
#submit:hover{
	background-color:#D9946C;
	border:solid thin #8CA653;
}
#reset{
	width:150px;
	height:30px;
	background-color:#8C786C;
	color:#white;
	border-radius:5px;
	border:solid thin #000;
}
#reset:hover{
	background-color:#D9946C;
	border:solid thin #000;
}
/*Tablets View ---------------------------------------------------------------------*/
/* Medium devices (landscape tablets, 768px and less) */
@media screen and (max-width: 768px){
  /*Index CSS Tablet View ----------------------*/
  
/*Adopt Page CSS Tablet View ----------------------*/
	.adoptContainer h3{
		margin-top:-23%;
	}
  /*Wish List page Tablet View -------------*/
	.donateImage{
		clip-path:inset(60px 0px 10px 0px);
	}
  /*Donate Page Tablet View CSS -----------------*/
	#form1{
display:grid;
	grid-template-areas:
		'amount type'
		'name name'
		'address address'
		'address2 address2'
		'email email'
		'payment payment'
		'buttons buttons';
	}
}
/* Mobile View (phones, 600px and down) ---------------------------------------------- */
@media screen and (max-width: 600px){
  /*All pages CSS Mobile View ----------------------*/
	h1, h2, h3{
		margin-bottom:5px;
	}
	.socialMedia svg{
		margin-right:20px;
	}
	nav a{
		margin-right:10px;
		padding-right:5px;
		font-size:11pt;
	}
	header h1{
		margin:0px;
		text-align:center;
	}

  /*Index Page Mobile View ---------------------------*/
	.indexContainer{
		display:grid;
		grid-template-areas:
			'header'
			'text1'
			'image2'
			'text2'
			'image3'
			'text3'
			'footer';
	}
	.familyPet{
		display:none;
	}
	.giftMessage{
		margin:0px 15px;
	}
	.giftMessage p{
		line-height:130%;
	}
	.adoptImage{
		width:100%;
		margin:0px;
}
	.adoptPet{
		margin:0px 15px;
	}
	.wishImage{
width:100%;
	margin:0px;
	}
	.wishList{
		margin:0px 15px;
	}
/*Adopt Page CSS Mobile View --------------------------*/
	.adoptContainer{
		display:grid;
		grid-template-areas:
			'header'
			'text1'
			'image1'
			'image2'
			'image3'
			'image4'
			'footer';
		grid-gap:25px;
	}
	.adoptContainer h3{
		margin:-25% 0% 0% 0%;
		text-align:center;
	}
	
.adoptableMessage{
	padding:0px 25px;
}
	.image1{
		padding:0px;
	}
	.image2{
		padding:0px;
	}
	.image3{
		padding:0px;
	}
	.image4{
		padding:0px;
	}
  /*Wish List Page Mobile View CSS ---------------------*/
	.wishContainer{
		display:grid;
		grid-template-areas:
			'header'
			'text'
			'lists'
			'lists'
			'footer';
	}
	.wishMessage{
		margin:0px 15px 0px 15px;
	}
	.donateImage{
		display:none;
	}
	.lists{
		display:grid;
		grid-template-columns:1fr;
		grid-template-rows:.25fr .25fr;
	}
	.list1{
		grid-area:1/1;
		margin-left:10%;
	}
	.list2{
		grid-area:2/1;
		margin-left:10%;
	}
  /*Donate Page Mobile View -----------------------*/
	.donateContainer{
		display:grid;
		grid-template-areas:
			'header'
			'text'
			'form'
			'footer';
	}
	.familyDog{
		display:none;
	}
	.donations{
	margin:0px 15px 0px 15px;
	}
	#form1{
		display:grid;
		grid-template-areas:
		'amount'
		'type'
		'name'
		'address'
		'address2'
		'email'
		'payment'
		'buttons';
	}
	#textfield4, #textfield5, #textfield7, #email{
		width:100%;
	}
	.buttons{
		text-align:center;
	}
  }