style.css

/* CSS Reset */

* {
    border: 0;
    margin: 0;
    padding: 0;
    font-family: 'Red Hat Text', sans-serif;
    text-decoration: none;
}

/* General Theming */

body {
    max-width: 1024px;
    margin: 0 auto;
    border-left: 1px solid #e3e5e7;
    border-right: 1px solid #e3e5e7;
    padding: 2em;
}

.flex-object {
    box-shadow: 5px 5px 5px #e3e5e7;
}



h1,h2,h3,h4,h5,h6 {
    font-family: 'Red Hat Display', sans-serif;
}

code {
    font-family: 'Red Hat Mono', monospace;
}

ol, ul {
	list-style: none;
}

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

section {
    border-bottom: 1px solid #e3e5e7;
    padding: 2em;
}

section h1 {
    display: inline-block;
    padding: 0 0.2em;
    border-bottom: 1px solid #e3e5e7;
    margin-bottom: 1em;
}

section:first-of-type {
    border-top: 1px solid #e3e5e7;
}

header {
    text-align: center;
    padding: 2em;
}

nav {
    text-align: center;
    border-top: 1px solid #e3e5e7;
}

nav li {
    display: inline-block;
}
nav a {
    display: block;
    padding: 1em;
}

.experience img {
    display: inline;
    max-width: calc(100% - 2em);
    padding: 1em;
    border-top: 1px solid #e3e5e7;
    margin: 1em auto;
}

.industries {
    margin: 1em;
}

.list-point {
    list-style:disc;
    max-width: 50%;
    margin: 1em auto;
}

.experience h2 {
    font-size: 100%;
}
.experience h3 {
    font-size: 90%;
}
.experience h4 {
    font-size: 80%;
}

/* Flex container for about section */

.about .flex-container {
    display: flex;
    flex-wrap: wrap;
}
.about .flex-object-25 {
    display: inline-block;
    flex: calc(25% - 2em - 2px);
    max-width: calc(25% - 2em - 2px);
    margin: 0.5em;
    padding: 0.5em;
    text-align: center;
    line-height: 1.7;
}
.about .flex-object-25 img {
    width: 100%;
    border-radius: 50%;
    border: 1px solid #e3e5e7;
    box-shadow: 5px 5px 5px #e3e5e7;
}
.about .flex-object-75 {
    display: inline-block;
    flex: calc(75% - 2em - 2px);
    max-width: calc(75% - 2em - 2px);
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #e3e5e7;
    text-align: center;
    line-height: 1.7;
    box-shadow: 5px 5px 5px #e3e5e7;
}

/* Flex container for experience section */

.experience .flex-container {
    display: flex;
    flex-wrap: wrap;
}
.experience .flex-object {
    display: block;
    flex: calc(25% - 2em - 2px);
    max-width: calc(25% - 2em - 2px);
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #e3e5e7;
    text-align: center;
    line-height: 1.7;
}
.experience h2 {
    font-size: 100%;
    display: inline-block;
    padding: 0 0.2em;
    border-bottom: 1px solid #e3e5e7;
    margin-bottom: 1em;
}
.experience h3 {
    font-size: 90%;
}
.experience h4 {
    font-size: 80%;
}
.experience img {
    display: inline;
    margin: 1em auto;
    padding: 1em;
}

/* Flex container for projects section */

.projects .flex-container {
    display: flex;
    flex-wrap: wrap;
}
.projects .flex-object {
    display: block;
    flex: calc(33% - 2em - 2px);
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #e3e5e7;
    text-align: center;
    line-height: 1.7;
}
.projects h2 {
    font-size: 100%;
    display: inline-block;
    padding: 0 0.2em;
    border-bottom: 1px solid #e3e5e7;
    margin-bottom: 1em;
}
.projects h3 {
    font-size: 90%;
    margin-bottom: 1em;
}
.projects h4 {
    font-size: 80%;
}
.projects img {
    display: block;
    width: calc(100% - 2em);
    max-width: 250px;
    margin: 1em auto;
    padding: 1em;
    border-top: 1px solid #e3e5e7;
    border-bottom: 1px solid #e3e5e7;
}

/* Flex container for Education section */

.education .flex-container {
    display: flex;
    flex-wrap: wrap;
}
.education .flex-object {
    display: inline-block;
    flex: calc(50% - 2em - 2px);
    max-width: calc(50% - 2em - 2px);
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #e3e5e7;
    text-align: center;
    line-height: 1.7;
}

/* Flex container for applications section */

.applications .flex-container {
    display: flex;
    flex-wrap: wrap;
}
.applications .flex-object {
    display: inline-block;
    flex: calc(33% - 2em - 2px);
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #e3e5e7;
    text-align: center;
    line-height: 1.7;
}
.applications img {
    display: block;
    width: calc(100% - 2em);
    max-width: 250px;
    margin: 1em auto;
    padding: 1em;
    border-top: 1px solid #e3e5e7;
    border-bottom: 1px solid #e3e5e7;
}
.applications h3 {
    font-size: 90%;
}
.applications h4 {
    font-size: 80%;
}

/* Flex container for contact section */

.contact .flex-container {
    display: flex;
    flex-wrap: wrap;
}
.contact .flex-object {
    display: inline-block;
    flex: calc(50% - 2em - 2px);
    max-width: calc(50% - 2em - 2px);
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #e3e5e7;
    text-align: center;
    line-height: 1.7;
}

.ssh-key code {
    display: inline-block;
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #e3e5e7;
    text-align: center;
    line-height: 1.7;
    width: calc(100% - 2em - 2px);
    max-width: calc(100% - 2em - 2px);
    word-wrap: break-word;
    overflow:scroll;
    box-shadow: 5px 5px 5px #e3e5e7;
}

footer {
    text-align: center;
    padding: 2em;
}

@media (max-width: 800px) {
    body, section {
        padding: 2em 0px;
    }    
    .about .flex-object-75 {
        flex: calc(100% - 2em - 2px);
        max-width: calc(100% - 2em - 2px);
    }
    .about .flex-object-25 {
        visibility: hidden;
        display: none;
    }
    .experience .flex-object {
        flex: calc(50% - 2em - 2px);
        max-width: calc(50% - 2em - 2px);
    }
    .projects .flex-object {
        flex: calc(50% - 2em - 2px);
    }
    .education .flex-object {
        flex: calc(100% - 2em - 2px);
        max-width: calc(100% - 2em -2px);
    }
    .applications .flex-object {
        flex: calc(50% - 2em - 2px);
    }
    .contact .flex-object {
        flex: calc(100% - 2em - 2px);
        max-width: calc(100% - 2em - 2px);
    }
}

@media (max-width: 600px) {
    .experience .flex-object {
        flex: calc(100% - 2em - 2px);
        max-width: calc(100% - 2em - 2px);
    }
    .projects .flex-object {
        flex: calc(100% - 2em - 2px);
    }
    .applications .flex-object {
        flex: calc(100% - 2em - 2px);
    }
}