@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Luckiest+Guy&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

Colors
----------------------------
#2E9278 - ILLUMINATING EMERALD 
#53928B - STEEL TEAL
#6F848E - SLATE GRAY
#66666F - GRANITE GRAY 
#5E4A58 - EGGPLANT
-----------------------------------------------------------*/
html *{
	border: 0;
	margin: 0;
}
.wrapper{
  width:90%;
  margin-right:auto;
  margin-left:auto;
  background-color: #6F848E;
}
img{
  width:100%;
  height:100%;
	background-color:lightgray;
}
header{
	grid-area: header;
  background-color: #53928B;
  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: #5E4A58;
  border-top:solid thin #FFFFFF;
  border-bottom:solid thick #FFFFFF;
}

nav a{
	margin-right: 25px;
	padding-right: 10px;
	border-right: thin solid #FFFFFF;
  text-decoration:none;
  color: #FFFFFF;
  font-weight:bold;
  font-size:18pt;
  font-family:'Indie Flower', cursive;
   -webkit-transition: color 1s border-right 1s; /* Safari prior 6.1 */
  transition: color 1s border-right 1s;
}
nav a:hover{
  color:#6F848E;
  border-right: solid thin #FFFFFF;
}

p{
   font-size: 16pt;
  line-height: 125%;
}
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: #5E4A58;
  border-top:solid thin #FFFFFF;
  border-bottom:solid thin #FFFFFF;
}

footer{
  grid-area:footer;
  background-color: #53928B;
  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'
    'message image1'
    'image2 image3'
    'text1 text2'
    'footer footer';
  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;
}

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

.adoptPet {
  grid-area:text1;
  margin-left: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 message'
    'pet1 pet2' 
    'pet3 pet4'
    'footer footer';
   grid-gap: 50px;
  overflow: hidden;
  justify-content:center;
  align-content:center;
}

.adoptableMessage {
  grid-area:message;
  padding: 0px 25px 0px 25px;
}

.Image1 {
  grid-area:pet1;
  padding: 0px 25px 0px 25px;
}

.Image2 {
  grid-area:pet2;
  padding: 0px 25px 0px 25px;
}

.Image3 {
  grid-area:pet3;
  padding: 0px 25px 0px 25px;
}

.Image4 {
  grid-area:pet4;
  padding: 0px 25px 0px 25px;
}

.Image1 h3 {
  font-size:2.5em;
  margin: -17% 0% 0% 2%;
  color:white;
  text-shadow: 1px 1px 1px black;
}

.Image2 h3 {
  font-size:2.5em;
  margin: -17% 0% 0% 2%;
  color:white;
  text-shadow: 1px 1px 1px black;
}

.Image3 h3 {
  font-size:2.5em;
  margin: -17% 0% 0% 2%;
  color:white;
  text-shadow: 1px 1px 1px black;
}

.Image4 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'
    'message image'
    'list1 list2'
    'footer footer';
    overflow: hidden;
  justify-content:center;
  align-content:center;
}

.wishMessage{
  grid-area:message;
  margin: 0px 25px;
}

.wishImage{
  grid-area:image;
  clip-path:insert(70px 0px 10px 0px);
  margin-top: -20%;
}

.list1{
  grid-area:list1;
  line-height:150%;
}

.list2{
  grid-area:list2;
  line-height:150%;
}

.wishMessage p {
  line-height:150%
}


/*Donate Page Desktop View CSS -------------------------------*/


.donateContainer{
  display:grid;
  grid-gap:25px;
  grid-template-areas:
    'header header'
    'message image'
    'form form'
    'footer footer';
  overflow: hidden;
  justify-content:center;
  align-content:center;
}

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

.familyDog{
  grid-area:image;
  margins: -150px 25px 0px 0px;
  clip-path:insert(150px 0px 0px 0px);
}

.donateForm{
  grid-area:form;
  margins: 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;
  bottom-margin:25px;
  right-margin: 25px;
  
}

.email input {
  width:70%;
  height:30px;
  bottom-margin:25px;
  right-margin: 25px;
}

#textfield4{
  width:10%;
  height:30px;
  bottom-margin:25px;
  right-margin: 25px;
}

#textfield5{
  width:27%;
  height:30px;
  bottom-margin:25px;
  right-margin: 25px;
}

#textfield7{
  width:30%;
  height:30px;
  bottom-margin:25px;
  right-margin: 25px;
}

#textfield8{
  width:27%;
  height:30px;
  bottom-margin:25px;
}

#submit{
  width:150px;
  height:30px;
  background-color:#53928B;
  color:white;
  border-radius:5px;
  border:solid thin #000000;
  margin-left:25px;
}

#reset{
  width:150px;
  height:30px;
  background-color:#53928B;
  color:white;
  border-radius:5px;
  border:solid thin #000000;

}


/*Tablets View ---------------------------------------------------------------------*/
/* Medium devices (landscape tablets, 768px and less) */
@media screen and (max-width: 768px){
  /*Index CSS Tablet View ----------------------*/
  
/*Adopt Page CSS Tablet View ----------------------*/
 
   .Image1 h3 {
    margin-top: -23%;
  }
    .Image2 h3 {
    margin-top: -23%;
  }
    .Image3 h3 {
    margin-top: -23%;
  }
    .Image4 h3 {
    margin-top: -23%;
  }
  
  /*Wish List page Tablet View -------------*/
 
  .donateImage{
  grid-area:image;
  clip-path:insert(60px 0px 10px 0px);
 
}
  
  
  /*Donate Page Tablet View CSS -----------------*/

 #form1{
  display:grid;
  grid-template-areas:
    'amount amount'
    'type 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:5px;
    padding-right:0px;
    font-size:9pt;
  }
  /*Index Page Mobile View ---------------------------*/

.indexContainer {
  display: grid;
  grid-template-areas: 
    'header' 
    'message' 
    'image1'
    'image2' 
    'image3'
    'text1' 
    'text2'
    'footer';
}

 .familyPet {
    display:none;
  }
  
 .giftMessage {
    margins: 0px 15px 0px 15px;
  }
  
 .giftMessage p {
    line-height: 150%;
}

  .adoptImage {
    width:100%;
    margin:0px;
  }
  
    .adoptPet {
    margins: 0px 15px 0px 15px;
  }
  
    .wish {
    width:100%;
    margin:0px;
  }
  
      .wishList {
    margins: 0px 15px 0px 15px;
  }
  
/*Adopt Page CSS Mobile View --------------------------*/
 

 .adoptContainer {
  display: grid;
  grid-template-areas: 
    'header'
    'message'
    'pet1'
	'pet2' 
    'pet3'
	'pet4'
    'footer';
   grid-gap: 25px;

}

    .Image1 h3 {
    margin-top: -25%;
  }
    .Image2 h3 {
    margin-top: -25%;
  }
    .Image3 h3 {
    margin-top: -25%;
  }
    .Image4 h3 {
    margin-top: -25%;
  }
  
  /*Wish List Page Mobile View CSS ---------------------*/
  
  .wishContainer{
    display:grid;
    grid-template-areas:
      'header'
      'message'
      'image'
      '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{
  grid-area:message;
  margins:0px 15px 0px 15px;
}
  
  #form1{
  display:grid;
  grid-template-areas:
    'amount'
    'type'
    'name'
    'address'
    'address2'
    'email'
    'payment'
    'buttons';
}
  
#textfield4, #textfield5, #textfield7 input{
  width:100%;  
}

.email input {
  width:100%;

}