/*Body Content*/

.bodycontainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    width: auto;
    padding: 1rem 7rem 1rem 7rem;
}

body {
    font-family: montserrat, sans-serif;
    font-size: 20px;
    color: #454545;
    background-color: #fff;
    background-size: cover;
}

/*Intro*/

.imdevon {
    display: flex;
    flex-direction: column;
}

.headshot {
    margin-left: -30px;
    z-index: 0;
}

.intro1 {
    display: flex;
    flex-direction: row;
    margin-right: 50px;
}

.button3 {
    border: none;
    border-radius: 8px;
    color: #121212;
    background-color: #A1D2CE;
    text-align: center;
    width: 220px;
    height: 48px;
    font-size: 24px;
    margin: 4px 2px;
    cursor: pointer;
}

.hi {
    font-size: 72px;
    z-index: 1;
    margin-bottom: 10px;
    width: max-content;
    color: #121212;
}

.colorchange {
    display: flex;
    flex-direction: row;
}

.spacing {
    padding-left: 4%;
}

.intro2 {
    display: flex;
    flex-direction: column;
    width: 35%;
}

.intro-wording1 {
    color: #121212;
    font-size: 24px;
}

.intro-wording2 {
    color: #121212;
    font-size: 16px;
}

#rotating-text {
    color: #121212;
    font-size: 24px;
    background-color: rgba(115, 153, 206, .4);
    display: inline;
}

#rotating-text2 {
    color: #121212;
    font-size: 24px;
    background-color: rgba(219, 173, 106, .4);
    display: inline;
}

.intro {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: auto;
}

/*Toolbox*/

.toolbox {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.toolboxtext {
    text-align: center;
    margin: 40px 0 10px 0;
}

.toolboxlogos {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.logo {
    width: 70px;
    height: 70px;
    padding: 0 15px;
    z-index: 2;
}

.logo1 {
    width: 54px;
    height: 70px;
    padding: 0 15px;
    z-index: 2;
}

.logo2 {
    width: 70px;
    height: 84px;
    padding: 0 15px;
    z-index: 2;
}

/*Toolbox hover*/
.tooltip {
    position: relative;
    display: inline-block;
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #ffffff;
    border: solid #121212 2px;
    box-shadow: 4px 4px #DBAD6A;
    color: #121212;
    text-align: center;
    width: 275px;
    padding: 15px 15px;
    border-radius: 6px;
    font-size: 14px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 2;
  }

.tooltip:hover .tooltiptext {
    visibility: visible;
}


/*About Me*/

.blurbs {
    color: #121212;
    text-align: center;
    font-family: montserrat, sans-serif;
    font-size: 16px;
    font-weight: 300;
    display: flex;
    flex-direction: row;
    margin: 75px 15%;
}

.prototyping {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
}

.prototyping-image {
    width: 3%;
    background-color: #ffffff;
    padding: 0 10px;
    z-index: 1;
    position: absolute;
}

.prototype-blurb {
    border-radius: 16px;
    border: 1px solid #121212;
    box-shadow: 7px 7px #82A4D3;
    padding: 40px 40px;
    margin: 45px 20px;
    height: 200px;
    width: auto;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
}

.branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
}

.branding-image {
    width: 3%;
    background-color: #ffffff;
    padding: 0 10px;
    z-index: 1;
    position: absolute;
}

.branding-blurb {
    border-radius: 16px;
    border: 1px solid #121212;
    box-shadow: 7px 7px #DBAD6A;
    padding: 40px 40px;
    margin: 45px 20px;
    height: 200px;
    width: auto;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
}

.research {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
}

.research-image {
    width: 3%;
    background-color: #ffffff;
    padding: 0 10px;
    z-index: 1;
    position: absolute;
}

.research-blurb {
    border-radius: 16px;
    border: 1px solid #121212;
    box-shadow: 7px 7px #A1D2CE;
    padding: 40px 40px;
    margin: 45px 20px;
    height: 200px;
    width: auto;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
}

.recentwork {
    text-align: center;
    margin-bottom: 100px;
}

.recentwork h2 {
    color: #121212;
    font-family: montserrat, sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
}

/*CareerRipple Landing Page*/

.landingpage {
    display: flex;
    flex-direction: row;
    margin: 3% 20% 1% 20%;
    background-color: #A1D2CE;
    border-radius: 16px;
    padding: 2% 2%;
    align-items: center;
}

.landingpage img {
    width: 55%;
}

.landingpage-text {
    text-align: start;
    padding: 2% 5% 2% 7%;
}

.landingpage-text p {
    color: #121212;
    font-family: montserrat, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.landingpage-text h4 {
    color: #121212;
    font-family: montserrat, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 46.875% */
}

/*CareerRipple Design System*/

.designsystem {
    display: flex;
    flex-direction: row;
    margin: 2% 20% 1% 20%;
    background-color: #DBAD6A;
    border-radius: 16px;
    padding: 2% 2%;
    align-items: center;
}

.designsystem img {
    width: 60%;
}

.designsystem-text {
    text-align: start;
    padding: 2% 5% 2% 7%;
}

.designsystem-text p {
    color: #121212;
    font-family: montserrat, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.designsystem-text h4 {
    color: #121212;
    font-family: montserrat, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 46.875% */
}

/*PitchIn*/

.pitchin {
    display: flex;
    flex-direction: row;
    margin: 2% 20% 1% 20%;
    background-color: #82A4D3;
    border-radius: 16px;
    padding: 2% 2%;
    align-items: center;
}

.pitchin img {
    width: 60%;
}

.pitchin-text {
    text-align: start;
    padding: 2% 5% 2% 7%;
}

.pitchin-text p {
    color: #121212;
    font-family: montserrat, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.pitchin-text h4 {
    color: #121212;
    font-family: montserrat, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 46.875% */
}

/*Bakery*/

.bakery {
    display: flex;
    flex-direction: row;
    margin: 2% 20% 1% 20%;
    background-color: #A1D2CE;
    border-radius: 16px;
    padding: 2% 1%;
    align-items: center;
}

.bakery img {
    width: 60%;
}

.bakery-text {
    text-align: start;
    padding: 5% 5% 5% 0%;
}

.bakery-text p {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.bakery-text h4 {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 46.875% */
}

/*Let's Eat*/

.eat {
    display: flex;
    flex-direction: row;
    margin: 2% 20% 1% 20%;
    background-color: #DBAD6A;
    border-radius: 16px;
    padding-right: 4%;
    align-items: center;
}

.eat img {
    width: 65%;
}

.eat-text {
    text-align: start;
    padding: 5% 0%;
}

.eat-text p {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.eat-text h4 {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 46.875% */
}

/*Credits*/

.credits {
    display: flex;
    flex-direction: row;
    margin: 2% 20% 0 20%;
    background-color: #82A4D3;
    border-radius: 16px;
    padding: 1% 5% 1% 0;
    align-items: center;
}

.credits img {
    width: 65%;
    height: 100%;
    padding: 5% 5% 5% 5%;
}

.credits-text {
    text-align: start;
    padding: 5% 0 5% 0;
}

.credits-text p {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.credits-text h4 {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 46.875% */
}

/*Laptop*/
@media only screen and (min-width: 1080px) and (max-width: 1440px) {
    .bodycontainer {
        padding: 1rem 4rem;
        /* Adjust padding for better spacing */
    }

    /*Intro*/

    .headshot {
        margin-left: 5px;
        width: 200px;
        height: 190px;
    }

    .intro {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hi {
        font-size: 60px;
    }

    .button3 {
        border-radius: 6px;
        width: 250px;
        height: 44px;
        font-size: 16px;
    }


    .intro1 {
        display: flex;
        flex-direction: row;
        margin-right: 0px;
        z-index: 0;
    }

    .intro2 {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        width: 80%;
        text-align: center;
    }

    .intro-wording1 {
        font-size: 20px;
    }

    .intro-wording2 {
        font-size: 14px;
    }

    #rotating-text {
        font-size: 20px;
    }

    #rotating-text2 {
        font-size: 20px;
    }

    .spacing {
        padding-left: 6%;
    }

    /*Toolbox*/

.toolbox {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.toolboxtext {
    text-align: center;
    margin: 40px 0 10px 0;
}

.toolboxlogos {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.logo {
    width: 70px;
    height: 70px;
    padding: 0 15px;
}

.logo1 {
    width: 54px;
    height: 70px;
    padding: 0 15px;
}

.logo2 {
    width: 70px;
    height: 84px;
    padding: 0 15px;
}

     /* Tooltip text */
  .tooltip .tooltiptext {
    width: 135px;
  }

    /*About Me*/

    .blurbs {
        color: #121212;
    text-align: center;
    font-family: montserrat, sans-serif;;
    font-size: 16px;
    font-weight: 300;
    display: flex;
    flex-direction: row;
    margin: 75px 100px;
    }


    .prototyping {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 33%;
    }

    .prototyping-image {
        width: 45px;
        padding: 15px 10px 5px 10px;
    }

    .prototype-blurb {
        height: auto;
    }

    .branding {
        display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
    }

    .branding-image {
        width: 45px;
        padding: 15px 10px 5px 10px;
    }

    .branding-blurb {
        height: auto;
    }

    .research {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 33%;
    }

    .research-image {
        width: 45px;
        padding: 15px 10px 5px 10px;
    }

    .research-blurb {
        height: auto;
    }

    .recentwork h2 {
        font-size: 25px;
        font-weight: 200;
        margin-bottom: 30px;
    }

    /*CareerRipple Landing Page*/

.landingpage {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 3% 20% 1% 20%;
    background-color: #A1D2CE;
    border-radius: 16px;
    padding: 2% 2%;
}

.landingpage img {
    width: 55%;
    height: 100%;
}

.landingpage-text {
    text-align: start;
    padding: 2% 5% 2% 7%;
}

.landingpage-text p {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.landingpage-text h4 {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 46.875% */
}

/*CareerRipple Design System*/

.designsystem {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 2% 20% 1% 20%;
    background-color: #DBAD6A;
    border-radius: 16px;
    padding: 2% 2%;
}

.designsystem img {
    width: 50%;
    height: 100%;
}

.designsystem-text {
    text-align: start;
    padding: 2% 5% 2% 7%;
}

.designsystem-text p {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.designsystem-text h4 {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 46.875% */
}

/*PitchIn*/

.pitchin {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 2% 20% 1% 20%;
    background-color: #82A4D3;
    border-radius: 16px;
    padding: 2% 2%;
}

.pitchin img {
    width: 60%;
    height: 100%;
}

.pitchin-text {
    text-align: start;
    padding: 2% 5% 2% 7%;
}

.pitchin-text p {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.pitchin-text h4 {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 46.875% */
}

/*Bakery*/

.bakery {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 2% 20% 1% 20%;
    background-color: #A1D2CE;
    border-radius: 16px;
    padding: 2% 1%;
}

.bakery img {
    width: 55%;
    height: 100%;
}

.bakery-text {
    text-align: start;
    padding: 5% 5% 5% 0%;
}

.bakery-text p {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.bakery-text h4 {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 46.875% */
}

/*Let's Eat*/

.eat {
    display: flex;
    flex-direction: row;
    margin: 2% 20% 1% 20%;
    background-color: #DBAD6A;
    border-radius: 16px;
    padding-right: 4%;
}

.eat img {
    width: 65%;
}

.eat-text {
    text-align: start;
    padding: 5% 0%;
}

.eat-text p {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.eat-text h4 {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 46.875% */
}

/*Credits*/

.credits {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 2% 20% 0 20%;
    background-color: #82A4D3;
    border-radius: 16px;
    padding: 1% 5% 1% 0;
}

.credits img {
    width: 55%;
    height: 100%;
    padding: 5% 5% 5% 5%;
}

.credits-text {
    text-align: start;
    padding: 5% 0 5% 0;
}

.credits-text p {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.credits-text h4 {
    color: #121212;
    font-family: montserrat, sans-serif;;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    /* 46.875% */
}


}

/*Tablet*/
@media only screen and (min-width: 700px) and (max-width: 1080px) {
    .bodycontainer {
        padding: 1rem 4rem;
        /* Adjust padding for better spacing */
    }

    /*Intro*/

    .headshot {
        margin-left: 5px;
        width: 200px;
        height: 190px;
    }

    .intro {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hi {
        font-size: 60px;
    }

    .button3 {
        border-radius: 6px;
        width: 250px;
        height: 44px;
        font-size: 16px;
    }


    .intro1 {
        display: flex;
        flex-direction: row;
        margin-right: 0px;
        z-index: 0;
    }

    .intro2 {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        width: 80%;
        text-align: center;
    }

    .intro-wording1 {
        font-size: 20px;
    }

    .intro-wording2 {
        font-size: 14px;
    }

    #rotating-text {
        font-size: 20px;
    }

    #rotating-text2 {
        font-size: 20px;
    }

    .spacing {
        padding-left: 6%;
    }

    /*Toolbox*/

    .toolbox {
        flex-direction: column;
    }

    .toolboxtext {
        text-align: center;
        margin: 40px 0 10px 0;
    }

    .toolboxlogos {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .logo {
        width: 50px;
        height: 50px;
        padding: 5px 10px;
    }

    .logo1 {
        width: 45px;
        height: 55px;
        padding: 5px 10px;
    }

    .logo2 {
        width: 50px;
        height: 64px;
        padding: 5px 10px;
    }

       /* Tooltip text */
  .tooltip .tooltiptext {
    display: none;
  }

    /*About Me*/

    .blurbs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 50px 10%;
    }


    .prototyping {
        width: auto;
        z-index: 0;
    }

    .prototyping-image {
        width: 45px;
        padding: 15px 10px 5px 10px;
    }

    .prototype-blurb {
        height: auto;
    }

    .branding {
        width: auto;
        z-index: 0;
    }

    .branding-image {
        width: 45px;
        padding: 15px 10px 5px 10px;
    }

    .branding-blurb {
        height: auto;
    }

    .research {
        width: auto;
        z-index: 0;
    }

    .research-image {
        width: 45px;
        padding: 15px 10px 5px 10px;
    }

    .research-blurb {
        height: auto;
    }

    .recentwork h2 {
        font-size: 25px;
        font-weight: 200;
        margin-bottom: 30px;
    }

    /*CareerRipple Landing Page*/

    .landingpage {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
        margin: 3% 10% 3% 10%;
        padding: 0;
    }

    .landingpage img {
        width: 55%;
        margin-top: 30px;
        padding: 0;
    }

    .landingpage-text {
        padding: 0% 5% 5% 7%;
    }

    .landingpage-text p {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .landingpage-text h4 {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    /*CareerRipple Design System*/

    .designsystem {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
        margin: 7% 10% 3% 10%;
        padding: 0;
    }

    .designsystem img {
        width: 55%;
        margin-top: 30px;
        padding: 0;
    }

    .designsystem-text {
        padding: 0% 5% 5% 7%;
    }

    .designsystem-text p {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .designsystem-text h4 {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    /*PitchIn*/

    .pitchin {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
        margin: 7% 10% 3% 10%;
        padding: 0;
    }

    .pitchin img {
        width: 55%;
        margin-top: 30px;
        padding: 0;
    }

    .pitchin-text {
        padding: 0% 5% 5% 7%;
    }

    .pitchin-text p {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .pitchin-text h4 {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 10px;
    }

    /*Bakery*/

    .bakery {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
        margin: 7% 10% 3% 10%;
        padding: 0;
    }

    .bakery img {
        width: 55%;
        margin-top: 30px;
        padding: 0;
    }

    .bakery-text {
        padding: 0% 5% 5% 7%;
    }

    .bakery-text p {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .bakery-text h4 {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    /*Let's Eat*/

    .eat {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
        margin: 7% 10% 3% 10%;
        padding: 0;
    }

    .eat img {
        width: 65%;
        margin-top: 30px;
        transform: scaleX(-1);
        padding: 0 20% 0 0;
    }

    .eat-text {
        padding: 0% 5% 5% 7%;
    }

    .eat-text p {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .eat-text h4 {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 20px;
    }

    /*Credits*/

    .credits {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
        margin: 7% 10% 3% 10%;
        padding: 0;
    }

    .credits img {
        width: 55%;
        margin-top: 30px;
        padding: 0;    
    }

    .credits-text {
        padding: 0% 5% 5% 7%;
    }

    .credits-text p {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .credits-text h4 {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 30px;
    }


}

/*Mobile*/
@media only screen and (max-width: 700px) {

    /*Body Content*/
    .bodycontainer {
        padding: 1rem 2rem;
        /* Reduce padding for small screens */
    }

/*intro*/
    .headshot {
        margin-left: 5px;
        width: 100px;
        height: 90px;
    }

    .intro {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hi {
        font-size: 36px;
    }

    .button3 {
        border-radius: 6px;
        width: 144px;
        height: 44px;
        font-size: 16px;
    }


    .intro1 {
        display: flex;
        flex-direction: row;
        margin-right: 0px;
        z-index: 0;
    }

    .intro2 {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        width: 90%;
        text-align: center;
    }

    .intro-wording1 {
        font-size: 20px;
    }

    .intro-wording2 {
        font-size: 14px;
    }

    #rotating-text {
        font-size: 20px;
    }

    #rotating-text2 {
        font-size: 20px;
    }

    .spacing {
        padding-left: 6%;
    }

    /*Toolbox*/

    .toolbox {
        flex-direction: column;
    }

    .toolboxtext {
        text-align: center;
        margin: 40px 0 10px 0;
    }

    .toolboxlogos {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .logo {
        width: 40px;
        height: 40px;
        padding: 5px 10px;
    }

    .logo1 {
        width: 35px;
        height: 45px;
        padding: 5px 10px;
    }

    .logo2 {
        width: 40px;
        height: 54px;
        padding: 5px 10px;
    }

    /* Tooltip text */
  .tooltip .tooltiptext {
    display: none;
  }

    /*About Me*/

    .blurbs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 50px 35px;
    }


    .prototyping {
        width: auto;
        z-index: 0;
    }

    .prototyping-image {
        width: 45px;
        padding: 20px 10px 5px 10px;
    }

    .prototype-blurb {
        height: auto;
    }

    .branding {
        width: auto;
        z-index: 0;
    }

    .branding-image {
        width: 45px;
        padding: 20px 10px 5px 10px;
    }

    .branding-blurb {
        height: auto;
    }

    .research {
        width: auto;
        z-index: 0;
    }

    .research-image {
        width: 45px;
        padding: 20px 10px 5px 10px;
    }

    .research-blurb {
        height: auto;
    }

    .recentwork h2 {
        font-size: 25px;
        font-weight: 200;
        margin-bottom: 30px;
    }

    /*CareerRipple Landing Page*/

    .landingpage {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
        margin: 3% 10% 3% 10%;
        padding: 0;
    }

    .landingpage img {
        width: 85%;
        margin-top: 30px;
        padding: 0;
    }

    .landingpage-text {
        padding: 0% 10% 5% 10%;
    }

    .landingpage-text p {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .landingpage-text h4 {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    /*CareerRipple Design System*/

    .designsystem {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
        margin: 10% 10% 3% 10%;
        padding: 0;
    }

    .designsystem img {
        width: 75%;
        margin-top: 30px;
        padding: 0;
    }

    .designsystem-text {
        padding: 0% 10% 5% 10%;
    }

    .designsystem-text p {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .designsystem-text h4 {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    /*PitchIn*/

    .pitchin {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
        margin: 10% 10% 3% 10%;
        padding: 0;
    }

    .pitchin img {
        width: 75%;
        margin-top: 30px;
        padding: 0;
    }

    .pitchin-text {
        padding: 0% 10% 5% 10%;
    }

    .pitchin-text p {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .pitchin-text h4 {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 10px;
    }

    /*Bakery*/

    .bakery {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
        margin: 10% 10% 3% 10%;
        padding: 0;
    }

    .bakery img {
        width: 85%;
        margin-top: 30px;
        padding: 0;
    }

    .bakery-text {
        padding: 0% 10% 5% 10%;
    }

    .bakery-text p {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .bakery-text h4 {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    /*Let's Eat*/

    .eat {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
        margin: 10% 10% 3% 10%;
        padding: 0;
    }

    .eat img {
        width: 90%;
        margin-top: 30px;
        transform: scaleX(-1);
        padding: 0;
    }

    .eat-text {
        padding: 0% 10% 5% 10%;
    }

    .eat-text p {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .eat-text h4 {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 20px;
    }

    /*Credits*/

    .credits {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 16px;
        margin: 10% 10% 3% 10%;
        padding: 0;
    }

    .credits img {
        width: 90%;
        margin-top: 30px;
        padding: 0;
    }

    .credits-text {
        padding: 0% 10% 5% 10%;
    }

    .credits-text p {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .credits-text h4 {
        font-size: 32px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

}