@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:#BF1F3C;
  border-top:solid thick #594839;
  /*border-bottom:solid thin #BF1F3C;*/
}

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

footer p{
	margin-top: 15px;
  margin-left:25px;
}
/*Index CSS for Desktop View--------------------------------------------------------*/

.indexContainer {
  display: grid;
  grid-template-areas:
  'header header'
  'message image1'
  'image2 image3'
  'text1 text2'
  'footer footer';
  grid-gap: 25px;
  overflow: hidden;
  justify-content: center;
  align-content: center;	
}

.giftMessage {
  grid-area: message;
  margin-left: 25px;
}

.familyPet{
  grid-area: image1;
  margin-right: 25px;
}

.adoptImage {
  grid-area: image2;
  margin-left: 25px;
}

.adoptPet {
  grid-area: text1;
  margin-left: 25px;	
}

.wishImage {
  grid-area: image3;
  margin-right: 25px;	
}

.wishList {
	grid-area: text2;
	margin-right: 25px;
}

.giftmessage p {
	line-height: 150%;
}

/*Adopt Page CSS Desktop View ----------------------------------*/

.adoptContainer {
  display: grid;
  grid-template-areas:
  'header header'
  'message image1'
  'image2 image3'
  'image4 text1'
  'footer footer';
  grid-gap: 50px;
  overflow: hidden;
}
.adoptableMessage {
	padding: 0px 25px 0px 25px;
}

.Image1 {
	padding: 0px 25px 0px 25px; 
}

.Image2 {
	padding: 0px 25px 0px 25px; 
}

.Image3 {
	padding: 0px 25px 0px 25px; 
}

.Image4 {
	padding: 0px 25px 0px 25px; 
} 


h3.Nimbus {
font-size: 2.5em;
	margin-top: -10%;/*once images are added check to see if you can do -17%*/
	margin-left: 2%;
	color: white;
	text-shadow: 1px 1px 1px #000000;	
}

h3.Billy {
	font-size: 2.5em;
	margin-top: -10%;/*once images are added check to see if you can do -17%*/
	margin-left: 2%;
	color: white;
	text-shadow: 1px 1px 1px #000000;
}

h3.Sam {
	font-size: 2.5em;
	margin-top: -10%;/*once images are added check to see if you can do -17% right now it doesn't look good*/
	margin-left: 2%;
	color: white;
	text-shadow: 1px 1px 1px #000000;
}

h3.Mark {
	font-size: 2.5em;
	margin-top: -10%;/*once images are added check to see if you can do -17%*/
	margin-left: 2%;
	color: white;
	text-shadow: 1px 1px 1px #000000;
}
/*Wish List Page Desktop View -------------------*/
.wishContainer {
  display:grid;
  grid-template-areas:
  'header header'
  'message image'
  'list1 list2'
  'footer footer';
  grid-gap:0px;
  overflow:hidden;
  justify-content:center;
  align-content:center;
}
.wishMessage {
 grid-area:message;
 margin: 20px 680px 35px 10px;
}
.donateImage {
  grid-area:image;
  clip-path:inset(70px 0px 10px);
  margin-top: -15%;
  widows: 50%;
margin-left: 50%;
}
.list1 {
  grid-column: 1;
  line-height: 150%;
  margin-top: -350px;
margin-bottom: 50px;
}
.list2 {
  grid-column:2;
  line-height:150%;
  margin-top:10px;
margin-bottom: 50px;
}
.wishMessage p {
  line-height: 150%;
}

/*Donate Page Desktop View CSS -------------------------------*/
.donateContainer{
 display: grid;
 grid-template-areas:
 'header header'
 'message image'
 'form form'
 'footer footer';
  grid-gap:25px;
  overflow:hidden;
  justify-content:center;
  align-content:center;
}
.donateMessage {
  grid-area:message;
  margin-left:25px;
}
.familyDog {
  grid-area:image;
  margin: -150px 25px 0px 0px;
  clip-path:inset(150px 0px 0px 0px);
}
.donateForm {
  grid-area:form;
  margin: 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 input {
  width:100%;
  height:30px;
  margin-bottom:25px;
  margin-right:25px;
}
.email input {
  width:70%;
  height:30px;
  margin-bottom:25px;
  margin-right:25px; 
}
#textfield4 {
  width:10%;
  height:30px;
  margin-bottom:25px;
  margin-right:25px;
}
#textfield5 {
  width:27%;
  height:30px;
  margin-bottom:25px;
  margin-right:25px;
}
#textfield7 {
  width:30%;
  height:30px;
  margin-bottom:25px;
  margin-right:25px;
}
#textfield8 {
  width:27%;
  height:30px;
  margin-bottom:25px;
}
#submit {
  width:10%;
  height:30px;
  background-color:#8C786C;
  color:white;
  border-radius:5px;
  border:solid thin #000;
  margin-left:25px;
}
#reset {
  width:10%;
  height:30px;
  background-color:#8C786C;
  color:white;
  border-radius:5px;
  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 ----------------------*/
  h3.Billy {
		margin-top: -23%px;
	}
  
  h3.Mark {
    margin-top: -23%px;
  }
  
  h3.Nimbus {
    margin-top: -23%px;
  }
  
  h3.Sam {
    margin-top: -23%px;
  }
 
  /*Wish List page Tablet View -------------*/
 .donateImage {
	clip-path:inset(60px 0px 10px 0px);
  line-height: 150%;
	}
  /*Donate Page Tablet View CSS -----------------*/
  .donateContainer{
  'amount type name'
  'address address address'
  'address2 address2 address2'
  'email email email'
  'payment payment payment'
  'buttons 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: 5px;
	font-size: 11pt;
}  
/*Index Page Mobile View ---------------------------*/
.indexContainer {
	display:grid;
	grid-template-areas: 
	'header'
	'message' 
	'image1'
	'image2' 
	'image3'
	'text1' 
	'text2'
	'footer';	
}

.familyPet {
	display: none;
}

.giftMessage {
	margin: 0px 15px 0px 15px;
}

.giftMessage p {
	line-height: 150%;
}

.adoptImage {
	width: 100%;
	margin: 0px;
}

.adoptPet {
	margin: 0px 15px 0px 15px;
}

.wishImage {
	width: 100%;
	margin: 0px;
}

.wishList {
	margin: 0px 15px 0px 15px;
}
 
/*Adopt Page CSS Mobile View --------------------------*/
 .adoptContainer {
	display:grid;
	grid-template-areas: 
	'header'
	'message' 
	'image1'
	'image2' 
	'image3'
	'image4' 
	'text1'
	'footer';	
  grid-gap: 25px;
}
  h3.Billy {
		margin-top: -25%px;
	}
  
  h3.Mark {
    margin-top: -25%px;
  }
  
  h3.Nimbus {
    margin-top: -25%px;
  }
  
  h3.Sam {
    margin-top: -25%px;
  }
  /*Wish List Page Mobile View CSS ---------------------*/
  .wishContainer {
	display:grid;
	grid-template-areas: 
	'header'
	'message' 
	'list1' 
	'list2'
	'footer';	
}
  .wishMessage {
    margin:0px 15px;
}
  .donateImage {
    display: none;
}  
  
  /*Donate Page Mobile View -----------------------*/
.donateContainer{
 display: grid;
 grid-template-areas:
 'header'
 'message'
 'form'
 'footer';
}
  .familyDog {
    display:none;
  }
  .donateMessage {
    margin: 0px 15px;
  }
  #form1 {
  display:grid;
  grid-template-areas:
  'amount'
  'type'
  'name' 
  'address'
  'address2'
  'email'
  'payment'
  'buttons';
}
  #textfield4, #textfield5, #textfield7 {
  width:100%;  
  }
 }