* {
    box-sizing: border-box;
}

/* responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* accessibile icons with class of visually-hidden */
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

body {
    background-color: #181818;

    font-family: 'Montserrat', sans-serif;
    color: #fff;
    margin: 6rem;
    padding: 0;
    line-height: 1.85;

    display: grid;
    grid-template-columns: 1fr 2fr;
    font-weight: 300;
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
}

.logo {
    margin-bottom: 2rem;
}

/* header {
    position: sticky;
    top: 0;
} */

ul li {
    list-style: none;
    padding-bottom: 2rem;
}

ul {
    padding: 0;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.5rem;
    margin: 0;
    padding-bottom: .5rem;
}

.contact-icons a {
    color: white;
    font-size: 1.5rem;
    text-decoration: none;
}

.contact-icons {
    display: flex;
    flex-flow: row nowrap;
    gap: 1.25rem;
    align-items: center;
}

footer {
    position: fixed;
    bottom: 0;
}
footer p {
    font-weight: 300;
    font-size: .75rem;
    text-align: center;
}

/* NAVIGATION HOVER -------------- */

.nav-menu a {
    position: relative;
}
.nav-menu a:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #fff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }
  .nav-menu a:hover:after { 
    width: 100%; 
    left: 0; 
  }

/* CARD HOVER ------------------ */

.proj-card:hover {
    transform: scale(1.1);
}
.proj-card {
    transition: transform 0.5s;
}




/* PROJECT CARD ------------------ */

.home-intro p {
    font-size: 3rem;
    margin: 0;
    padding: 0;
    font-weight: 500;

}
.home-intro span {
    font-size:1.4rem;
    margin: 0;
    padding: 0;
    color: whitesmoke;
}

main {
    display: flex;
    flex-flow: column nowrap;
    gap: 4rem;
}

main a {
    text-decoration: none;
    color: white;
}

.proj-card {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border: 1px solid grey;
    border-radius: 2rem;

    /* max-width: 60rem;
    height: auto; */
}

.card-img {
    display: flex;
}

.card-img img {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
}

.card-data {
    margin-left: 1.25rem;
    margin-right: 1rem;
    padding-bottom: 1rem;
}

.card-tags {
    margin-top: 1rem;
}

.card-data span {
    font-size: .75rem;
    border: .5px solid grey;
    border-radius: 2rem;
    padding: .45rem;
    color: white;

    margin-right: .5rem;
}

.card-title p {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    line-height: normal;
}

.card-icon-text {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.card-icon-text i {
    font-size: 1.25rem;
    margin-right: .25rem;
}

.card-icon-text p {
    font-weight: 400;
    margin: .5rem;
}
.card-bottom {
    margin-bottom: 2rem;
}


/* ABOUT --------------------- */

.nav-menu-about a {
    border-bottom: 1.5px solid white;
}
.profile img {
    border-radius: 50%;
    width: 12rem;
    height: auto;
}
.about-name {
    font-size: 3rem;
    margin: 0;
    padding: 0;
}
.profile span {
    font-size: 2rem;
    font-weight: 100;
}

.about-title {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    display: flex;
    align-items:center;
    gap: 1rem;

    margin-top: 3rem;
    margin-bottom: 2rem;
}
.journey span {
    font-size: 1.5rem;
    font-weight: 100;
}
.skills li {
    font-size: 1.25rem;
    font-weight: 300;
}
.skills li {
    list-style-type:disc;
    list-style-position: inside;
}


/* WORK --------------------- */

.work-nav a {
    font-size: 1.25rem;
    padding: .75rem 1rem;

    border: 1px solid white;
    border-radius: 2.5rem;
}

.work-nav {
    display: flex;
    flex-flow: row nowrap;
    gap: 1.25rem;
    align-items: center;
}

.work-nav a:nth-child(1):hover {
    background-color: #C39BE6;
    color: black;
    border: 1px solid #C39BE6;
}
.work-nav a:nth-child(3):hover {
    background-color: #FECD0F;
    color: black;
    border: 1px solid #FECD0F;
}
.work-nav a:nth-child(2):hover {
    background-color: #80D669;
    color: black;
    border: 1px solid #80D669;
}
.work-nav a:nth-child(4):hover {
    background-color: white;
    color: black;
    border: 1px solid white;
}

.work-active {
    background-color: #C39BE6;
    color: black;
    border: 1px solid #C39BE6;
}
.work-active-2 {
    background-color: #80D669;
    color: black;
    border: 1px solid #80D669;
}
.work-active-4 {
    background-color: #fff;
    color: #181818;
}

/* RENTO ----------------------- */

.proj-focus {
    background-color: #181818;

    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-weight: 250;
    margin: 6rem;
    padding: 0;
    line-height: 2;
    font-size: 1.125rem;

    display: grid;
    grid-template-columns: 1fr 4fr;

}

.proj-cover {
    margin: 0;
    padding: 0;
}

.main-proj {
    display: flex;
    flex-flow: column nowrap;
    gap: 8rem;
}
.proj-links {
    display: flex;
    flex-flow: row nowrap;
    gap: 4rem;
}

.proj-list li {
    list-style-type:disc;
    list-style-position: inside;
    margin: .75rem 0;
    padding: 0;
}

h1 {
    font-size: 2.5rem;
}
h2 {
    border-bottom: .5px solid grey;
    font-size: 1.75rem;
}
/* h3 {
    border-bottom: .5px solid grey;
    margin-right: 50rem;
} */

.rento-img {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.rento-img img {
    width: 500px;
    height: 300px;
}
.design-process {
    display: flex;
    flex-flow: column nowrap;
    gap: 6rem;
}

.rento-img-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

.survey-imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.personas img {
    max-width: 60vw;
    margin: 0;
    padding: 0;
}
.personas h4 {
    margin: 0;
    padding: 0;
}
.gif img{
    max-width: 300px;
    margin: auto;
}

.proj-footer p {
    font-size: .65rem;
}
.proj-footer {
    position: none;

}

.top-link {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}
.top-link i {
    font-size: 1.75rem;
}

/* delete later */
.wip i {
    font-size: 4rem; 
    text-align: center;   
}
.wip p {
    font-size: 2rem;
    text-align: center;
}
.wip {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-top: 10rem;
}

/* ILLUSTRATIONS -------------------- */
.pp-text p {
    font-size: 1.25rem;
}

.petportraits {
    display: flex;
    flex-flow: row wrap;
    gap: .5rem;
}

.petportraits img {
    max-width: 400px;
}

/* LETTERING ----------- */

.work-active-3 {
    background-color: #FECD0F;
    color: #181818;
}

.hand-lettering img {
    max-width: 200px;
}
.hand-lettering{
    display: flex;
    flex-flow: row wrap;
    gap: .5rem;
}

/* SKILLBRIDGE ---------------------- */

.personas-sb {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.personas-sb img {
    max-width: 500px;
}

.sb-img {
    max-width: 60vw;
}

/* GIVE AND GRAB ------------- */
.gng-interview img {
    margin: 4px;
}












/* RESPONSIVE MOBILE ------------ */



@media screen and (max-width: 650px) {
    
/* Home page ------- */
    header {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }
    .logo {
        margin-bottom: 0;
    }

    nav ul {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        gap: 2rem;
        margin: 0;
    }
    nav li {
        padding-bottom: 1rem;
    }
    .contact-icons {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }
    .contact-icons i {
        font-size: 1.25rem;
        margin: 0;
        padding: 0;
    }
    .nav-link {
        font-size: 1.5rem;

    }
    body {
        display: unset;
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        margin: 2rem;
    }
    .home-intro p{
        font-size: 2rem;
        margin-top: 3rem;
        text-align: center;
    }
    .home-intro span {
        font-size: .95rem;
        text-align: center;
        display: flex;
        flex-flow: column wrap;
    }

    /* card layout */
    .proj-card {
        display: flex;
        flex-flow: column wrap;
    }
    .proj-card img {
        border-top-right-radius: 2rem;
        border-bottom-left-radius: 0;
    }
    .card-tags {
        display: flex;
        flex-flow: row nowrap;
        align-items:flex-start;
    }
    .card-tags span {
        font-size: .6rem;
    }
    footer {
        position: unset;
        margin-top: 3rem;
    }

    /* About page ----------------------- */

    .profile {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        margin-top: 5rem;
    }
    .about-name {
        font-size: 3rem;
    }
    .profile span {
        font-size: 1.25rem;
    }
    .journey {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }
    .about-title p {
        font-size: 1.5rem;
        margin: 0;
        padding: 0;
    }
    .about-title span {
        font-size: 1rem;
        margin: 0;
        padding: 0;
    }
    .about-title {
        display: flex;
        flex-flow: column nowrap;
    }
    .about-title {
        font-size: 1.5rem;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .skills li {
        font-size: 1rem;
    }


    /* WORK ----------------------------- */

    main {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }
    .work-nav a {
        font-size: .75rem;
        padding: .25rem .5rem;
        margin-top: 2rem;
    }
    .work-nav {
        display: flex;
        flex-flow: row nowrap;
        gap: .75rem;
        margin-top: 2rem;
    }

    /* ILLUSTRATIONS ------------ */

    .pp-text p {
        font-size: 1rem;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .petportraits img {
        max-width: 150px;
    }
    .petportraits {
        margin-top: 0;
        padding: 0;
    }

    /* LETTERING ------------ */
    .hand-lettering img {
        max-width: 150px;
    }

    /* RENTO ---------------------------- */

    .proj-focus {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        margin: 1.5rem;
    }
    .main-proj {
        gap: 4rem;
    }
    .main-proj h1 {
        font-size: 2rem;
    }
    .main-proj p {
        font-size: 1rem;
        line-height: 1.6;
    }
    .proj-links a,i {
        font-size: 1rem;
        margin: 0;
        padding: 0;
    }
    .proj-links {
        display: flex;
        flex-flow: column nowrap;
        gap: .5rem;
    }
    .main-proj h2 {
        font-size: 1.30rem;
    }
    .proj-list li {
        font-size: 1rem;
    }
    .main-proj li {
        font-size: 1rem;
    }

    .rento-img,
    .survey-imgs {
        display: flex;
        flex-flow: column nowrap;
    }
    
    .personas img {
        max-width: 90vw;
    }

    /* SKILLBRIDGE----------- */

    .personas-sb {
        display: flex;
        flex-flow: column nowrap;
    }

    /* give n grab ------- */

    .gng-interview img {
        max-width: 200px;
        margin: 4px;
    }




}