@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: #333;
  color: white;
}

img {
  width: 100%;
  height: 100%;
  background-color: lightgray;
  margin: 25px 25px;
}
header {
  grid-area: header;
  background-color: #E6BE63;
  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: #399994;
  border-top: solid thick #DD6CE6;
  border-bottom: solid thick #DD6CE6;
}

nav a {
  margin-right: 25px;
  padding-right: 10px;
  border-right: thin solid #E6BE63;
  text-decoration: none;
  color: white;
  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: #DD6CE6;
  border-right: solid thin #399994;
}

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

img .socialMedia {
    max-width: 50px;
    max-height: 50px;
    margin-right: 50px;
}
.socialMedia {
  margin-top: 10px;
  padding: 5px 0px;
  text-align:center;
  margin-bottom: 20px;
  background-color: #399994;
  border-top: solid thin #DD6CE6;
  border-bottom: solid thin #DD6CE6;
}

footer {
  grid-area:footer;
  background-color: #E6BE63;
  padding-top: 0px;
  color: white;
  text-align: center;
}

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

footer a {
    text-decoration: underline;
}

footer a:hover {
    color: blue;
}
/*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;
}

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

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

.adoptImage {
    grid-area: image2;
}

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

.wishImage {
    grid-area: image3;
}

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


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

.adoptContainer {
    display: grid;
    grid-gap: 50px;
    grid-template-areas:
        'header header'
        'adoptableMessage adoptableMessage'
        'billy mark'
        'nimbus sam'
        'footer footer';
    overflow: hidden;
}

.adoptContainer h3 {
    font-size: 2.5em;
    margin-top: -17px;
    margin-left: 2px;
    color: white;
    text-shadow: 1px 1px 1px black;
}

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

.billy {
    grid-area: billy;
    padding-left: 25px;
    padding-right: 25px;
}

.mark {
    grid-area: mark;
    padding-left: 25px;
    padding-right: 25px;
}

.nimbus {
    grid-area: nimbus;
    padding-left: 25px;
    padding-right: 25px;
}

.sam {
    grid-area: sam;
    padding-left: 25px;
    padding-right: 25px;
}

.

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

.wishContainer {
    display: grid;
    grid-span: 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-path: inset(70px 0px 10px 0px);
    margin-top: -20%;
    margin-right: 25px;
    overflow: hidden;
}

.lists {
    grid-area: list1;
    display: grid;
    grid-gap: 20px;
    grid-template-areas: .15fr .35fr .35fr .15fr;
}

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

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

.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 

.donateForm {
    grid-area: form;
    margin: 0px 25px 0px 25px;
}

#form1 {
    display: grid;
    grid-template-areas:
        'amount type name'
        'address1 address1 address1'
        '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;
}

.address1 {
    grid-area: address1;
}

.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: 30px;
    margin-right: 25px;
}

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

#textfield {
    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: #8CA653;
    color: #F1F2CE;
    border-radius: 5px;
    border: solid thin #728844;
    margin-left: 25px;
}

#submit:hover {
    background-color: #728844;
    border: solid thin #8CA653;
}

#reset {
    width: 150px;
    height: 30px;
    background-color: #96B3D9;
    color: #F1F2CE;
    border-radius: 5px;
    border: solid thin #7CA0D0;
}




/*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: -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 ----------------------*/
 
  /*Index Page Mobile View ---------------------------*/
  
  .indexContainer {
      display: grid;
      grid-gap: 25px;
      grid-template-areas:
        'header'
        'text1'
        'image2'
        'text2'
        'image3'
        'text3'
        'footer';
  }
  
  h {
      margin-bottom: 5px;
  }
  
  .socialMedia a {
      margin-right: 20px;
  }
  
  nav a {
      margin-right: 15px;
      padding-right: 15px;
      font-size: 11px;
  }
  
  .familyPet {
      display: none;
  }
  
  .giftMessage {
      margin-left: 15px;
      margin-right: 15px;
  }
  
  .giftMessage p {
      line-height: 150%;
  }
  
  .adoptImage {
      width: 100%;
      margin: 0px;
  }
  
  .adoptPet {
      margin-left: 15px;
      margin-right: 15px;
  }
  
  .wishImage {
      width: 100%;
      margin: 0px;
  }
  
  .wishList {
      margin-left: 15px;
      margin-right: 15px;
  }


/*Adopt Page CSS Mobile View --------------------------*/

.adoptContainer {
    display: grid;
    grid-template-areas:
        'header'
        'billy'
        'mark'
        'nimbus'
        'sam'
        'footer';
}

.adoptContainer h3 {
    text-align: center;
    margin-top: -25%;
}
 
  /*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'
        'address1'
        'address2'
        'email'
        'payment'
        'buttons';
}

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

.buttons {
    text-align: center;
}
}