html{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

div.struct > div{
    padding: 1em;
}

div.header{
    display:grid;
    grid-template-columns: 1fr 5fr 1fr;
    grid-column-gap: 1em;
    place-items: center;

    position: sticky;
    height:fit-content;

    background:#9c9c9c;
    border-radius: 10px;
}

div.linksList{
    display:grid;
    grid-template-columns: repeat(3, 4em);
    height: fit-content;
}

div.linkBox{
    
}

p.pageName{
    font-size: 35px;
    text-align: center;
    vertical-align: top;
    line-height: 1px;
}

div.pageList{
    display: flex;
}

div.page{
    font-size: 20px;
}


div.wrapper{
    display:grid;
    grid-template-columns: 1fr 4fr;
    grid-column-gap: 1em;
}
div.wrapper > div{
    background:#9c9c9c;
    padding: 1em;

    /*border-style: solid;
    border-width: 5px;
    border-color: #717171;*/
    border-radius: 10px;
    /*box-shadow: 2px 2px 5px 5px rgb(109, 108, 108) inset;*/
}

div.about{
    position: sticky;
    top: 3.5em;
    height: fit-content;
}

div.detail{
    position: sticky;
    top: 3.5em;

    height: 50em;
    overflow-y: scroll;
    border-width: 20px;
    border-color: #9c9c9c;
}

img.image{
    border-radius: 5px;
}

div.projectList{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2em;
    grid-row-gap: 2em;
    grid-auto-rows:minmax(100px, auto);
}

div.project{
    background:#95a472;
    padding: 1em;
    border-style: solid;
    border-width: 5px;
    border-radius: 25px;
    border-color: #75815a;
    /*box-shadow: 5px 5px 5px 5px rgb(109, 108, 108);*/
}

div.experienceList{
    display: grid;
    grid-row-gap: 1em;
}

div.educationList{
    display: grid;
    grid-row-gap: 1em;
}

div.skillsList{
    display:flex;
    flex-wrap: wrap;
    gap: 0.2em;
}

button.skill{
}

p.title{
    text-align:center; 
    vertical-align: text-top;
    font-size: 1.5em;
    position:static;
    line-height: 1px;
}

/* Blog specific css*/

div.blogPosts{
    display: grid;
    padding: 1em;
    background:#9c9c9c ;
    border-radius: 25px;
    grid-row-gap: 1em;
}

div.post{
    background:#75815a;
    border-radius: 15px;
    padding: 0.2em;
    padding-left: 1em;
    padding-right: 1em;
}

/*

.css is overwritten by whatever is the nearest property to the item. Item overwrites container1, overwrites container2, ...

*/