/*****Structure*****/

body{
    max-width:960px;
    margin:0 auto;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height:1.3;
}

aside{
    flex:0 0 200px;
    margin-left:3em;
}

footer{
    background:rgba(20,116,185,0.86);
}

img{
    width:100%;
    display:block;
}

p{
    margin-top:0;
}

.bottom-section{
    margin-bottom:0 !important;
}


.page-container{
    margin:0 40px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.flex-container{
    display:flex;
}

/*****Home Page*****/
.homepage-container{
    margin:0 auto;
    padding:0 40px;
    max-width:500px;
}

#home-text-1{
    margin:1em 0 0.5em 0;
}

#home-text-2{
    margin:0.5em 0 1em 0;
}

/*****Navigation*****/
.nav-container{
    margin:10px 40px 10px 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom: -2%;
    font-size:1.1em;
}

.nav-title{
    flex:0 1 auto;
    color:rgba(20,116,185,0.86);
}

.nav-list{
    margin:0;
    padding:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    list-style:none;
}

.nav-item{
    margin:0 0 0 2em;
    color:gray;
}

.nav-link{
    padding:0.5em;
}

.nav-line{
    border: 2px solid rgba(20,116,185,0.86);
    margin-bottom:3em;
}

/*****Footer*****/
#footer-text{
    padding:1em 0 1em 0;
    
}

/*****Sidebar*****/
.sidebar-container{
    border:5px solid gray;
    margin-bottom: 1em;
    padding:1em;
}

.sidebar-photo-container{
    margin: 1em 2em;
}

.sidebar-title{
    text-align:center;
}

/*****About Page*****/
.about-summary{
    width:60%;
    margin:0 auto;
}

.top-skills-title{
    text-align:center;
}

.top-skills-list{
    padding:0 1em 0 1em;
}

.about-sports-container{
    display:flex;
    align-items:center;
    margin-top:2em;
}

.about-sports-images-container{
    flex:0 0 50%;
    margin-left: 2em;
}


.about-sports-figure{
    margin:0 0 1em 0;
}

figcaption{
    text-align:center;
    margin-top:4px;
}


/*****Education Page*****/
.section-container{
    border-bottom:1px solid rgba(20,116,185,0.86);
    margin-bottom:2em;
    padding:0 0em 2em 0em;
    display:flex;
    flex-direction:column;
}

.course-info-photo-container{
    flex-direction:row;
}

.education-flex-container
.course-info-container{
    display:flex;
    flex-direction:column;
}

.course-list-container,
.school-info-container{
    display:flex;
    justify-content:space-between;
}

.grades-list{
    flex:0 0 150px;
    margin-left:4em;
}

.course-list-1{
    margin-right:2em;
}

dl{
    margin:0;
}

dd{
    padding:0;
    margin:0;
}

.photo-grad{
    width:150px;
    padding:0 0 2em 2em;
}

/*****Software Page*****/
.skills-list-container{
    border:2px solid rgba(20,116,185,0.86);
    padding:1em;
    margin-bottom:1em;
}

.software-skills-title{
    text-align:center;
}

.float-image{
    float:right;
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-left:3em;
}

.portfolio-container{
    margin:0 0 2em 0;
}

.portfolio-content-container{
    display:flex;
    align-items:center;
}

#github{
    height:64px;
    width:64px;
    margin:1em;
}

.portfolio-image{
    flex:0 0 40%;
    margin:0 2em 0 1em;
}

.portfolio-image-large{
    margin-bottom:1em;
}

#gameCanvas{
    border:3px solid black;
}

/*****Blog Page*****/
.featured-post{
    margin-bottom: 2rem;
}

.secondary-post{
    display:flex;
    margin:2rem 0 2rem 0;
    align-items:center;
}

.secondary-post-image{
    flex:0 0 200px;
    margin-right:1rem;
}

.blog-photo{
    width:300px;
}

/*****Fixtures*****/
#fixtureDate{
    padding-top:1em;
}

td{
    padding-left:1em;
}

td:first-child{
    padding-left:0em;
}

#teamLogo{
    width:30px;
}


/*****Typography*****/

h1,h2,h3,h4,h5{
    margin:0 0 1em 0;
}

h1,h2{
    color:rgba(20,116,185,0.86);
    text-align:center;
}

.title{
    text-align:center;
}

a{
    text-decoration:underline;
    color:gray;
}

a:hover,
a:focus{
    color:rgba(20,116,185,0.86);
}

/*****Home Page*****/
.homepage-container{
    text-align:center;
    font-family:'IM Fell French Canon SC', serif;
    font-size:2em;
    color:rgba(20,116,185,0.86);
}

/**Navigation**/
.nav-title{
    margin:0;
    font-size:4em;
    font-family:"Bilbo", sans-serif;
}

.site-title-small{
    font-size:1rem;
}

.nav-link{
    text-decoration:none;
    color:inherit;
    font-weight:bold;
}

.nav-link:hover,
.nav-link:focus{
    color:rgba(20,116,185,0.86);
}

#current-page{
    text-decoration-line:underline;
}

#current-page:hover,
#current-page:focus{
        color:gray;
}

footer{
    text-align:center;
    color:white;
}

/*****Education*****/
dt{
    font-weight:bold;
}

/*****Blog*****/
.post-title{
    margin-top:0;
}

.post-date{
    font-size:0.8em;
    color:gray;
}

.post-continue{
    font-weight:bold;
    color:rgba(20,116,185,0.86);
    text-decoration:none;
}

.secondary-post{
    font-size:0.8em;
}


/*****Media Queries*****/
@media screen and (max-width: 800px){
    .nav-container{
        flex-direction:column;
        margin:0;
    }
    
    .nav-item{
        margin:0 1em 0 1em;
    }
    
    aside{
        display:none;
    }
}

@media screen and (max-width: 600px){
    .nav-container{
        flex-direction:row;
        padding:1em;
        justify-content:space-around;
    }
    
    .nav-list{
        flex-direction:column;
        align-items:center;
    }
    
    .nav-item{
        margin:0.25em;
    }
    
    .nav-link{
        padding:0.25em;
    }
    
    #home-text-1{
        margin:0 0 0.5em 0;
    }
    
    .education-flex-container{
        flex-direction:column;
    }
    
    .course-list-container{
        flex-direction:column;
        padding-left:0;
    }
    
    .course-list{
        display:flex;
    }
    
    .school-info-container{
        flex-direction:column;
    }
    
    .grades-list{
        display:flex;
        justify-content:space-between;
        margin:0;
    }
    
    .secondary-post{
        flex-direction:column;
    }
    
    .secondary-post-image{
        flex:initial;
        margin-right:0;
    }
    
    .portfolio-content-container{
        flex-direction:column;
    }
    
    .portfolio-image{
        margin:1rem;
    }
    
    #game{
        display:none;
    }
    
    .float-container{
        display:flex;
        flex-direction:column;
    }
    
    .float-image{
        flex-direction:row;
        justify-content:space-around;
        margin:0;
        float:none;
    }
    
    .float-image-bottom{
        order:2;
    }
    
    .float-text-top{
        order:1
    }
    
    .photo-grad{
        height:200px;
        padding:0 0 2em 0;
        object-fit:cover;
        object-position:0% 0%;
    }
    .about-sports-container{
        flex-direction:column;
    }
    .about-sports-images-container{
        margin:0;
    }
    .about-sports-image{
        margin:2em 0 0 0;
    }
}