.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 30px;
}

#background {
        max-width: 1440px;
        padding-left: 80px;
        padding-right: 80px;
    }

#main-container {
    padding-bottom: 25px;
    background-color: #F7EFE2;
    display: grid;
    grid-template-columns: 55% 1fr;
    grid-template-areas:
        "work skills"
        "work education";
    gap: 25px;
}

section {
    padding: 40px;
}

#hero {
    display: flex;
    gap: 50px;
    background-color: #F8FFEA;
    justify-content: space-between;
}

#img-wrapper {
  display: flex;
  justify-content: center;
  min-width: 40%;
}

#hero img {
    max-height: 300px;
    border-radius: 2px;
}

#hero-content {
    max-width: 55%;
}

#work, #contact  {
    border-radius: 2px;
    background-color: #c5b8a1;
}

#skills, #education, #projects {
    border-radius: 2px;
    background-color: #BFC9A9;
}

#education {
    background-color: #F8FFEA;
}

#work {
    margin-top: 25px;
    margin-left: 25px;
    grid-area: work;
}

#skills {
    margin-top: 25px;
    margin-right: 25px;
    grid-area: skills;
}


.loading-bar {
    margin-bottom: 25px;
    letter-spacing: 1px;
}

    .loading-bar .flex {
        margin-bottom: 2px;
    }

#projects {
    margin-left: 25px;
}

#projects img {
    height: 50px;
    width:100px;
}

    #projects .gap25 {
        justify-content: space-between;
    }

    #projects .mw150 b:first-of-type{
        text-align:center;
    }

    #projects .mw150 a{
        display: flex;
        justify-content: center;
    }

    #projects .mw150 p{
        margin-left: 5px;
    }

    #projects .mw150 b:last-of-type{
        margin-left: 5px;
    }

#contact {
    margin-right: 25px;
}

#contact ul {
    list-style: none;
    margin: 0;
}

#education {
    margin-right: 25px;
    grid-area: education;
}

hr {
    margin: 0 auto;
    margin-bottom: 50px;
    margin-top: 50px;
    max-width: 500px;
    color: #a49986;
}

section ul {
    margin-left: 30px;
}

.work-history-entry {
    margin-bottom: 20px;
}

.work-history-header {
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.work-history-company {
    font-size: 1.1rem;
    font-weight: 600;
}

.work-history-role {
    font-weight: 600;
    font-style: italic;
    margin-bottom: 30px;
}

.work-history-date {
    font-weight: 600;
}

.work-history-tech {
    font-weight: 600;
    margin-top: 30px;
}

@media (min-width: 320px) and (max-width: 480px){
    #background {
        max-width: 480px;
        width:100%;
        padding-left: 25px;
        padding-right: 25px;
    }

    #hero {
        flex-direction: column;
        align-items: center;
    }

    #hero-content {
        max-width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    #img-wrapper {
        display: none;
    }

    #mobile-img-wrapper {
        display: flex;
        margin-bottom: 25px;
    }

    #hero img{
        margin-left: 0;
    }

    #hero-content .flex {
        width: 320px;
        padding: 40px;
        padding-top: 0;
    }

    h1 {
        font-size: 2.5rem;
    }

    section > .flex {
        justify-content: center;
    }

    #main-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "work"
            "skills"
            "education"
            "projects"
            "contact";
    }

    #work, #projects {
        margin-right: 25px;
    }

    #skills, #education, #contact {
        margin-left: 25px;
        margin-top: 0px;
    }

    .work-history-entry {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .work-history-header{
        flex-direction: column;
        align-items: center;
    }

    #contact .margin-b-25 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align:center;
    }

    #projects .gap25 {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    #projects .mw150 {
        max-width: fit-content;
        align-items: center;
        text-align: center
    }

    #projects img {
        height: 100px;
        width: 150px;
    }

    textarea {
        height: 200px;
    }

    #education {
        display: flex;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    #education > .flex-col > .flex {
        flex-direction: column;
    }

    #skills {
        letter-spacing: 0px;
        font-size: .9rem;
    }

    #projects a {
        text-align: center;
        font-size: 1.2rem;
    }

    #skills a {
        text-align: center;
        font-size: 1.2rem;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    #background {
        max-width: 768px;
        padding-left: 25px;
        padding-right: 25px;
    }

    h1 {
        font-size: 2.5rem;
    }

    #hero {
        flex-direction: column;
        align-items: center;
    }

    #hero-content {
        max-width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    #img-wrapper {
        display: none;
    }

    #mobile-img-wrapper {
        display: flex;
        margin-bottom: 25px;
    }

    #main-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "work"
            "skills"
            "education"
            "projects"
            "contact";
    }

    #work, #projects {
        margin-right: 25px;
    }

    #skills, #education, #contact {
        margin-left: 25px;
        margin-top: 0px;
    }
     
    #projects .flex-col .flex {
        justify-content: space-between;
    }

}

@media (min-width: 769px) and (max-width: 1024px) {
    textarea {
        height: 200px;
    }

    #education {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    #education > .flex-col > .flex {
        flex-direction: column;
    }

    #skills {
        letter-spacing: 0px;
        font-size: .9rem;
    }

    .work-history-header {
        flex-direction: column;
    }

    .work-history-role {
        margin-bottom: 10px;
    }

    #hero img {
        margin-left: 0px;
    }
}

@media (min-width: 1025px) and (max-width: 1220px) {
    textarea {
        height: 200px;
    }

    #education {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    #education > .flex-col > .flex {
        flex-direction: column;
    }

    #skills {
        letter-spacing: 0px;
        font-size: .9rem;
    }

    .work-history-header {
        flex-direction: column;
    }

    .work-history-role {
        margin-bottom: 10px;
    }
}