html {
    font-size: 17px;
    font-family:'Roboto', sans-serif;
    background-color: #F0F4EF;
    height: 100%;
    color: #313628;
}

body {
    margin: 0;
    display:grid;
    grid-template-rows: 1fr 20fr 1fr;
    height: 100%;
}

main {
    height:100%;
}

h1, h2{
    font-family:'Roboto Mono', monospace;
    color: #00467f;
}

h1{
    color: #F0F4EF;
}

h1:hover{
    color:#bfe2ff;
}

header{
    display:grid;
    grid-template-columns: 1fr auto 2fr;
    justify-content: space-between;
    align-items: center;
    padding-left: 8%;
    padding-right: 8%;
    border-bottom: 1px solid;
    background-color: #00467f;
    color: #aabdf8;
    font-family: 'Roboto Mono', monospace;
    background-image: url(../img/header-bg.png);
}

.name {
    grid-column: 1;
}

header nav{
    grid-column: 3;
}

.links {
    float:right;
}

.links li{
    display:inline;
    font-size: 1.5em;
    padding-left: 0.5em;
}

a{
    color: #bfe2ff;
    text-decoration-line: none;
}

a:hover{
    color: #F0F4EF;
}

a.selected{
    color: #F0F4EF;
}

main{
    background-image: url(../img/main-bg.png);
}

main a{
    color: #00467f;
}

main a:hover{
    color:#00467fdc;
}


section {
    padding-left: 8%;
    padding-right: 8%;
    font-size: 1.25em;
    text-align: justify;
}

section p{
    background-color: rgba(240, 244, 239, 0.6);
}

#projects p{
    display: none;
    transition: all 0.2s;
}

.project-list{
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr));
    justify-items:center;
    align-items:center;
}

.project-list button{
    width: 100%;
    height: 100%;
    font-size: 0.8em;
    border: 1px solid #bfe2ff;
    color:#F0F4EF;
    background-color: #00467f;
    background-image: url(../img/header-bg.png);
    transition: all 0.2s;
}

.project-list button:hover{
    background-color:#bfe2ff;
    color:#00467f;
    background-image: none;
    cursor: pointer;
}

#skills div{
    font-size: 2em;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, 2em);
    grid-auto-rows: 2em;
    justify-content: space-between;
    padding-bottom: 1.5em;
}

#skills i{
    padding: 1em;
    padding-left: 0.25em;
}

#contact div{
    font-size: 2em;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, 2em);
    grid-auto-rows: 2em;
    padding-bottom: 1.5em;
}

#contact i{
    padding: 0.5em 1em;
}

footer{
    display: grid;
    background-color: #00467f;
    color: #bfe2ff;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    font-family:'Roboto Mono', monospace;
    padding-left: 8%;
    padding-right: 8%;
    font-size: 1em;
    background-image: url(../img/header-bg.png);
}

.footer-links{
    grid-column: 3;
    list-style-type: none;
}

.footer-links i{
    font-size: 1.25em;
}

footer li{
    padding: 0.25em;
}

@media only screen and (max-aspect-ratio: 1.95) {
    .project-list{
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-aspect-ratio: 1/1)  {
    header, footer, section {
        padding-left: 5%;
        padding-right: 5%;
    }

    html{
        font-size: 24px;
    }
}