/* Structual Elements Go Here */
#wrapper{
    display: grid;
    grid-template-columns:  minmax(0, 1fr) repeat(6, minmax(0, 175px)) minmax(0, 1fr);
    grid-template-rows: auto;
}

nav{
    grid-column: 2/3;
    background-color: #edeeef;
}

main{
    grid-column: 3/-2;
    background-color: #fff;
    padding: 20px;
}

footer{
    grid-column: 3/-2;
    background-color: #2d5ba6;
    color: #fff;
    font-size: 0.5rem;
    padding: 20px;
}


/* Navigation Elements Go Here */
nav ul{
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

nav ul li{
    width: 100%;
}
nav ul li a{
    width: 100%;
    text-decoration: none;
    color: #555;
    display: block;
    padding: 10px;
    text-align: left;
}
nav a:hover{
    background-color: #fff;
    color: #d53631;
}
nav a:active{
    background-color: #fff;
    color: #d53631;
}


/* Styling Elements Go Here */

p {
    line-height: 1.25rem;
}

.homehero{
   width: 100%;
   height: auto;
   background-repeat:no-repeat;
   background-position: center;
}

footer{
    align-items: center;
}

.education{
   width: 300px;
   float: right;
   height: auto;
   background-repeat:no-repeat;
   background-position: center;
   padding-top: 10px;
   padding-left: 10px;
   padding-right:0px;
   padding-bottom: 0px;
   

}

.eclipse{
   width: 300px;
   float: right;
   height: auto;
   background-repeat:no-repeat;
   background-position: center;
   padding-top: 10px;
   padding-left: 10px;
   padding-right:0px;
   padding-bottom: 0px;
   

}
.view{
   width: 300px;
   float: right;
   height: auto;
   background-repeat:no-repeat;
   background-position: center;
   padding-top: 10px;
   padding-left: 10px;
   padding-right:0px;
   padding-bottom: 0px;
   

}
p{
    line-height: 1.25rem;
}

link{
    color: #d53631;
}
h2{
    border: #555;
    border-width: 2px;
}
figcaption{
    font-style: italic;
    font-size: 0.75rem;
    float: right;
}
/*links are a color, look back at photo
headings have borders
logo, hero, and video have wifth
small imaged and test also*/




/* Media Query of 960 and less goes here */

@media only screen and (max-width:960px){
    nav{
        grid-column: 2/-2;
    }

    main{
        grid-column: 2/-2;
    }
    footer{
        grid-column: 2/-2;
    }
    .education{
        width: 100%;
        padding: 0px;
        float: none;
    }

}