*{
    margin: 0px;
    padding: 0px;
}
body{
    background-image: url("img/bg.png");
    font-family: 'Coda', Helvetica, sans-serif;
    font-size: 22px;
}
main{
    min-height: 300px;
}
a{
    color: #303080;
}
a:visited{
    color: purple;
}
#header-bar{
    background-color: black;
    min-height: 45px;
}
#header-bar > a{
    display: inline-block;
    text-decoration: none;
    max-width: 25%;
    padding: 10px;
    color: rgba(0, 102, 75, 1);
}
#header-bar > a:hover{
    background-color: rgb(41, 41, 41);
    color: rgb(0, 211, 158);
}
#page-heading{
    background-color:rgba(0, 102, 75, 0.75);
    text-align: center;
    border-bottom: 5px solid black;
}
.section{
    background-color: rgba(0, 102, 75, 0.75);
    border-radius: 25px;
    border: solid 5px black;
    padding: 10px;
    margin: 10px 0px;
}
main{
    margin: 30px;
    }
#welcome-div{
    display: flex;
    text-align: center;
    align-items: center;
}
#headshot{
    border-radius: 25px;
    margin: auto;
    border: solid 1px black;
}
#welcome-message{
    color: lightgrey;
    max-width: 60%;
}
.assignment-div{
    padding: 10px;
    margin: 10px 0px;
    display: grid;
    grid-template-columns: 70% 30%;
}
#it4203-work{
    border-top: 4px solid black;
    grid-row: 2;
    grid-column: 1 /span2;
    display: none;
}
#capstone-work{
    border-top: 4px solid black;
    grid-row: 2;
    grid-column: 1 /span2;
    display: none;
}
#page-message{
    padding: 2px;
    text-align: center;
}
hr{border: 2px solid black;}
.expander{
    display: flex;
    font-size: 48px;
    cursor: pointer;
    float: right;
    text-align: right;
    align-items: center;
    justify-self: flex-end;
}
#other-div{
    text-align: center;
}
footer{
    background-color: #181818;
    margin-top: 50px;
    border-top: 2px solid black;
    text-align: center;
    height: auto;
    padding: 5px;
}
#icons-wrap{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3,auto);
    grid-template-rows: auto;
    justify-items: center;
    padding: 5px 0px;
}
.icon-container{
    max-height: 125px;
}
.icon{
    height: auto;
    width: 100%;
    grid-row: 1;
}
.dev-timestamp{
    margin: 15px;
}
#apps-div{
    padding: 10px;
    margin: 10px 0px;
}
#apps-div>ul{
    padding: 15px;
}
#capstone-project-div{
    padding: 10px;
    margin: 10px 0px;
}
#header-bar a.nav-icon{
    display: none;
}
#wrap{
    min-height: 100vh;
}
@media (max-width: 950px) {

    #header-bar a:not(:first-child){
        display: none;
    }

    #header-bar a.nav-icon{
        display: block;
        float: right;
        display: block;
    }

    #header-bar.responsive{position: relative;}
    #header-bar.responsive a.nav-icon{
        position: absolute;
        right: 0;
        top: 0;
    }
    #header-bar.responsive a{
        float: none;
        display: block;
        text-align: left;
    }

    #wrap{
        margin: 10px;
    }
    #welcome-div{
        display: flex;
        flex-direction: column;
        padding: 1%;
        align-items: center;
    }
    #welcome-message{
        padding: 3% 5% 0 5%;
        max-width: none;
    }
    .icon{max-width: 72px;}    
}