$Blue:rgb(0,160,199);
$Yellow:rgb(255,200,71);
$Green:rgb(74,157,91);
$header:rgb(186,204,218);
@font-face {
    font-family: heading;
    src: url(../images/vast-shadow/VastShadow-Regular.ttf);
  }
#container1{
    display: grid;
    grid-template-areas: 
    'add add add add add add add add add add add add'
    'nav nav  nav nav nav nav nav nav nav nav nav nav'
    'header header header header header header header header header header header header'
    'aside aside aside aside main main main main section section section section'
    'puppy puppy puppy puppy why why why why pet pet pet pet'
    'footer footer footer footer footer footer footer footer footer footer footer footer';
    width:95%;
	margin:10px auto;
}

nav{
    grid-area: nav;
    background-color: $header;
    padding: 20px;
    text-align: center;
    top: 10px;
    position: sticky;
        img[alt~="logo"]
        {
            float: left;
            height: 50px;
            width: auto;
        }
        li {
            display: inline;
            list-style-type: none;
            margin-right: 1.5em;

        }
        li a{
            color: black
        }
        .active{
            background-color: $Blue;
            padding: 10px;
    
        }
}
header{
    grid-area: header;
    background-image: url("../images/paw4.png");
    padding: 100px;
    background-size: cover;
    margin-top: 7px;
    text-align: center;
    padding-bottom: 10px;
    font-family:'heading', Courier, monospace;
}
aside{
    grid-area: aside;
    margin: 1.5px auto;
    img[alt~="White-Dog"]
    {
        display: block;
        width: 50%;
        width: 200px;
        height: auto;
        margin: .5em auto;
        border-radius: 50%;
    }
}
main{
    grid-area: main;
    margin: 1.5px auto;
    img[alt~="Training"]
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        width: 200px;
        height: auto;
        margin: .5em auto;
    } 
}
section{
    grid-area: section;
    margin: 1.5px auto;
    img[alt~="SnowDog"]
    {
        display: block;
        width: 50%;
        width: 200px;
        height: auto;
        margin: .5em auto;
        border-radius: 50%;
    } 
}
h3{
    text-align: center;
}
div{
    margin-right: 10px;
    margin-bottom: 20px;
    padding:5px;
}
div>p{
    line-height: 32px;
}
main>div{
    background-color: $Green;
    padding: 5px 12px 65px ;

}
section>div{
    background-color: $Yellow;
    padding: 5px 12px 190px ;
   
}
aside>div{
    background-color: $Yellow;
    padding: 5px 12px
}
.puppy{
    grid-area: puppy;
    img[alt~="cats"]
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        height: auto;
        margin: .5em auto;
    } 
}
.why{
    grid-area: why;
    img[alt~="puppyInGrass"]
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        height: auto;
        margin: .5em auto;
        border-radius: 50%;
    } 
}
.why>div{
    padding-bottom: 345px;
}
.pet{
    grid-area: pet;
    img[alt~="dog"]
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        height: auto;
        margin: .5em auto;
    } 
}
footer{
    grid-area: footer;
    background-color: $header;
    padding: 20px;
    text-align: center;
    float: left;
    img[alt~="logo"]
    {
        float: right;
        height: 50px;
        width: auto;
    }
    img[alt~="Facebook"]
    {
        float: left;
        padding-right: .5em;
        height: 50px;
        width: auto;
    }
    img[alt~="youtube"]
    {
        float: left;
        height: 50px;
        width: auto;
    }
}
#add {
    position: relative;
    display: block;
  }
  
  #close {
    position: absolute;
    top: 0;
    right: 0;
  }
#add

 {
    background-color: $Blue;
    padding: 25px;
    text-align: center;
    position: absolute;
	top: 50%;
    left: 25%;
 	z-index: 3;
  	animation-name:addvertisement, fadein;
  	animation-duration:1s;
  	animation-delay: 0;
  	animation-iteration-count: 1,1;
  	animation-timing-function: ease-out, linear;
 }
img[alt~="puppies"]
    {

        padding-right: .5em;
        height: 250px;
        width: auto;
    }

@keyframes addvertisement
{
  0% { transform: scale(0.0)}
  50%{transform: scale(1)}
  100%  {transform: scale(.75) }
   }
   
   @keyframes fadein {
    0% {opacity: 0;}

    1% { opacity: 1;
    }

    100% {opacity: 1;
    }
}
@media only screen and (max-width: 900px) {
    #container1{
    display: grid;
    grid-template-areas:
    'add'
    'nav'
    'header'
    'aside'
    'main'
    'section'
    'puppy' 
    'why'
    'pet'
    'footer';
    width: 100%;
    }
    #add {
        position: relative;
        display: block;
      }
      
      #close {
        position: absolute;
        top: 0;
        right: 0;
      }
    #add
    
     {
        background-color: $Blue;
        padding: 25px;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 25%;
         z-index: 3;
          animation-name:addvertisement, fadein;
          animation-duration:1s;
          animation-delay: 0;
          animation-iteration-count: 1,1;
          animation-timing-function: ease-out, linear;
     }
    img[alt~="puppies"]
        {
    
            padding-right: .5em;
            height: 90px;
            width: auto;
        }
}