*{
    font-family: "Quicksand", sans-serif;
    color: #fff;
    margin: 0;
}

body {
    background-color: #333;
    margin: 0;
}

/* 930px wide */

@media only screen and (max-width: 930px) {
    .container {
        flex-direction: column;
    }

    .container-item {
        width: 100% !important;
    }

    .container-item h2 {
        width: max-content;
        margin: auto;
    }
}

@media only screen and (max-width: 602px) {
    .body {
        overflow: hidden !important;
    }

    .navbar {
        flex-direction: column;
        max-height: fit-content;
        align-items: center;
    }

    .navbar-header {
        flex-direction: column-reverse;
        width: 100% !important;
    }

    .navbar-header span {
        margin-bottom: 1rem;
    }

    .navbar-header img {
        margin-bottom: 1rem;
        max-width: 90px !important;
        max-height: 90px !important;
    }

    .navbar-items {
        flex-direction: column;
        width: auto !important;
        align-items: center;
        gap: 0.5rem;
    }

    .nav-item {
        width: max-content;
        font-size: x-large !important;
    }

    .page-header-container {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }

    .header-text::after {
        content: " " !important;
    }

    .project-list {
        align-items: center !important;
    }

    .list-item {
        width: 100% !important;
    }

    .container-item {
        font-size: x-large;
        padding: 5px !important;
        padding-right: 0px;
    }

    .list-item p {
        width: fit-content !important;
        margin: auto;
    }

    .footer {
        max-height: max-content !important;
        gap: 0.5rem;
    }

    .social-links {
        flex-direction: column !important;
        align-items: center;
        gap: 1rem;
    }
}

/* NAVBAR */

.navbar {
    display: flex;
    max-height: 10%;
    background-color: #000;
    padding: 20px;
    margin-bottom: 0;
}

.navbar-header {
    vertical-align: middle;
    width: 35%;
    font-size: 1.5em;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.navbar-header img, .navbar-header span {
    vertical-align: middle;
}

.navbar-header img {
    max-height: 75px;
    max-width: 75px;
    border-radius: 15px;
    margin-right: 5px;
}

.navbar-items {
    vertical-align: middle;
    display: flex;
    width: 65%;
    justify-content: flex-end;
    align-content: center;
    margin: auto;
}

.nav-item {
    vertical-align: middle;
    padding-right: 10px;
    font-size: 1.3em;
}

.nav-item:last-child {
    padding-right: 0px;
}

.nav-item a {
    text-decoration: none;
}

.nav-item .active {
    text-decoration: underline;
}

/* PAGE HEADER */

.page-header {
    margin-top: 0px;
    height: 500px;
    background-image: url('img/milwaukee.jpg');
    filter: grayscale(100%);
    display: flex;
    flex-direction: column;
    padding: 0;
    text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.page-header-container {
    margin: auto;
    padding: 0;
}

.header-text {
    font-size: 1.17rem;
}

.header-text::after {
    content: "\007C ";
}

.header-text:last-child::after {
    content: " ";
}

/* CONTAINER */

.container {
    max-height: 70%;
    width: 100%;
    display: flex;
}

.container-item {
    width: 33%;
    padding: 4px;
    padding-right: 0px;
}

.container-item:first-child {
    padding-left: 0px;
}

.container-item > h2:first-child {
    padding-left: 4px;
}

.list-item {
    margin-bottom: 5px;
}

.list-item:last-child {
    margin-bottom: 0;
}

.list-item p {
    font-weight: 100;
}

/*.container-item span {
    font-weight: 600;
}*/

.project-list, .experience-list, .education-body {
    margin-top: 5px
}

/* CONTAINER ITEM > PROJECT LIST */

.project-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.project-list > .list-item {
    width: 33%;
}

.project-list > .list-item:last-child {
    border-bottom: 0;
}

.project-list > .list-item p {
    padding: 5px;
    font-size: larger;
}

.project-list > .list-item i {
    font-size: large;
}


/* CONTAINER ITEM > EXPERIENCE LIST */

.experience-list > .list-item {
    padding: 3px;
}

.experience-list > .list-item p a {
    text-decoration: none;
}

.experience-list > .list-item p a:hover {
    text-decoration: underline;
}
.work-title {
    font-weight: 600 !important;
}

.work-desc {
    font-size: small;
}

.work-date {
    color: rgb(163, 160, 160);
    font-style: italic;
}

/* CONTAINER ITEM > EDUCATION BODY */

.education-body {
    padding: 3px;
}

.education-body ul li {
    font-style: italic;
    font-weight: 100;
    color: rgb(163, 160, 160);
}

/* TESTIMONIALS */

.testimonals {
    padding: 10px;
}

.review-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.review-item {
    margin-top: 10px;
    background-color: #000;
    width: 20%;
    border-radius: 20px;
}

.review-text {
    margin: 30px 20px 0px 20px;
    font-size: larger;
}

.author, .author-title {
    margin-left: 15px;
    color: rgb(163, 160, 160);
}

.author-title {
    margin-bottom: 15px;
}

/* FOOTER */
.footer {
    max-height: 5%;
    display: flex;
    flex-direction: column;
    background-color: #000;
}

.social-links {
    display: flex;
    justify-content: center;
    font-size: smaller;
    margin-top: 5px;
    margin-bottom: 5px;
}

.link {
    margin-right: 10px;
}

.link i {
    color: rgb(163, 160, 160);
    padding: 0;
    margin: 0;
}

.link a {
    color: rgb(163, 160, 160);
    text-decoration: none;
}

.footer p {
    margin: auto;
    font-size: x-small;
    color: rgb(163, 160, 160);
}

.footer p a {
    color: rgb(163, 160, 160);
    text-decoration: none;
    font-style: italic;
}

.fa-heart{
    color: red;
}