$Blue:rgb(0,160,199);
$BlueTransparent:rgba(0,160,199,.1);
$Yellow:rgb(255,200,71);
$YellowTransparent:rgba(255,200,71,.25);
$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: 
    'nav nav  nav nav nav nav nav nav nav nav nav nav'
    'header header header header header header header header header header header header'
    'section section section section section aside aside aside div div div div'
    'section2 section2 section2 section2 section2 aside2 aside2 aside2 div2 div2 div2 div2'
    '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: 50px;
        background-size: cover;
        margin-top: 7px;
        text-align: center;
        padding-bottom: 10px;
        font-family:'heading', Courier, monospace;
    }
    section{
        margin-top: 10px;
        margin-right: 5px;
        grid-area: section;
        padding: 5px 10px;
        background-color: $BlueTransparent;

       
    }
    aside{
        grid-area: aside;
        background-color: $Green;
        padding: 0px 10px;
        margin: 10px 0px;
        
    }
    div{
        grid-area: div;
        background-color: white;
        padding: 14px;
    }
    .section2{
        margin-top: 0px;
        margin-bottom: 10px;
        margin-right: 5px;
        grid-area: section2;
        padding: 5px 10px;
        background-color: $BlueTransparent;

       
    }
    .aside2{
        grid-area: aside2;
        background-color: $Green;
        padding: 0px 10px;
        margin: 10px 0px;
        
    }
    .div2{
        grid-area: div2;
        background-color: white;
        padding: 14px;
    }
    .testbutton {
        font-family: arial;
        color: #F7F7F7 !important;
        font-size: 16px;
        text-shadow: 2px 2px 5px #000000;
        box-shadow: 1px 1px 1px #1C1C1C;
        padding: 10px 25px;
        border-radius: 10px;
        border: 2px solid #F0F8FF;
        background: #000000;
      }
      .testbutton:hover {
        color: #FFFFFF !important;
        background: #9E9E9E;
      }
  
    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;
        }
    }
    @media only screen and (max-width: 400px) {
        #container1{
        display: grid;
        grid-template-areas:
        'nav'
        'header'
        'section'
        'aside' 
        'div' 
        'aside2' 
        'div2'
        'footer';
        width: 100%;
        }
        .section2{
            display: none;
        }
    }