$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: 
    '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 section aside aside aside aside aside aside'
    '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: linear-gradient($Yellow,$Green,$Blue);
    margin-top: 7px;
    text-align: center;
    padding-bottom: 10px;
    font-family:'heading', Courier, monospace;
    
    
    img[alt~="BlackCat"]
    {
        display:block;
        border-radius: 50%;
        width: 100px;
        height: auto;
        margin: .5em auto;
    }
}
section{
    grid-area: section;
    margin: 5px 10px;
    padding: 5px 10px;
}
aside{
    grid-area: aside;
    margin: 5px 10px;
    padding: 5px 10px;
}
section>h2{
    background-color: $Blue;
}
aside>h2{
    background-color: $Green;
}
h4:hover{
    background-color: $Yellow;
}
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: 900px) {
    #container1{
    display: grid;
    grid-template-areas:
    'nav'
    'header'
    'aside'
    'section'
    'footer';
    width: 100%;
    }
    footer{
        grid-area: footer;
        background-color: $header;
        padding: 20px;
        text-align: center;
        float: left;
        img[alt~="logo"]
        {
            float: right;
            height: 25px;
            width: auto;
        }
        img[alt~="Facebook"]
        {
            float: left;
            padding-right: .5em;
            height: 25px;
            width: auto;
        }
        img[alt~="youtube"]
        {
            float: left;
            height: 25px;
            width: auto;
        }
    }
    nav{
        grid-area: nav;
        background-color: $header;
        padding: 20px;
        text-align: center;
        top: 10px;
        position: sticky;
            img[alt~="logo"]
            {
                float: left;
                height: 25px;
                width: auto;
            }
            li {
                display: inline;
                list-style-type: none;
                margin-right: 1.5em;
    
            }
            .active{
                background-color: $Blue;
                padding: 2px;
        
            }
    }
  }