$Brown: rgb(173, 138, 104);
$DarkBrown: rgb(102, 82, 81);
$White: rgb(255, 255, 255);
$header: rgb(186, 204, 218);

html, body {
    height: 100%;
    margin: 0;
}

#container {
    display: grid;
    grid-template-areas: 
    'nav nav nav nav nav nav nav nav nav nav nav nav'
    'body body body body body body body body body body body body'
    'Project1 Project1 Project1 Project2 Project2 Project2  Project3 Project3 Project3 Project4 Project4 Project4'
    'about about about about about about photo photo photo photo photo photo'
    'footer footer footer footer footer footer footer footer footer footer footer footer';
    width: 100%;
    margin: auto;
}

body {
    background-image: linear-gradient(to right, #{$DarkBrown}, #{$Brown}, #{$White});
}

nav {
    grid-area: nav;
    background-color: $Brown;
    padding: 20px;
    text-align: center;
    position: sticky;
}

nav li {
    display: inline;
    list-style-type: none;
    margin-right: 1.5em;
}

nav li a {
    color: black;
}

nav .active {
    padding: 10px;
}
.Project1{
    grid-area: Project1;
    margin: 15px;
    img[alt~="puppy"] {
        float: left;
        width: 200px;
        height: auto;
        margin: auto;
        border-radius: 50%;
    }
}
.Project2{
    grid-area: Project2;
    margin: 15px;
    img[alt~="Coffee_cup"] {
        display: block;
        width: 200px;
        height: auto;
        margin: auto;
        border-radius: 50%;
    }
}
.Project3{
    grid-area: Project3;
    margin: 15px;
    img[alt~="cocoa"] {
        display: block;
        width: 200px;
        height: auto;
        margin: auto;
        border-radius: 50%;
    }
}
.Project4{
    grid-area: Project4;
    margin: 15px;
    img[alt~="cat"] {
        display: block;
        width: 200px;
        height: auto;
        margin: auto;
        border-radius: 50%;
    }
}
h1{
    text-align: center;
}
h3{
    text-align: center;
}
.about{
    grid-area: about;
    margin-bottom: 50px;
    padding: 15px;
    line-height: 1.5;

}
.photo{
    grid-area: photo;
    img[alt~="MyPhoto"] {
        display: block;
        border-radius: 50%;
        width: 400px;
        height: auto;
        margin: auto;
    }
    margin-bottom: 56px;
    margin-top: 100px;
}
footer {
    grid-area: footer;
    background-color: $Brown;
    padding: 20px;
    text-align: center;
    img[alt~="Link"]
    {
        float: left;
        padding-right: .5em;
        height: 50px;
        width: auto;
    }
    img[alt~="Git"]
    {
        float: left;
        height: 50px;
        width: auto;
    }
}
@media only screen and (max-width: 500px) {
    #container {
        display: grid;
        grid-template-areas: 
        'nav'
        'body'
        'Project1'
        'Project2'
        'Project3' 
        'Project4'
        'about'
        'photo'
        'footer';
        width: 100%;
        margin: auto;
    }
    .photo{
        grid-area: photo;
        img[alt~="MyPhoto"] {
            display: block;
            border-radius: 50%;
            width: 400px;
            height: auto;
            margin: auto;
        }
        margin-bottom: 56px;
        margin-top: 5px;
    }
    .about{
        grid-area: about;
        margin-bottom: 5px;
        padding: 15px;
        line-height: 1.5;
    
    }
    .Project1{
        grid-area: Project1;
        margin: 15px;
        img[alt~="puppy"] {
            display: block;
            width: 200px;
            height: auto;
            margin: auto;
            border-radius: 50%;
        }
    }
}