* {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #6d6d6d
}

body {
    /* background-color: rgb(169, 239, 255); */
    background-color: #faf7ef
}

.nav {
    padding: 16px 0 0 0;
    margin: 0 20px 0px 0;
    text-align: right
}

.intro-container, .codescape, .brie {
    margin-top: -1%;
    margin-left: 18%;
    margin-right: 17%;
    margin-bottom: 2%;
    display: flex;
    justify-content: center
}

.me {
    color: #6d6d6d;
    margin-top: -1px;
    margin-left: 3em;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px
}

#name-container {
    background-image: url('/images/background.jpg');
    height: 85vh;
    background-position: top;
    background-attachment: fixed;
    margin: -8px
}

#intro {
    padding: 6px;
    margin: -8px
}

.logos {
    margin-top: -1.3vh;
    display: flex;
    justify-content: center
}

.fa-github, .fa-linkedin-in, .fa-envelope {
    /* width: 4em;
    height: 4em; */
    color: #777777;
    margin: 0 1.5vw 0 1.5vw;
    /* filter: invert(30%); */
    transition: color 0.3s
}

.fa-github:hover, .fa-linkedin-in:hover, .fa-envelope:hover {
    color: #c7e0dd
}

footer {
    margin: 1vh 0 0 0
}

h1 {
    font-family: 'Tiempos Fine';
    font-size: 90px;
    color: rgb(71, 71, 71);
    font-weight: none;
    margin-top: 22vh;
    letter-spacing: -3pt;
    text-align: center;
    opacity: 0.8
}

h1:hover {
    opacity: 0.6
}

.link {
    color: rgb(187, 187, 187);
    font-size: 25px;
    font-family: 'Courier New', Courier, monospace;
    text-decoration: none;
    padding: 15px;
    display: inline-grid;
    transition: all 0.4s ease-out
}

.link:hover {
    color: rgb(107, 107, 107);
    text-transform: lowercase;
    letter-spacing: -3px;
    cursor: pointer
    /* box-shadow: inset 0 -2px 0 #FFFFFF */
}

p {
    display: flex;
    color: #888888;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.2px;
    line-height: 22px
}

span {
    display: flex;
    justify-content: center;
    color: #929292;
    font-family: 'Montserrat', sans-serif;
    margin: 3vh 0 5vh 0;
    line-height: 25px;
    font-size: 14px;
    letter-spacing: 0.05vw
}

h2 {
    font-size: 48px;
    color: #c7e0dd;
    background: #faf7ef;
    font-family: 'Tiempos Fine';
    text-align: center;
    text-transform: lowercase;
    padding: 0.3em;
    margin: 23px;
    letter-spacing: -1px;
    box-shadow: 8px 8px #b3b3b3;
    border: 1px solid #757575;
    margin-bottom: 1.2em
}

h3 {
    font-family: 'Montserrat', sans-serif;
    color: #616161;
    text-align: center;
    margin: 0.7em;
    font-weight: 600;
    font-size: 30px;
    line-height: 1em;
    text-transform: uppercase;
    letter-spacing: 1.8px
}

.title {
    margin: -24px
}

.self {
    height: 47vh;
    width: auto;
    margin-bottom: 1em
}

.mockup {
    height: 42vh;
    width: auto
}

.mockup:hover {
    animation: shake 0.5s; 
    animation-iteration-count: infinite; 
}
  
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

#header {
    color: #c7e0dd;
    padding: 0.3em;
    box-shadow: 8px 8px #c7e0dd;
    border: 1px solid #757575;
    margin-bottom: 1.2em
}

.header-container {
    display: flex;
    justify-content: center
}

#projects {
    background-color: #c7e0dd;
    padding: 1px;
    align-items: center;
    margin: -8px
}

.description-container {
    display: flex;
    flex-direction: column;
    margin-top: 37px
}

.fa-github-alt, .fa-window-maximize {
    /* width: 2.5em;
    height: 2.5em;
    filter: invert(97%);
    color: #FFFFFF; */
    transition: color 0.3s;
    margin: 0 0.7vw 0 0.7vw
}

.fa-github-alt:hover, .fa-window-maximize:hover {
    color: #b3b3b3;
    opacity: 0.7
}

.icon-container {
    display: flex;
    justify-content: center;
    margin-top: 1.5em;
    margin-bottom: 5px
}

.brie {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly
}

@media screen and (max-width: 1024px) {
    .codescape, .brie {
        display: flex;
        flex-direction: column
    }
    .me {
        font-size: 15px
    }
    #headshot {
        display: flex;
        justify-content: center
    }
    .intro-container {
        width: 87vw;
        margin-left: 7vw;
        flex-direction: column
    }
    .mockup {
        width: 61vw;
        height: 38vh
    }
    .self {
        height: 56vh
    }
    .logos {
        margin-top: -1vh
    }
}

@media screen and (max-width: 375px) {
    .link, .codescape, .brie, .intro-container {
        display: flex;
        flex-direction: column;
        line-height: 0vh
    }
    .logos {
        margin-top: -1vh;
        opacity: 0.8
    }
    .fa-github-alt, .fa-window-maximize {
        margin: 0 3vw 0 3vw
    }
    .fa-github, .fa-linkedin-in, .fa-envelope {
        width: 0.5em;
        height: 0.5em;
        margin: 0 12vw 0 3vw
    }
    .header {
        margin-top: 23vh;
        margin-left: -10vw;
        text-align: left
    }
    .description-container, .me {
        font-size: 15px;
        margin-left: 0vw
    }
    .mockup {
        width: 74vw;
        height: 28vh
    }
    .mockup-container {
        display: flex;
        justify-content: space-around
    }
    h1 {
        margin-top: -10vh;
        font-size: 84px;
        margin-left: 32px
    }
    h2 {
        font-size: 42px
    }
    #name-container {
        padding-right: 0;
        margin-right: -3vw;
        padding-bottom: 6vh
    }
    #intro, #projects {
        padding-right: 0;
        margin-right: -3vw;
        padding-bottom: 6vh
    }
    .nav {
        display: flex;
        flex-direction: column;
        text-align: right
    }
    .link {
        font-size: 25px
    }
    .self {
        height: 49vh
    }
    #headshot {
        display: flex;
        justify-content: space-around
    }
}