:root {
    --pastel-green: #DCEAD7;
    --dark-blue: #0B3131;
    /* --bright-purple: #D358E3; */
    --bright-purple: #9e1aaf;
    --pastel-purple: #BBB8D1;
    --grey: #DFD9E1;
    /* --bright-green: #38D92A; */
    --bright-green: #249f19;
    --pastel-yellow: #FFFFF5;
}
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: var(--pastel-yellow);
    max-width: 100vw;
    height: fit-content;
    overflow-x: hidden;
}
p {
    font-size: 1.08rem;
}
nav {
    font-family: 'Suez One', serif;
    background-color: var(--pastel-green);
    position: fixed;
    width: 100vw;
    height: 4rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    /* filter: drop-shadow(0px 4px 3px var(--pastel-purple)); */
    z-index: 2;
}
#nav-title {
    color: var(--bright-purple); 
    font-size: 2.5rem;
    margin: 0 0rem 0 3rem;
    text-decoration: none;
}
#mobile-hamburger {
    margin: 0rem 0 0 80vw;
    position: fixed;
    z-index: 2;
}
#hamburger-icon {
    color: var(--bright-purple);
    height: 2.2rem;
    /* scale: 0.8; */
    padding: 1rem 0 0 0;
    display: none;
}
/* #links-container{
    background-color: none;
    width: 40rem;
    height: fit-content;
    margin: -1rem 0 0 -1rem;
} */
.anchor-links{
    font-size: 1.5rem;
    color: var(--bright-purple);
    margin: 0 1rem 0 0rem;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0);
    text-decoration-thickness: 0.3rem;
    transition: text-decoration-color 0.5s;
}
.anchor-links:hover {
    text-decoration-color: var(--bright-green);
}

#intro-section {
    /* background-color: var(--pastel-yellow); */
    width: 100vw;
    height: fit-content;
    overflow: hidden;
}
.bg-decor-plant-left {
    width: 600px;
    position: absolute;
    left: -205px;
    margin: 3rem 0 0 0vw;
    z-index: 0;
}
#bg-decor-plant-l02 {
    margin: 748px 0 0 0;
}
.bg-decor-plant-right {
    width: 600px;
    position: absolute;
    right: -205px;
    margin: 3rem 0 0 0; 
    transform: scaleX(-1); /*to  mirror the svg*/
    z-index: 0;
}
#bg-decor-plant-r02 {
    margin: 754px 0 0 0;
}
/* .bg-decor-plant-top {
    width: 600px;
    position: absolute;
    left: 5vw;
    margin: -14rem 0 0 0vw;
    transform: rotate(90deg);
    z-index: 0;
}
#bg-decor-plant-t02 {
    margin: -14rem 0 0 50vw;
} */
.bg-decor-plant-bottom {
    width: 600px;
    position: absolute;
    left: 5vw;
    margin: 75vh 0 0 0;
    transform: rotate(90deg);
    z-index: 0;
}
#bg-decor-plant-b02 {
    margin: 75vh 0 0 50vw;
}

#intro-section-items-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 12rem 0 12rem;
}
#intro-main-text {
    display: flex;
}
#text-left-group {
    display: flex;
    flex-direction: column;
}
#green-color-emphasis {
    color: var(--bright-green);
}
#welcometo-text {
    font-family: 'Suez One', serif;
    color:var(--dark-blue);
    font-size: 2.6rem;
    margin: 5rem 0rem 0 0rem;
    text-align: center;
}
#my-name {
    font-family: 'Suez One', serif;
    color:var(--bright-purple);
    /* font-size: 3.8rem; */
    margin: 2rem 0 0 0rem;
    text-align: center;
}
#titles {
    font-family: 'Suez One', serif;
    color:var(--dark-blue);
    font-size: 2.6rem;
    margin: 1rem 0 0 0rem;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0);
    transition: text-decoration-color 0.5s;
}
#titles:hover{
    text-decoration: underline;
    text-decoration-color: var(--pastel-purple);
}
#laptop-svg {
    width: 35rem;
    display: block;
    margin: auto;
}
#portrait-svg {
    width: 22rem;
    /* width: 28rem; */
    display: block; 
    margin: auto;
    /* clip-path: inset(20px 45px); */
}
#services-list {
    list-style-type:none;
    font-size: 2.5rem;
    font-family: 'Kanit', sans-serif;
    color: var(--dark-blue);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 1rem 1rem 0rem -1rem;
}
.services-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.service-icons {
    width: 10rem;
    margin: 0 0 0 -3rem;
}
#design-icon-mobile {
    display: none;
}
#illustration-icon-mobile {
    display: none;
}
#webdev-icon-mobile {
    display: none;
}
#illustration-icon {
    margin: 0 0 0 -17rem;
}
#webdev-icon {
    margin: 0 0 0 -16rem;
}
.accordion {
    font-size: 1.5rem;
    font-family: 'Kanit', sans-serif;
    background-color: var(--bright-green);
    color: var(--dark-blue);
    cursor: pointer;
    width: 43rem;
    padding: 1rem;
    margin: 2rem 0 0 0rem;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}
/* .active, .accordion:hover {
    background-color: var(--bright-green);
    color: var(--pastel-yellow);
} */
.panel {
    padding: 0 1rem;
    background-color: var(--pastel-green);
    width: 41rem;
    display: block;
    overflow: hidden;
}
#mini-about-me {
    font-family: 'Kanit', sans-serif;
    color: var(--dark-blue);
    font-size: 1.4rem;
    text-align: left;
    margin: 1rem 0rem 0 0rem;
}
/* #see-my-work {
    font-family: 'Kanit', sans-serif;
    color: var(--bright-purple);
    font-size: 1.5rem;
    text-align: center;
    margin: 3rem 0 0 0;
}
#arrow-down {
    font-family: 'Kanit', sans-serif;
    color: var(--bright-purple);
    font-size: 2rem;
    text-align: center;
    margin: 0rem 0 0 0;
} */
#web-projects-section {
    font-family: 'Kanit', sans-serif;
    display: flex;
    flex-direction: column;
    /* background-color:  var(--pastel-yellow); */
    width: 100vw;
    height: fit-content;
    overflow-x: hidden;
    padding-top: 1rem;
    padding-bottom: 4rem;
}
#web-heading {
    font-family: 'Suez One', serif;
    color: var(--bright-green);
    font-size: 3.5rem;
    /* writing-mode: vertical-lr; */
    text-align: center;
    margin: 2rem 0 4rem 1rem;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0);
    transition: text-decoration-color 0.5s;
}
#web-heading:hover {
    text-decoration: underline;
    text-decoration-color: #B149BF;
}
.web-row01 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 12rem 0 12rem;
}
.web-row02 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 12rem 0 12rem;
    /* justify-content: end; */
}
.web-row03 {
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 12rem 0 12rem;
}
.web-row04 {
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 12rem 0 12rem;
}

.slsmanagement-card {
    max-width: 32rem;
    height: fit-content;
    overflow-x: hidden;
}
.slsmanagement-preview {
    width: 32rem;
    height: 15rem; 
    margin-top: 5vh;
}
.slsmanagement-preview:hover {
    transform: scale(1.08);
}
.slsmanagement-text {
    color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 31rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
    text-align: left;
} 

.escp-card {
    max-width: 32rem;
    height: fit-content;
    overflow-x: hidden;
}
.escp-preview {
    width: 32rem;
    height: 15rem; 
    margin-top: 5vh;
}
.escp-preview:hover {
    transform: scale(1.08);
}
.escp-text {
    color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 30rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
    text-align: left;
}

.iterativestyles-card {
    max-width: 32rem;
    height: fit-content;
    overflow-x: hidden;
}
.iterativestyles-preview {
    width: 32rem;
    height: 15rem; 
    margin-top: 5vh;
}
.iterativestyles-preview:hover {
    transform: scale(1.08);
}
.iterativestyles-text {
    color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 31rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
    text-align: left;
}
.qsi-card {
    max-width: 32rem;
    height: fit-content;
    overflow-x: hidden;
    /* margin-left: 2rem; */
}
.qsi-center-preview {
    /* aspect-ratio: 16/9; */
    width: 32rem;
    height: 15rem;
    margin-top: 5vh;
    /* margin-left: 30vw; */
}
.qsi-center-preview:hover {
    transform: scale(1.08);
}
.qsi-center-text {
    color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 31rem;
    height: fit-content;
    margin-top: -1vh;
    /* margin-left: 30vw; */
    padding: 1rem;
    text-align: left;
}

.animation-card {
    max-width: 32rem;
    /* height: fit-content; */
    overflow-x: hidden;
}
.animation-in-the-browser-preview {
    width: 32rem;
    height: 15rem;
    margin-top: 5vh;
}
.animation-in-the-browser-preview:hover {
    transform: scale(1.08);
}
.animation-text {
    color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 31rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
    text-align: left;
}
.landing-card {
    max-width: 32rem;
    height: fit-content;
    overflow-x: hidden;
}
.landing-page-preview {
    width: 32rem;
    height: 15rem;
    left: 0;
    right: 0;
    margin-top: 5vh;
}
.landing-page-preview:hover {
    transform: scale(1.08);
}
.landing-text {
    color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 31rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
    text-align: left;
}

.beach-card {
    max-width: 32rem;
    height: fit-content;
    overflow-x: hidden;
}
.beach-preview {
    width: 32rem;
    height: 15rem;
    left: 0;
    right: 0;
    margin-top: 5vh;
}
.beach-preview:hover {
    transform: scale(1.08);
}
.beach-text {
    color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 31rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
    text-align: left;
}
/* #a-frame-link {
    color: var(--pastel-yellow);
    text-decoration: none;
} */
/* #a-frame-link:hover {
    color: blue; 
    text-decoration: underline;
} */
.artmedia-card {
    max-width: 32rem;
    height: fit-content;
    overflow-x: hidden;
}
.artmedia-preview {
    width: 32rem;
    height: 15rem;
    left: 0;
    right: 0;
    margin-top: 5vh;
}
.artmedia-preview:hover {
    transform: scale(1.08);
}
.artmedia-text {
    color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 31rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
    text-align: left;
}

#graphic-projects-section {
    font-family: 'Kanit', sans-serif;
    /* background-color: var(--pastel-yellow); */
    width: 100vw;
    height: fit-content;
    display: flex;
    flex-direction: column;
}
#graphic-heading{
    font-family: 'Suez One', serif;
    color: var(--bright-green);
    font-size: 3.5rem;
    text-align: center;
    margin: 0rem 0 4rem 1rem;
    padding-top: 2rem;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0);
    transition: text-decoration-color 0.5s;
}
#graphic-heading:hover{
    text-decoration: underline;
    text-decoration-color: var(--pastel-purple);
}
.graphic-row01 {
    display: flex;
    flex-direction: row;
    text-align: left;
    justify-content:center;
}
.graphic-row02 {
    display: flex;
    flex-direction: row;
    text-align: left;
    justify-content:center;
}
.graphic-row03 {
    display: flex;
    flex-direction: row;
    text-align: left;
    justify-content:center;
}
.graphic-row04 {
    display: flex;
    flex-direction: row;
    text-align: left;
    justify-content:center;
}
.graphic-row05 {
    display: flex;
    flex-direction: row;
    text-align: left;
    justify-content:center;
}
.graphic-row06 {
    display: flex;
    flex-direction: row;
    text-align: left;
    justify-content:center;
}
.graphic-row07 {
    display: flex;
    flex-direction: row;
    text-align: left;
    justify-content:center;
    /* column-gap: -50vh; */
}
.posterzine-card{
    max-width: 90vw;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.poster-mockup {
    width: 30vw;
    height: 80vh;
}
.posterzine-mockup {
    width: 50vw;
    height: 80vh;
    margin-left: -0.25rem;
}
.posterzine-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 77.8vw;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
.exhibit-posters-card{
    max-width: 60vw;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.exhibit-poster03{
    width: 30vw;
    height: 85vh;
    margin: -1rem 0 1.5rem 0;
}
.exhibit-poster04{
    width: 30vw;
    height: 85vh;
    margin: -1rem 0 1.5rem -0.25rem;
}
.exhibit-posters-text {
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 58vw;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
.tcnj-exhibit-link {
    color:var(--pastel-yellow);
    text-decoration: none;
}
.tcnj-exhibit-link:hover {
    /* color: blue; */
    text-decoration: underline;
}
.exhibit-logo-card{
    max-width: 60vw;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.exhibit-logomark{
    width: 60vw;
    position: relative;
    z-index: 1;
}
.exhibit-logomarktext{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 58vw;
    height: fit-content;
    margin-top: -2rem;
    padding: 1rem;
    position: relative;
    z-index: 1;
}
#harvard-exhibit-link {
    color:var(--pastel-yellow);
    text-decoration: none;
}
#harvard-exhibit-link:hover {
    /* color: blue; */
    text-decoration: underline;
}
.wall-graphics-mockup{
    width: 60vw;
    margin: -9rem 0 0 0;
    position: relative;
    z-index: 0;
}
.infographic-card{
    max-width: 90vw;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.infographic{
    width: 70vw;
    /* height: 65vh; */
}
.infographic-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 67.8vw;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
.elite-futbol-card{
    max-width: 90vw;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.elite-futbol-logos{
    width: 70vw;
    /* height: 65vh; */
    position: relative;
    z-index: 0;
}
.elite-futbol-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 68vw;
    height: fit-content;
    margin-top: -4rem;
    padding: 1rem;
    position: relative;
    z-index: 1;
}
.escp-disneytournament-card{
    max-width: 38vw;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.escp-disneytournament-poster{
    width: 38vw;
    /* height: 65vh; */
    position: relative;
    z-index: 0;
}
.escp-disneytournament-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 36vw;
    height: fit-content;
    margin-top: -0.50rem;
    padding: 1rem;
    position: relative;
    z-index: 1;
}
.project-wealth-card{
    max-width: 90vw;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.project-wealth-logo{
    width: 45vw;
}
.project-wealth-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 43vw;
    height: fit-content;
    margin-top: -4rem;
    padding: 1rem;
    position: relative;
    z-index: 1;
}
.jolly-bags-card{
    max-width: 90vw;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.jolly-bags-ipad{
    width: 30vw;
    height: 85vh;
    margin: -1rem 0 1.5rem 0;
}
/* .jolly-bags-hanging-poster{
    width: 50vw;
    margin-left: -0.25rem;
} */
.jolly-bags-ad{
    width: 30vw;
    height: 85vh;
    margin: -1rem 0 1.5rem -0.25rem;
}
.jolly-bags-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 57.8vw;
    height: fit-content;
    margin-top: -4.5vh;
    padding: 1rem;
}

/* Illustration Page */
#illustration-title {
    font-family: 'Suez One', serif;
    color: var(--bright-green);
    font-size: 4rem;
    padding: 9rem 0 0rem 40rem;
    margin-bottom: -12rem;
    display: flex;
    z-index: 1;
}
#pug-simplified {
    width: 100%;
    margin: -11rem 0 0 -19rem;
    z-index: 0;
}
#illustration-main-container{
    display: flex; 
    flex-direction: column-reverse; /*reverse to display the most recently added content at the top of the page*/
    margin: -35rem 0 0 0;
}
.illustration-row01 {
    font-family: 'Kanit', sans-serif;
    display: flex;
    flex-direction: row;
    text-align: left;
    justify-content:center;
    column-gap: 2rem;
    margin: -2rem 0 0 0;
}
.benson-study-card{
    max-width: 35rem;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 0rem;
    margin-bottom: 4rem;
}
.benson-study{
    width: 35rem;
}
.benson-study-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 35rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
.cave-exploration-card{
    max-width: 35rem;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 0rem;
    margin-bottom: 4rem;
}
.cave-exploration{
    width: 35rem;
}
.cave-exploration-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 35rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
.illustration-row02 {
    font-family: 'Kanit', sans-serif;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
    justify-content:center;
    column-gap: 2rem;
    margin: -2rem 0 0 0;
}
.tiger-illustration-card{
    max-width: 35rem;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 0rem;
    margin-bottom: 4rem;
}
.tiger-illustration{
    width: 35rem;
}
.tiger-illustration-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 35rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
.paintmarker-tiger-card{
    max-width: 35rem;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 0rem;
    margin-bottom: 4rem;
}
.paintmarker-tiger{
    width: 35rem;
}
.paintmarker-tiger-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 35rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
.illustration-row03 {
    font-family: 'Kanit', sans-serif;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
    justify-content:center;
    column-gap: 2rem;
    margin: -2rem 0 0 0;
}
#jackolantern-2023-card{
    max-width: 35rem;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 0rem;
    margin-bottom: 4rem;
}
#jackolantern-2023{
    width: 35rem;
}
#jackolantern-2023-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 35rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
#watercolor-tree-card{
    max-width: 35rem;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 0rem;
    margin-bottom: 4rem;
}
#watercolor-tree{
    width: 35rem;
}
#watercolor-tree-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 35rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
.illustration-row04 {
    font-family: 'Kanit', sans-serif;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
    justify-content:center;
    column-gap: 2rem;
    margin: -2rem 0 0 0;
}
#acrylic-landscape-jan2024-card{
    max-width: 35rem;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 0rem;
    margin-bottom: 4rem;
}
#acrylic-landscape-jan2024{
    width: 35rem;
}
#acrylic-landscape-jan2024-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 35rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
#balloon-dog-card{
    max-width: 35rem;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 0rem;
    margin-bottom: 4rem;
}
#balloon-dog{
    width: 35rem;
}
#balloon-dog-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 35rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
.illustration-row05 {
    font-family: 'Kanit', sans-serif;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
    justify-content:center;
    column-gap: 2rem;
    margin: -3rem 0 0 0;
}
#mermaid-dress-girl-card{
    max-width: 35rem;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 0rem;
    margin-bottom: 4rem;
}
#mermaid-dress-girl{
    width: 25rem;
}
#mermaid-dress-girl-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 23rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
#pepperoni-pizza-girl-card{
    max-width: 35rem;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 0rem;
    margin-bottom: 4rem;
}
#pepperoni-pizza-girl{
    width: 32rem;
}
#pepperoni-pizza-girl-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 30rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
.illustration-row06 {
    font-family: 'Kanit', sans-serif;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
    justify-content:center;
    column-gap: 2rem;
    margin: -3rem 0 0 0;
}
#sonia-and-minnie-nupastel-card{
    max-width: 60rem;
    height: fit-content;
    overflow-x: hidden;
    margin-top: 0rem;
    margin-bottom: 4rem;
}
#sonia-and-minnie-nupastel-text{
    background-color:var(--dark-blue);
    background-color:var(--pastel-purple);
    width: 59rem;
    height: fit-content;
    margin-top: -1vh;
    padding: 1rem;
}
#sleeping-sonia{
    width: 32rem;
}
#minnie-nupastel{
    width: 27.55rem;
}

#ig-link-text {
    color: var(--dark-blue);
    text-align: center;
    padding: 1rem;
}

#contact-section {
    font-family: 'Kanit', sans-serif;
    background-color:  var(--pastel-purple);
    width: 100vw;
    height: fit-content;
}
.contact-textdiv {
    font-size: 1.3rem;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 8rem 0 22rem 0;
}
.contact-text{
    color: var(--dark-blue);
    font-size: 1.3rem;
    margin-top: 0rem;
}
.contact-form {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: -18rem 0 10rem 0;
}
form {
    font-family: 'Kanit', sans-serif;
    background-color: var(--pastel-yellow);
    width: 55vw;
    min-width: 300px;
    height: fit-content;
    margin: 0rem 0 5rem 0;
    padding-right: 2rem;
    border-radius: 2px;
}
legend {
    font-family: 'Suez One', serif;
    color: var(--bright-purple);
    background-color: var(--pastel-green);
    text-align: center;
    font-size: 3rem;
    padding-top: 1rem;
    margin: 0 0 0 2rem;
    border-radius: 2px;
}
label {
    color: var(--dark-blue);
    font-size: 1.2rem;
}
input {
    font-family: 'Kanit', sans-serif;
    font-size: 1.08rem;
    color: var(--dark-blue);
    background-color: var(--pastel-yellow)
    border-color: #012840;
    border-width: 1px;
    width: 40vw;
    height: 2rem;
    margin: 1rem 0 0 1rem;
}
input::placeholder {
    font-family: 'Kanit', sans-serif;
    color: var(--pastel-purple);
    font-size: 1.08rem;
}
textarea {
    font-family: 'Kanit', sans-serif;
    font-size: 1.08rem;
    background-color: var(--pastel-yellow);
    border-color: var(--dark-blue);
    width: 40vw;
    height: 10vh;
    margin: 2rem 0 0 0;
}
textarea::placeholder {
    color: var(--pastel-purple);
    font-size: 1.08rem;
}
#submitbtn {
    font-family: 'Suez One', serif;
    color: var(--pastel-yellow);
    background-color: var(--bright-purple);
    font-size: 1.08rem;
    width: 3rem;
    margin: 1rem 0 1rem 0;
    float: right;
}
#submitbtn:hover {
    color: var(--pastel-yellow);
    background-color: var(--bright-green);
    border-color: var(--bright-purple);
}
.footer {
    background-color: var(--pastel-green);
    width: 100vw;
    height: 4rem;
    margin: 0rem 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* z-index: 2; */
}
#linkedin-icon {
    scale: 0.7;
    transition: 0.3s;
    border-radius: 6px;
}
#linkedin-icon:hover {
    scale: 1.0;
}
#github-icon {
    scale: 0.7;
    transition: 0.3s;
}
#github-icon:hover {
    scale: 1.0;
}
#ig-icon {
    scale: 0.7;
    transition: 0.3s;
}
#ig-icon:hover {
    scale: 1.0;
}

.readmore-link {
    color:var(--bright-purple);
    font-family: 'Kanit', sans-serif;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    border: 2px var(--pastel-green);
    padding: 0 1rem 0 1rem;
    text-decoration: none;
}
.readmore-link:hover {
    color: var(--bright-purple);
    -webkit-text-stroke: 0px;
    text-decoration: underline;
    text-decoration-color: var(--bright-purple);
}
.process-title {
    color: var(--bright-purple);
    font-family: 'Suez One', serif;
    text-align: center;
    margin: 0 12rem 4rem 12rem;
    padding: 10rem 0 0 0;
}
.process-subheading {
    color: var(--dark-blue);
    font-family: 'Suez One', serif;
    margin: 1rem 0 1rem 0;
}
.process-container {
    margin: 0 12rem 0 12rem;
}
.process-text {
    color: var(--dark-blue);
    font-family: 'Kanit', sans-serif;
    text-indent: 3rem;
    margin: 0 0 1rem 0;
}
.flex-img {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 2rem;
    margin: 2rem 0 2rem 0;
}
.row-img {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 0.5rem;
}

.final-img-long {
    width: 50rem;
}
.final-img {
    width: 30rem;
}
.logo-sketches-img {
    width: 25rem;
}
#isolated-logo-sketch {
    width: 35rem;
}
.logotypes-img {
    width: 32rem;
}

#iterativestyles-sketch {
    max-width: 35rem;
}
.iterativestyles-screenshot {
    max-width: 55rem;
}
.iterativestyles-screenshot-smaller {
    max-width: 32rem;
}

@media screen and (max-width: 768px) {
    #intro-section-items-container {
        margin: 0 0rem 0 0rem;
    }
    #nav-title {
        font-size: 1.8rem;
        margin: 0.5rem 0 0 1rem;
    }
    #links-container{
        background-color: var(--pastel-green);
        width: 12rem;
        height: fit-content;
        margin: -1rem 0 0 -1rem;
    }
    .anchor-links {
        margin: 0rem 1rem 0rem 0rem;
        font-size: 1.5rem;
    }
    #intro-main-text {
        display: flex;
        flex-direction: column-reverse;
    }
    #text-left-group {
        display: block;
    }
    #my-name {
        /* font-size: 2.4rem; */
        text-align: center;
        margin: 1rem 0 0 0;
    }
    #titles {
        font-size: 2rem;
        text-align: center;
        margin: 2rem 0 0 0;
    }
    #laptop-svg{
        width: 100%;
        margin: 1rem 0 1rem 0rem;
    }
    #self-portrait-svg{
        width: 100vw;
        margin: 1rem 1rem 1rem 1rem !important;
    }
    #services-list {
        font-size: 2rem;
        flex-direction: row;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        max-width: 24rem;
        margin: 0rem 1rem 0 1rem;
    }
    .services-item {
        flex-direction: column;
    }
    #design-icon {
        display: none;
    }
    #design-icon-mobile {
        display: flex;
        flex-direction: row;
        width: 9rem;
        justify-content:flex-start;
        /* padding: 0 8rem 0 8rem; */
    }
    #illustration-icon-mobile {
        display: flex;
        flex-direction: row;
        width: 9rem;
        justify-content:flex-start;
        /* padding: 0 8rem 0 8rem; */
    }
    #webdev-icon-mobile {
        display: flex;
        flex-direction: row;
        width: 9rem;
        justify-content:flex-start;
        /* padding: 0 1rem 0 6rem; */
    }
    #illustration-icon {
        display: none;
    }
    #webdev-icon {
        display: none;
    }
    /* #services-list li {
        padding: 0 2rem 0 0rem;
    } */
    .service-icons {
        width: 2rem;
        height: 10rem;
    }
    .panel {
        height: fit-content;
        width: 24rem;
        padding: 0 0.5rem 2.5rem 0.5rem;
        display: block;
    }
    #mini-about-me {
        margin: 1rem 0 -2rem 0;
        padding: 0 1rem 0rem 1rem;
    }
    /* remove plant decor for mobile, it takes up too much space */
    .bg-decor-plant-left {
        display: none;
    }
    .bg-decor-plant-right {
        display: none;
    }

    .web-row01 {
        margin: 0 1rem 0 1rem;
    }
    .web-row02 {
        margin: 0 1rem 0 1rem;
    }
    .web-row03 {
        margin: 0 1rem 0 1rem;
    }
    .web-row04 {
        margin: 0 1rem 0 1rem;
    }
    .escp-card {
        max-width: 100vw;
        height: fit-content;
        overflow-x: hidden;
    }
    .escp-preview {
        width: 95vw;
        height: 30vh;
        left: 0;
        right: 0;
    }
    .escp-text {
        font-size: 1rem;
        width: 88vw;
    }
    .slsmanagement-card {
        max-width: 95vw;
        height: fit-content;
        overflow-x: hidden;
    }
    .slsmanagement-preview {
        width: 95vw;
        height: 30vh;
        left: 0;
        right: 0;
        margin-top: 5vh;
    }
     .slsmanagement-text{
        font-size: 1rem;
        width: 88vw;
    }
    .iterativestyles-card {
        max-width: 95vw;
        height: fit-content;
        overflow-x: hidden;
    }
    .iterativestyles-preview {
        width: 95vw;
        height: 30vh;
        left: 0;
        right: 0;
        margin-top: 5vh;
    }
     .iterativestyles-text{
        font-size: 1rem;
        width: 88vw;
    }
    .qsi-card {
        max-width: 100vw;
        height: fit-content;
        overflow-x: hidden;
    }
    .qsi-center-preview {
        width: 95vw;
        height: 30vh;
        left: 0;
        right: 0;
    }
    .qsi-center-text {
        font-size: 1rem;
        width: 88vw;
    }
    .animation-card {
        max-width: 95vw;
        height: fit-content;
        overflow-x: hidden;
    }
    .animation-in-the-browser-preview {
        width: 95vw;
        height: 30vh;
        left: 0;
        right: 0;
        margin-top: 5vh;
    }
    .animation-text{
        font-size: 1rem;
        width: 88vw;
    }
    .landing-card {
        max-width: 95vw;
        height: fit-content;
        overflow-x: hidden;
    }
    .landing-page-preview {
        width: 95vw;
        height: 30vh;
        left: 0;
        right: 0;
        margin-top: 5vh;
    }
     .landing-text{
        font-size: 1rem;
        width: 88vw;
    }
    
    .beach-card {
        max-width: 95vw;
    }
    .beach-preview {
        width: 95vw;
        height: 30vh;
        left: 0;
        right: 0;
        margin-top: 5vh;
    }
    .beach-text {
        font-size: 1rem;
        width: 88vw;
    }
    .artmedia-card {
        max-width: 95vw;
    }
    .artmedia-preview {
        width: 95vw;
        height: 30vh;
        left: 0;
        right: 0;
        margin-top: 5vh;
    }
    .artmedia-text {
        font-size: 1rem;
        width: 84vw;
    }


    .posterzine-card{
        width: 90vw;
    }
    .poster-mockup {
        width: 90vw;
        height: 74vh;
    }
    .posterzine-mockup {
        width: 90vw;
        height: 55vh;
        margin-top: -0.25rem;
        margin-left: 0;
    }
    .posterzine-text{
        font-size: 1rem;
        width: 82vw;
    }
    .exhibit-posters-card{
        max-width: 80vw;
    }
    .exhibit-poster03{
        width: 44.5vw;
        height: 30vh;
        margin: -0.5rem 0 0.5rem 0;
    }
    .exhibit-poster04{
        width: 44.5vw;
        height: 30vh;
        margin: -0.5rem 0 0.5rem 0;
    }
    .exhibit-posters-text {
        font-size: 1rem;
        width: 72vw;
    }
    .exhibit-logo-card {
        max-width: 90vw;
    }
    .exhibit-logomark{
        width: 90vw;
    }
    .exhibit-logomarktext{
        font-size: 1rem;
        width: 85vw;
        margin-top: -1rem;
    }
    .wall-graphics-mockup{
        width: 90vw;
        margin-top: -3rem;
    }
    .exhibit-graphicstext{
        font-size: 1rem;
        width: 77vw;
    }
    .infographic{
        width: 85vw;
    }
    .infographic-text{
        font-size: 1rem;
        width: 77vw;
    }
    .benson-study{
        width: 85vw;
    }
    .benson-study-text{
        font-size: 1rem;
        width: 77vw;
    }
    .elite-futbol-logos{
        width: 85vw;
    }
    .elite-futbol-text{
        font-size: 1rem;
        width: 77vw;
        margin-top: 0rem;
    }
    .escp-disneytournament-card{
        max-width: 100vw;
    }
    .escp-disneytournament-poster{
        width: 85vw;
    }
    .escp-disneytournament-text{
        font-size: 1rem;
        width: 77vw;
        margin-top: -0.50rem;
    }
    .project-wealth-card{
        max-width: 90vw;
    }
    .project-wealth-logo{
        width: 85vw;
    }
    .project-wealth-text{
        font-size: 1rem;
        width: 77vw;
        margin-top: -0.50rem;
    }
    .jolly-bags-card{
        max-width: 80vw;
    }
    .jolly-bags-ipad{
        width: 80vw;
        height: 50vh;
    }
    .jolly-bags-ad{
        width: 80vw;
        height: 50vh;
        margin-top: -2rem;
        margin-left: 0;
    }
    .jolly-bags-text {
        font-size: 1rem;
        width: 72vw;
    }

    /* Artwork Page */
    #illustration-title {
        font-size: 2.3rem;
        text-align: center;
        padding: 8rem 0 0rem 3rem;
        margin-bottom: -11rem;
        display: flex;
    }
    #pug-container {
        max-width: 100vw;
        overflow: hidden; /*This is very important to this page for mobile, don't remove this*/
    }
    #pug-simplified {
        width: 70rem;
        margin: 1rem 0 0 -20rem;
    }
    #illustration-main-container {
        margin: -25rem 0rem 0 0rem;
    }
    .illustration-row01 {
        width: 100vw;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 1rem;
        margin: 0rem 0rem 0 0rem;
    }
    .illustration-row02 {
        width: 100vw;
        margin: 0rem 0 0 0;
    }
    .illustration-row03 {
        width: 100vw;
        margin: 0rem 0 0 0;
    }
    .illustration-row04 {
        width: 100vw;
        margin: 0rem 0 0 0;
    }
    .illustration-row05 {
        width: 100vw;
        margin: 0rem 0 0 0;
    }
    .illustration-row06 {
        width: 100vw;
        margin: 0rem 0 0 0;
    }
    .benson-study-card{
        max-width: 26rem;
        margin-bottom: 1rem;
    }
    .benson-study{
        width: 30rem;
        margin-left: -1rem;
    }
    .benson-study-text{
        width: 26rem;
    }
    .cave-exploration-card{
        max-width: 26rem;
        margin-bottom: 1rem;
    }
    .cave-exploration{
        width: 26rem;
    }
    .cave-exploration-text{
        width: 24rem;
    }

    .tiger-illustration-card{
        max-width: 26rem;
        margin-bottom: 1rem;
    }
    .tiger-illustration{
        width: 26rem;
    }
    .tiger-illustration-text{
        width: 35rem;
    }
    .paintmarker-tiger-card{
        max-width: 26rem;
        margin-bottom: 1rem;
    }
    .paintmarker-tiger{
        width: 26rem;
    }
    .paintmarker-tiger-text{
        width: 24rem;
    }

    #jackolantern-2023-card{
        max-width: 26rem;
        margin-bottom: 1rem;
    }
    #jackolantern-2023{
        width: 26rem;
    }
    #jackolantern-2023-text{
        width: 25rem;
    }
    #watercolor-tree-card{
        max-width: 26rem;
        margin-bottom: 1rem;
    }
    #watercolor-tree{
        width: 26rem;
    }
    #watercolor-tree-text{
        width: 24rem;
    }

    #acrylic-landscape-jan2024-card{
        max-width: 26rem;
        margin-bottom: 1rem;
    }
    #acrylic-landscape-jan2024{
        width: 26rem;
    }
    #acrylic-landscape-jan2024-text{
        width: 25rem;
    }
    #balloon-dog-card{
        max-width: 26rem;
        margin-bottom: 1rem;
    }
    #balloon-dog{
        width: 26rem;
    }
    #balloon-dog-text{
        width: 24rem;
    }
    #pepperoni-pizza-girl-card{
        max-width: 26rem;
        margin-bottom: 1rem;
    }
    #pepperoni-pizza-girl{
        width: 26rem;
    }
    #pepperoni-pizza-girl-text{
        width: 24rem;
    }

    #sonia-and-minnie-nupastel-card{
        max-width: 26rem;
    }
    #sonia-and-minnie-nupastel-text{
        width: 23rem;
    }
    #sleeping-sonia{
        width: 25rem;
    }
    #minnie-nupastel{
        width: 25rem;
    }


    #contact-section {
        width: 100vw;
        height: fit-content;
    }
    .contact-textdiv {
        font-size: 1rem;
        padding: 8rem 0 0 0 !important;
    }
    .contact-text{
        font-size: 1.2rem;
        padding: 1rem;
    }
    .contact-form {
        margin: 2rem 0 7rem 0;
    }
    legend {
        font-size: 2.5rem;
        padding-top: 1rem;
    }
    #submitbtn {
        margin: 1rem 0 1rem 50vw;
    }

    .process-title{
        margin: 0 2rem 0 2rem;
        padding: 6rem 0 0 0;
    }
    .process-container {
        margin: 0 2rem 0 2rem;
    }
    .process-text {
        margin: -1rem 0 2rem 0;
        padding: 0 1rem 0rem 1rem; 
    }
    #isolated-logo-sketch{
        width: 24rem;
    }
    .logo-sketches-img {
        width: 24rem;
    }
    .logotypes-img {
        width: 24rem;
    }
    .logotypes-img-smaller {
        width: 24rem;
    }
    .final-img-long {
        width: 24rem;
    }
    .final-img {
        width: 24rem;
    }

    #iterativestyles-sketch {
        width: 24rem;
    }
    .iterativestyles-screenshot{
        width: 24rem;
    }
    .iterativestyles-screenshot-smaller {
        width: 24rem;
    }
}

@media (max-height: 420px) and (orientation: landscape) {
    #mobile-hamburger {
        margin: 0rem 0 0 85vw;
    }
    #nav-title {
        font-size: 1.8rem;
        margin: 0.5rem 0 0 1rem;
    }
    #links-container{
        background-color: var(--pastel-green);
        width: 15rem;
        height: fit-content;
        margin: -1rem 0 0 -1rem;
    }
    .anchor-links {
        margin: 0rem 1rem 0 1rem;
        font-size: 1.7rem;
    }
    /* remove plant decor for mobile, it takes up too much space */
    .bg-decor-plant-left {
        display: none;
    }
    .bg-decor-plant-right {
        display: none;
    }
    #intro-main-text {
        display: flex;
        flex-direction: column-reverse;
    }
    #text-left-group {
        display: flex;
    }

    /* Artwork Page */
    #illustration-title {
        font-size: 2.3rem;
        text-align: center;
        padding: 8rem 0 0rem 20rem;
        margin-bottom: -22rem;
        display: flex;
    }
    #pug-container {
        max-width: 100vw;
        overflow: hidden; /*This is very important to this page for mobile, don't remove this*/
        margin-top: 4rem;
    }
    #pug-simplified {
        width: 70rem;
        margin: 1rem 0 0 -20rem;
    }
    #illustration-main-container {
        margin: -28rem 0rem 0 0rem;
    }
    .illustration-row01 {
        width: 100vw;
        flex-wrap: wrap;
        column-gap: 2rem;
        margin: 0rem 0rem 0 0rem;
    }
    .illustration-row02 {
        width: 100vw;
        flex-wrap: wrap;
        column-gap: 2rem;
        margin: 0rem 0 0 0;
    }
    .benson-study-card{
        width: 40rem;
        margin-bottom: 2rem;
    }
    .benson-study{
        width: 40rem;
        margin-left: -2rem;
    }
    .benson-study-text{
        width: 90rem;
    }
    .cave-exploration-card{
        margin-bottom: 2rem;
    }
    .cave-exploration{
        width: 36rem;
    }
    .cave-exploration-text{
        width: 36rem;
    }

    .tiger-illustration-card{
        margin-bottom: 2rem;
    }
    .tiger-illustration{
        width: 36rem;
    }
    .tiger-illustration-text{
        width: 36rem;
    }
    .paintmarker-tiger-card{
        width: 36rem;
        margin-bottom: 2rem;
    }
    .paintmarker-tiger{
        width: 36rem;
    }
    .paintmarker-tiger-text{
        width: 34rem;
    }

    .jackolantern-2023-card{
        margin-bottom: 2rem;
    }
    .jackolantern-2023{
        width: 36rem;
    }
    .jackolantern-2023-text{
        width: 36rem;
    }
    .watercolor-tree-card{
        width: 36rem;
        margin-bottom: 2rem;
    }
    .watercolor-tree-tiger{
        width: 36rem;
    }
    .watercolor-tree-text{
        width: 34rem;
    }

    .acrylic-landscape-jan2024-card{
        margin-bottom: 2rem;
    }
    .acrylic-landscape-jan2024{
        width: 36rem;
    }
    .acrylic-landscape-jan2024-text{
        width: 36rem;
    }
    .balloon-dog-card{
        width: 36rem;
        margin-bottom: 2rem;
    }
    .balloon-dog{
        width: 36rem;
    }
    .balloon-dog-text{
        width: 34rem;
    }

    #sleeping-sonia{
        width: 27rem;
    }
    #minnie-nupastel{
        width: 23.5rem;
    }
    #sonia-and-minnie-nupastel-text {
        width: 49rem;
    }


    #contact-section {
        width: 100vw;
        height: fit-content;
    }
    .contact-textdiv {
        padding: 8rem 0rem 0rem 0rem;
    }
    .contact-text{
        font-size: 1.2rem;
        padding: 1rem;
    }
    .contact-form {
        margin: 2rem 0 7rem 0;
    }
    legend {
        font-size: 2.5rem;
        padding-top: 1rem;
    }
    form {
        margin-top: 1rem;
    }
    textarea {
        width: 39vw;
    }
}