/* #region Fonts */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100..700;1,100..700&family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap');

.josefin-slab-light {
  font-family: "Josefin Slab", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.josefin-slab-regular {
  font-family: "Josefin Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
 
.josefin-slab-medium {
  font-family: "Josefin Slab", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.josefin-slab-semibold {
  font-family: "Josefin Slab", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.josefin-slab-bold {
  font-family: "Josefin Slab", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.josefin-slab-light {
  font-family: "Josefin Slab", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
}

.josefin-slab-regular {
  font-family: "Josefin Slab", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}

.josefin-slab-medium {
  font-family: "Josefin Slab", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: italic;
}

.josefin-slab-semibold {
  font-family: "Josefin Slab", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: italic;
}

.josefin-slab-bold {
  font-family: "Josefin Slab", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
}

.martel-sans-extralight {
  font-family: "Martel Sans", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.martel-sans-light {
  font-family: "Martel Sans", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.martel-sans-regular {
  font-family: "Martel Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.martel-sans-semibold {
  font-family: "Martel Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.martel-sans-bold {
  font-family: "Martel Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.martel-sans-extrabold {
  font-family: "Martel Sans", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.martel-sans-black {
  font-family: "Martel Sans", sans-serif;
  font-weight: 900;
  font-style: normal;
}
/* #endregion */

/* #region GENERAL DOC */

/*Add view-transistion properties later*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

html {
    background-color: #f3faff;
    scroll-behavior: smooth;
}

body {
    font-family: "Martel Sans", sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    background-image: url(assets/bkg-pattern.png);
    background-size: 55vw;
    background-repeat: repeat;
  }

h1, h2 {
    font-family: "Josefin Slab", serif;
}

a {
   font-family: "Martel Sans", sans-serif;
   color: black;
   text-decoration: none;
   text-decoration-color: black;
   font-size: 1.25rem;
}
a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: #ffffff;
    text-underline-offset: 1rem;
}

img {
    max-width: 100%;
    -webkit-user-drag: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sw-pinit-button,
div.sw-pinit a.sw-pinit-button:hover:before {
    display: none;
} 

html body span[data-test-id="pinterest-save-button"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* #endregion */

/* #region TRANSISTION */
a, .btn {
    transition: all 300ms ease;
}

/*#endregion*/

/*#region NAVIGATION */

nav {
    position: sticky;
    top: 0;
    width: 100vw;
}
/*#endregion*/

/* #region DESKTOP NAV SPECIFIC */
#desktop-nav {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    color: #280284;
    background-color: #e3f4ff;
}

#desktop-nav .logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}

#desktop-nav .logo:hover {
    cursor: default;
}

#desktop-nav .logo img {
    width: 5rem;
    margin-right: 0.5rem;
}

ul.desktop-nav-links {
    display: flex;
    gap: 2rem;
    transition: all 0.3s ease-in-out;
    list-style: none;
    font-size: 1.25rem;
    align-items: center;
    color: #280284;
    flex-direction: row;
    margin-right: 0.75rem;
}


.desktop-nav-links a {
    color: #280284;
}

.desktop-nav-links a:hover {
    color: #dc579f;
    text-decoration: underline;
    text-decoration-color: #dc579ed8;
    text-underline-offset: 10px;
}

#desktop-nav .contact-btn {
    background-color: #fff;
    padding: 0.5rem 1.5rem;
    margin: 0;
    border: 0.24rem solid #7b2e97;
    border-radius: 0.75rem;
    transition: all 300ms ease;
}

#desktop-nav .contact-btn a {
    color: #7b2e97;
    margin: 0;
}

#desktop-nav .contact-btn a:hover {
    color: #ffffff;
    text-decoration: none;
}

#desktop-nav:has(.contact-btn a:hover) .contact-btn {
    background-color: #7b2e97;
    padding: 0.75rem 1.75rem;
}
/*#endregion*/

/* #region MOBILE NAV SPECIFIC */

#mobile-nav {
    background-color: #e3f4ff;
    color: #280284;
}

#mobile-nav .logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

#mobile-nav .logo:hover {
    cursor: default;
}

#mobile-nav .mobile-nav-links a:hover {
    color: #dc579f;
    text-decoration: underline;
    text-decoration-color: #dc579ed8;
    text-underline-offset: 1rem;
}

#mobile-nav .logo img {
    margin: 0.5rem;
    width: 76px;
}

#KJC-expanded {
    display: none;
}

.cake-menu {
    position: absolute;
    top: 27px;
    right: 18px;
}

.cake-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 2rem;
    width: 2.5rem;
    cursor: pointer;
}

.cake-icon span {
    width: 100%;
    height: 4px;
    background-color: #7b2e97;
    transition: all 0.3s ease-in-out;
}

span.cake-cherry  {
    width: 5px;
    height: 5px;
}

.mobile-nav-links {
    background-color: #e3f4ff;
    position: relative;
    display: flex;
    max-height: 0;
    transition: all 0.3s ease-in-out;
    list-style: none;
    align-items: center;
    color: #280284;
    flex-direction: column;
}

.mobile-nav-links.open {
    height: 100vh;
    max-height: 100vh;
}

.mobile-nav-links li {
    padding: 0.55rem;
    overflow-y: hidden;
}

.mobile-nav-links.open a {
    color: #280294;
}

.cake-menu .mobile-nav-links a {
    display: block;
    padding: 10px;
    text-align: center;
}

.cake-menu .mobile-nav-links.open {
    position: absolute;
    top: 0;
    right: 0;
}

.cake-icon.open {
    height: 2.5rem;
}

.cake-icon.open span:first-child {
    opacity: 0;
}

.cake-icon.open span:nth-child(2) {
    transform: rotate(45deg);
}

.cake-icon.open span:last-child {
    transform: rotate(-45deg);
    translate: -1px -17px;
}

.cake-icon span:first-child {
    opacity: 1;
}
.cake-icon span:first-child {
    transform: none;
}
.cake-icon span:first-child {
    transform: none;
}
/*#endregion*/

/* #region SECTIONS */

section {
    text-align: center;
    width: 100%;
}

section h2 {
    font-size: 2rem;
    padding-bottom: 2.25rem;
    margin-top: 2.5rem;
}

section h3 {
    font-size: 1.35rem;
}

section p {
    font-size: 1.1rem;
}

/*#endregion*/

/*#region Gallery sections*/

.img1, .img2, .img3, .img4, .img5, .img6, .img7, .img8, .img9, .img10 {
    width: 100%;
}

.image-container {
    display: inline-grid;
    grid-auto-flow: row;
    justify-items: center;
    margin-bottom: 1rem;
}

.image-container-inner {
    margin: 0.5rem 1rem;
    display: flex;
}

.image-container-inner:hover {
    margin: 0.25rem 0.75rem;
    transition: all 300ms ease-in-out;
}

.image-container-inner img {
    object-fit: cover;
}

.image-container-inner img:hover {
    cursor: pointer;
}

/* Portfolio Gallery Individual Img Selectors */

#img1, #img4, #img6, #img8 {
    box-shadow: 7px 7px 3px hsl(258deg 97% 26% / 25%);
}

#img1:hover, #img4:hover, #img6:hover, #img8:hover {
    box-shadow: 7px 7px 4px -3px hsl(258deg 97% 26% / 20%);
}

#img2, #img5, #img9 {
    box-shadow: 7px 7px 3px hsl(328deg 66% 60% / 25%);
}

#img2:hover, #img5:hover, #img9:hover {
    box-shadow: 7px 7px 4px -3px hsl(328deg 66% 60% / 20%);
}

#img3, #img7, #img10 {
    box-shadow: 7px 7px 3px hsl(284deg 53% 39% / 25%);
}

#img3:hover, #img7:hover, #img10:hover {
    box-shadow: 7px 7px 4px -3px hsl(284deg 53% 39% / 20%);
}



 /* Lightbox */

 #lightbox {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
 }

 #lightbox img {
    max-height: 100vh;
 }

 #lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
 }



#X {
    width: 1.15rem;
    height: 1.15rem;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0.5rem;
}

#X:hover {
    cursor: pointer;
    width: 1.25rem;
    height: 1.25rem;
    transition: all 300ms ease-in-out;
}

#X.active {
    display: inline-flex;
}
/*#endregion*/

/*#region Gallery CTA */

#Gallery-CTA {
    background-color: #e3f4ff;
    width: 100vw;
    margin: 0;
}

#Gallery-CTA div {
    margin: 1.5rem;
}

/*#endregion*/

/*#region Experiments */

section#Experiments {
    display: flex;
    flex-direction: column;
    align-items: center;
}

section#Experiments h2 {
    padding-bottom: 0.5rem;
    margin-left: 0.75rem;
}

#Experiments p {
    padding-bottom: 2.25rem;
}

.expPost {
    text-align: start;
    margin: 1rem;
}

.expPost p {
    font-weight: 300;
    font-size: 1rem;
}

.expPost .postTitleDesc {
    margin-left: 0.25rem;
    max-width: 660px;
}

.Carousel {
    background-color: #fefce9;
}

.carouselContainer {
    overflow-x: scroll;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: auto;
    scrollbar-color: #dc579f #fefce9;

}

.carouselItem {
    scroll-snap-align: center;
}

#CarouselImg1, #CarouselImg2, #CarouselImg3, #CarouselImg4, #CarouselImg5, #CarouselImg6, #CarouselImg7, #CarouselImg8, #CarouselImg9, #CarouselImg10 {
    scroll-margin-top: 27vh;
}

.navDots {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-bottom: 1rem;
}

.navDots a {
    margin: 0 0.25rem;
}

.navDots img {
    max-width: 0.85rem;
    opacity: 0.5;
}

.navDots img:hover {
    max-width: 1rem;
    transition: all 0.15s ease-in-out;
    opacity: 1;
}




/*#endregion*/

/*#region Experiments-CTA */

#Exp-CTA {
    background-color: #e3f4ff;
    width: 100vw;
    margin: 0;
    display: flex;
    justify-content: center;
}

#Exp-CTA div {
    margin: 1.5rem;
    max-width: 492px
}


#Exp-CTA p {
    margin-bottom: 1rem;
    max-width: 391px;
}

/*#endregion*/

/*#region About */

section#About {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#About .topHead {
    margin-top: 1.75rem;
    margin: 1rem;
}

#About #profile p {
    margin: 1rem;
}

/*#endregion*/

/*#region About-CTA */

#About-CTA {
    background-color: #e3f4ff;
    width: 100vw;
    margin: 0;
    display: flex;
    justify-content: center;
}

#About-CTA div {
    margin: 1.5rem;
    max-width: 543px;
}

#About-CTA p {
    margin-bottom: 1rem;
}

/*#endregion*/

/*#region Contact */

section#Contact {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#Contact h2 {
    margin: 0;
    padding-bottom: 0.5rem;
}

#Contact h3 {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #dc579f;
    text-underline-offset: 1rem;
    padding-bottom: 0.75rem;
}

#Contact div {
    margin: 1rem;
    margin-bottom: 2rem;
    text-align: start;
}

div#contactWrapper {
    margin: 0;
}

#Contact div.topQuote {
    margin-top: 2.5rem;
    margin-bottom: 2.25rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    text-align: center;
    max-width: 638px;
}

#professionalContact {
    max-width: 592px;
    margin-top: 0;
}

#casualContact {
    max-width: 494px;
}

#Contact a {
    font-size: 1rem;
    color: #280284;
    overflow-y: hidden;
    scrollbar-width: none;
}

#Contact a:hover {
    color: #dc579f;
    text-decoration: underline;
    text-decoration-color: #dc579f;
    text-underline-offset: 0.75rem;
    display: inline-block;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    transition: all 0.25s ease-in-out;
}

#Contact ul {
    margin-top: 1.5rem;
    scrollbar-width: none;
    transition: all 0.25s ease-in-out;
}

#Contact li {
    text-overflow: ellipsis;
    scrollbar-width: none;
    margin-bottom: 0.5rem;
    transition: all 0.25s ease-in-out;
}

p.note {
    font-size: 1rem;
    color: #373737;
    margin: 1rem;
    font-style: italic;
    text-align: center;
}




/*#endregion*/

/*#region Contact-CTA */

#Contact-CTA {
    background-color: #e3f4ff;
    margin: 0;
    display: flex;
    justify-content: center;
}

#Contact-CTA p {
    margin: 0 0.5rem 1rem 0.5rem;
    max-width: 313px;
}

/*#endregion*/

/* #region FOOTER */

footer {
    background-color: #280284;
    color: #e3f4ff;
    width: 100vw;
    transition: all 0.3s ease;
}

.bottom-social-link-icons {
    display: flex;
    justify-content: space-evenly;
    margin: 1.5rem;
    margin-bottom: 0.75rem;
    overflow-y: hidden;
}

.bottom-social-link-icons img {
    width: 3rem;
    transition: all 300ms ease;
}

.bottom-social-link-icons img:hover {
    cursor: pointer;
    width: 3.5rem;
}

.bottom-social-links {
    text-align: center;
    position: relative;
    top: 0.75rem;
    left: 2.5rem;
}

div.bottom-nav {
    margin: 0rem 1.5rem;
}

.bottom-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    gap: 0;
    background-color: #280284;
}

.bottom-nav li {
    margin: 0 0.5rem;
}

.bottom-nav a {
    color: #e3f4ff;
}

.bottom-nav a:hover {
    color: #fff;
    font-size: 1.4rem;
}

.Copyright {
    padding: 1rem;
    padding-bottom: 2rem;
    text-align: center;
    color: #dc579f;
}

/*#endregion*/