@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 -----------------------------------------------------------*/
html *{
	border: 0;
	margin: 0;
}
.wrapper{
  width:90%;
  margin-right:auto;
  margin-left:auto;
  background-color:#F28D8D;
}
img{
  width:100%;
  height:100%;
	background-color:lightgray;
}
header{
	grid-area: header;
  background-color:#73523F;
  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:#BFB39B;
  border-top:solid thin #F2E9CE;
  border-bottom:solid thick #F2E9CE;
}

nav a{
	margin-right: 25px;
	padding-right: 10px;
	border-right: thin solid #26160C;
  text-decoration:none;
  color:#26160C;
  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:#73523F;
  border-right: solid thin #26160C;
}

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:#26160C;
  border-top:solid thin #F2E9CE;
  border-bottom:solid thin #F2E9CE;
}

footer{
  grid-area:footer;
  background-color:#F28D8D;
  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;
  aligncontent:center;
  
}

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

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

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

.wishImage{
  grid-area:image3;
  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 image1'
  'image2 image3'
  'text1 text2'
  'footer footer';
  grid-gap:50px;
  overflow:hidden;
}

.adoptableMessage{
  padding-left:25px;
  padding-right:25px;
}

.image1{
  padding-right:25px;
  padding-left:25px;
}

.image2{
  padding-right:25px;
  padding-left:25px;
}

.image3{
  padding-right:25px;
  padding-left:25px;
}

.image4{
  padding-right:25px;
  padding-left:25px;
}

h3{
  font-size:2.5em;
  margin-top:negative 17%;
  margin-left:negative 2%;
  color:white;
}


/*Wish List Page Desktop View -------------------*/

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

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

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

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

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

.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:insert (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-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: #F2E9CE;
  text-color: black;
  border-radius: 5px;
  border: solid thin #26160C;
  margin-left: 25px;
}

#reset {
  width: 150px;
  height: 30px;
  background-color: #BFB39B;
  text-color: black;
  border-radius: 5px;
  border: solid thin #26160C;
}

/*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{
    margin-top: negative 23%;
  }
  
  /*Wish List page Tablet View -------------*/
  
  .donateImage {
    clip-path:insert (60px 0px 10px 0px);
  }
 
  /*Donate Page Tablet View CSS -----------------*/
  
  #form1 {
    display:grid;
    'amount name'
    'address address'
    'address2 address2'
    'email email'
    'payment payment'
    'buttons buttons'
    'footer footer';
  }

}
/* 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{
    right-margin:20px;
  }
  
  nsv a{
    margin-right:10;
    padding-right: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'
  'text1'
  'text2'
  'footer';
  grid-gap:25px;
  }
  
  h3 {
    margin-top:negative 25%;
  }
  /*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;
    'amount'
    'address'
    'email'
    'payment';
  }
  
  .familyDog {
    display:familyDog;
  }
  
  .donateMessage{
    margin-left:15px;
    margin-right:15px;
  }
  
  #form1 {
    display:grid;
    'amount'
    'type'
    'name'
    'address'
    'address2'
    'email'
    'payment'
    'buttons';
  }

  #textfield4, #textfield5, #textfield7 {
    width: 100%;
  }
  
  .email input {
    width: 100%;
  }