body {
    background-color: #eeeeee;
    font-family: 'Roboto', sans-serif;
    font-size: 140%;
    margin: 0;
}

/* Transition */
/* https://stackoverflow.com/a/22767958 */
/* https://stackoverflow.com/a/21145689 */
/* http://blog.pixelastic.com/2010/07/23/click-html-element/ */
#load-overlay {
    display: inline-block;
    background-color: #333;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2000;
    
    vertical-align: top;
    transition: opacity 1.6s;
    -webkit-transition: opacity 1.6s;
    opacity: 1;

    pointer-events: none;
}

#load-overlay h1 {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #e3e6eb;
    font-size: 80px;
}

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    position: fixed;
    top: 0;
    width: 100%;
    z-index: 200;

    background-color:#283149;
    font-family: 'Source Sans Pro', sans-serif;
    color: #ffffff;
    padding: 0;
}

header a {
    color: inherit;
}

#name {
    font-size: 170%;
    flex-shrink: 0;
}

#profile {
    width: 110px;
    /* width: 10%; */
    height: auto;
    padding-right: 22px;
}

#nav-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#nav-links {
    display: flex;
    flex-direction: row;

    list-style-type: none;
}

#nav-links li {
    padding: 0px 20px;
}

header a,
main a {
    text-decoration: none;
    transition: all 0.3s ease 0s;
    font-weight: bold;
}

main {
    width: 50%;
    margin: 0 auto;
    margin-top: 140px;
}

main a {
    color: #3d5595
}

main a:hover {
    color: #283149
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    color: #283149;
}

main h2 {
    border-bottom: 4px solid #283149;
    margin-bottom: 12px;
}

.job .top-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: -30px 0;
}

/* https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01 */
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    padding: 0 20px;
    min-width: 320px;
}

.icon-align {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: -20px;
}

.icon-align svg {
    padding-right: 20px;
}

.icon-align img {
    height: 48px;
    width: 48px;
    border-radius: 10px;
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);
}

.icon-align .img-wrapper {
    padding-right: 20px;
}

.tech-stack h4,
.tech-stack p {
    margin-bottom: -10px;
}

/* https://stackoverflow.com/a/6509239 */
.tech-stack ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

.contributors h4 {
    margin-bottom: -10px;
}

.contributors .icon-align img {
    height: 38px;
    width: 38px;
}

.contributors .icon-align .img-wrapper {
    padding: 30px 20px;
}

.contributors {
    padding-bottom: 10px;
}

#email, #phone, #location {
    margin-bottom: 0;
}

#email svg, #phone svg, #location svg {
    padding-right: 40px;
}

.google-maps {
    overflow: hidden;
    padding-bottom: 20px;
    padding-top: 20px;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: #e3e6eb;
    color: #736e6e;
    font-size: 10px;
    padding: 10px;
}

#back-to-top #up,
#back-to-top #up-left {
    position: fixed;
    right: 40px;
    bottom: 40px;
    color: #283149;
}

/* https://stackoverflow.com/a/19753034 */
/* https://css-tricks.com/swapping-svg-icons/ */
#back-to-top #up,
#back-to-top {
    display: none;
}

/* https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c */
@media(hover: hover) and (pointer: fine) {
    #nav-links li a:hover {
        color: #596070;
    }

    #back-to-top:hover #up-left,
    #back-to-top:active #up-left {
        display: none;
    }

    #back-to-top:hover #up,
    #back-to-top:active #up {
        display: block;
    }
}