body {
background-color:#e6dedeff;
width:100vw;
margin:0;
overflow-x:hidden;
display:block;
font-size:18px;
font-family:Poppins
}

img {
max-width:100%;
height:auto
}

h1,h2,h3 {
display:unset;
font-size:unset;
margin-block-start:unset;
margin-block-end:unset;
margin-inline-start:unset;
margin-inline-end:unset;
font-weight:unset
}

.headerBlock {
background-color:#e6dedeff;
width:96vw;
padding-left:2vw;
padding-right:2vw;
height:80px;
border-bottom:2px solid #66403bb3;
z-index:1
}

.menuOverlay {
display:none;
opacity:0;
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background-color:#e7dede;
z-index:-1;
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch
}

.overlayExit {
display:none;
width:48px;
height:48px;
background-image:url(../images/common/x.png);
background-repeat:no-repeat;
background-size:auto;
background-position:center center;
position:absolute;
top:60px;
left:24px;
margin-right:12px;
margin-left:12px;
margin-bottom:4px;
opacity:1;
z-index:-1
}

.overlayOption {
font-size:28px;
font-weight:600;
font-family:Nunito;
height:auto;
text-align:right;
color:#66403b;
padding-top:1vh;
padding-bottom:1vh;
padding-right:12px;
text-decoration:none
}

.titleLinksBlock {
width:100%;
height:100%;
display:inline-flex;
justify-content:space-between;
align-items:flex-end
}

.Title {
color:#66403b;
font-family:Poppins;
width:auto;
height:53px;
white-space:nowrap;
font-size:36px;
font-weight:700
}

.linksBlock {
margin-left:24px;
position:relative;
width:100%;
display:inline-flex;
align-items:end
}

.linkText {
color:#66403b;
height:100%;
font-family:Poppins;
font-weight:900;
text-align:left;
font-size:20px;
letter-spacing:0;
margin-left:2vw;
margin-right:2vw;
margin-bottom:6px
}

.dropdown-content {
display:none;
position:absolute;
background-color:#be9e9b;
width:auto;
box-shadow:0 8px 16px 0 #0003;
z-index:1
}

.dropdown-content a {
color:#66403b;
padding:6px 16px;
text-decoration:none;
display:block
}

.travelText:hover .dropdown-content {
display:block
}

.travelText:hover {
cursor:default
}

/* Nested submenu styles */
.dropdown-content .submenu-item {
position:relative
}

.dropdown-content .submenu-item .submenu-label {
padding:6px 16px;
cursor:pointer;
color:#66403b;
font-weight:900
}

.dropdown-content .submenu-item.has-submenu > .submenu-label:after {
content:'▸';
float:right
}

.dropdown-content .submenu-item .submenu-content {
display:none;
position:absolute;
top:0;
left:100%;
background-color:#be9e9b;
min-width:300px;
box-shadow:0 8px 16px 0 #0003;
z-index:1
}

/* Show nested submenu on hover */
.dropdown-content .submenu-item:hover > .submenu-content {
display:block
}

.socialsBlock {
max-width:100%;
display:inline-flex
}

.socialLink {
width:30px;
height:30px;
background-repeat:no-repeat;
background-size:24px 24px;
background-position:center center;
position:relative;
margin-right:12px;
margin-left:12px;
margin-bottom:4px
}

.instagram {
background-image:url(../images/common/instagram.png)
}

.mail {
background-image:url(../images/common/mail.png);
background-size: 32px;
height: 32px;
}

.tiktok {
background-image:url(../images/common/tiktok.png)
}

.youtube {
background-image:url(../images/common/youtube.png);
background-size: 30px;
    width: 30px;
}

.sandwich {
background-image:url(../images/common/sandwich.png);
display:none
}

.contentBlock {
background-color:#e6dedeff;
width:100%;
margin:0
}

.greetingBlock {
width:100%;
height:auto;
display:inline-flex;
justify-content:space-between;
align-items:center;
margin-top:24px;
margin-bottom:24px
}

.greetingImageWrapper {
width:11.5vw;
height:450px
}

.greetingImage {
background-color:#be9e9b;
width:100%;
height:100%;
background-position:center bottom;
background-repeat:no-repeat;
background-size:cover
}

.greetingImageWrapper1 {
padding-left:72px
}

.greetingImage2 {
background-image:url(../images/front/bonnie_zeng_front_center.webp)
}

.greetingTextBlock {
width:50%;
height:auto;
padding-left:12px;
padding-right:72px
}

.greetingTitle {
color:#66403b;
max-width:100%;
height:72px;
margin-top:15%;
font-family:Poppins;
font-weight:800;
text-align:left;
font-size:48px;
letter-spacing:0
}

.greetingText {
color:#321e18;
width:100%;
height:240px;
font-family:Poppins;
text-align:left;
font-size:22px;
letter-spacing:0
}

.postsBlock {
display:flex;
flex-wrap:wrap;
justify-content:space-evenly;
background-color:#be9e9b;
width:100%;
height:min-content;
padding-top:45px;
padding-bottom:6px;
overflow-x:auto
}

.emptyLink {
opacity:0
}

.postBlockTitle {
margin:0 0 0 84px;
padding-top:12px;
color:#66403b;
width:calc(100%-84px);
font-family:Poppins;
font-weight:600;
font-size:32px
}

.postContainer {
flex-basis:33%;
display:flex;
justify-content:center
}

.postLink {
display:flex;
box-shadow:0 5.4px 5.4px #00000040;
overflow:hidden;
width:339px;
height:316px;
margin:12px 12px 24px;
position:relative;
border-radius:19.2px 19.2px 3.85px
}

.postImg {
width:339px;
height:401px;
position:relative;
background-repeat:no-repeat;
background-size:cover;
clip:auto
}

.postTitle {
background-color:#e6dedecc;
width:100%;
min-height:65px;
position:absolute;
top:40%;
left:0;
z-index:2
}

.postLinkTitle {
color:#66403b;
width:100%;
height:auto;
font-family:Poppins;
text-align:center;
font-size:24px;
letter-spacing:0;
padding:1px
}

.postLinkLocation {
color:#66403b;
width:100%;
height:auto;
font-family:Poppins;
text-align:center;
font-size:16px;
letter-spacing:0;
padding:1px
}

.footerBlock {
width:calc(100% - 72px);
color:#66403b;
font-family:Poppins;
font-weight:500;
text-align:center;
font-size:16px;
letter-spacing:0;
padding-top:6px;
padding-bottom:12px;
padding-left:72px
}

.articleBanner {
background-color:#66403bb3;
width:100%;
display:block;
justify-content:center
}

.articleTitle {
width:100%;
text-align:center;
font-family:Poppins;
font-size:64px;
font-weight:600;
color:#e7dede
}

.articleLocation {
width:100%;
text-align:center;
font-family:Poppins;
font-size:36px;
font-weight:500;
color:#e7dede
}

.articleText {
width:80%;
padding:36px 10%;
font-family:Nunito;
text-align:justify
}

.divider {
background-image:url(../images/common/DIVIDER.png);
background-size:auto;
background-position:center;
background-repeat:no-repeat;
width:100%;
height:72px
}

.articleImgWrapper {
width:100%;
display:inline-flex;
align-content:center
}

.articleImg {
width:80%;
margin:0 10%;
height:640px;
object-fit:cover
}

@media only screen and (max-width:435px) {
.headerBlock {
height:113px;
width:100vw;
padding:0
}

.menuOverlay,.overlayExit {
display:unset
}

.titleLinksBlock {
width:92vw;
max-height:100%;
padding-left:4vw;
padding-right:4vw;
display:inline-flex;
justify-content:space-between
}

.Title {
width:max(240px,35vw)
}

.emptyLink {
display:none
}

.socialsBlock {
max-width:100%;
align-items:flex-end;
display:flex;
justify-content:center
}

.socialLink {
width:40px;
height:40px;
background-repeat:no-repeat;
background-size:30px 30px;
background-position:center center
}

.instagram,.mail,.tiktok,.youtube {
display:none
}

.sandwich {
display:unset;
margin-bottom:4px;
margin-right:0
}

.dropdown-content {
display:none;
text-align:right;
font-family:Nunito;
font-size:40px;
position:unset;
background-color:unset;
width:100%;
box-shadow:unset;
z-index:inherit;
justify-content:flex-end
}

.contentBlock {
background-color:#e6dedeff;
width:100vw;
height:auto;
padding:0
}

.aboutText,.linkText,.linksBlock,.photosText,.travelText {
display:none
}

.greetingBlock {
align-items:flex-start;
height:60vh;
margin-bottom:0
}

.greetingImageWrapper {
padding:0
}

.greetingImage {
background-position:center bottom
}

.greetingImage1,.greetingImageWrapper1 {
display:none;
visibility:none
}

.greetingImageWrapper2 {
width:100%;
height:460px;
margin:0;
position:absolute
}

.greetingImage2 {
background-image:url(../images/front/bonnie_zeng_front_center.webp);
-webkit-mask-image:linear-gradient(0deg,#0000 0%,#0003 17%,#0003 70%,#0000 100%)
}

.greetingImage3,.greetingImageWrapper3 {
display:none;
visibility:none
}

.greetingTextBlock {
display:block;
width:100vw;
height:auto;
padding:24px 4vw;
z-index:2
}

.greetingTitle {
color:#66403b;
max-width:100%;
height:auto;
margin:0;
font-family:Poppins;
font-weight:800;
text-align:left;
font-size:28px;
letter-spacing:0
}

.greetingText {
color:#321e18;
width:92vw;
height:auto;
margin:0;
font-family:Nunito;
text-align:left;
font-size:18px;
letter-spacing:0;
font-weight:600;
}

.postsBlock {
background-color:unset;
width:100%;
margin:0 0 24px;
display:flex;
justify-content:center;
flex-wrap:wrap;
position:relative;
top:-170px
}

.postBlockTitle {
font-family:Poppins;
font-size:28px;
margin:0;
text-align:center
}

.postLink {
top:unset;
left:unset;
margin:24px 12px
}

.postLinkTitle {
left:unset;
top:unset
}

.postLinkLocation {
left:unset;
top:30px
}

.postTitle {
left:unset
}

.sectionTitle {
font-family:Poppins;
font-size:28px;
font-weight:600;
text-align:center
}

.articleBanner {
width:100vw
}

.articleTitle {
font-size:40px
}

.articleLocation {
font-size:24px
}

.articleText {
width:80%;
padding:5% 10% 2.5%;
font-family:Nunito;
font-size:16px;
text-align:justify
}

.divider {
background-image:url(../images/common/DIVIDER.png);
background-size:auto;
background-position:center;
background-repeat:no-repeat;
width:100%;
height:72px
}

.articleImgWrapper {
width:100%;
display:inline-flex;
align-content:center
}

.articleImg {
height:640px;
width:80%;
margin-left:10%;
background-repeat:no-repeat;
background-size:cover;
background-position:center center
}

.footerBlock {
width:100%;
color:#66403b;
font-family:Nunito;
font-weight:500;
text-align:center;
font-size:16px;
letter-spacing:0;
padding:0 0 12px
}

#mobileSocials {
height:auto;
display:unset
}

.preFade {
opacity:0;
transform:translateY(20px)
}

.fadeIn {
display:block;
transition:transform .8s ease-in-out,opacity .8s ease-in-out
}

#mobileMenu .socialsBlock {
z-index:3
}

#mobileMenu {
padding-bottom:64px
}
}

@media only screen and (min-width:435px) and (max-width:640px) {
.linksBlock {
display:none
}

.postsBlock {
padding-top:0
}
}

@media only screen and (min-width:435px) and (max-width:768px) {
.greetingTitle {
font-size:36px
}

.greetingText {
font-size:20px;
text-align:justify
}

.postTitle {
height:unset
}

.greetingImage1,.greetingImageWrapper1 {
display:none;
visibility:none
}

.greetingImage3,.greetingImageWrapper3 {
display:none;
visibility:none
}

.postBlockTitle {
font-size:36px
}

.postsBlock {
justify-content:center
}

.emptyLink,.instagram,.mail,.tiktok {
display:none
}

.sandwich {
display:unset;
margin-bottom:4px;
margin-right:0
}

.menuOverlay,.overlayExit {
display:unset
}

.socialsBlock {
max-width:100%;
align-items:flex-end;
display:flex;
justify-content:center
}

.dropdown-content {
display:none;
text-align:right;
font-family:Nunito;
font-size:40px;
position:unset;
background-color:unset;
width:100%;
box-shadow:unset;
z-index:inherit;
justify-content:flex-end
}

/* Mobile nested region styles */
#travelOptions {
background-color:#be9e9b;
text-align:left;
margin-top:1vh;
padding:0;
max-height:80vh;
overflow-x:hidden
}

#travelOptions .mobile-region {
border-bottom:1px solid #66403b33
}

#travelOptions .mobile-region-label {
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 16px;
font-size:28px;
color:#66403b;
cursor:pointer
}

#travelOptions .mobile-region-links {
display:none
}

#travelOptions .mobile-region-links a {
display:block;
padding:10px 16px 10px 32px;
font-size:20px;
color:#66403b;
text-decoration:none;
border-bottom:1px solid #66403b33
}

.mobile-region-icon {
font-size:28px;
float:right
}

.aboutBlock {
flex-direction:column;
align-items:center
}
}

@media only screen and (max-width:640px) and (orientation:landscape) {
.greetingTitle {
font-size:36px
}

.postBlockTitle {
margin:0 0 0 24px;
width:100%
}
}

@media only screen and (min-width:768px) {
.greetingImage1 {
background-image:url(../images/front/bonnie_zeng_front_left.webp)
}

.greetingImage3 {
background-image:url(../images/front/bonnie_zeng_front_right.webp)
}
}

@media only screen and (min-width:768px) and (max-width:1280px) {
.greetingImageWrapper1 {
padding-left:24px
}

.greetingTextBlock {
height:auto
}

.greetingTitle {
font-size:36px
}

.greetingText {
width:95%;
height:auto;
margin-right:24px;
font-size:22px;
text-align:justify
}

.postBlockTitle {
margin:0 0 0 24px;
width:calc(100% - 24px)
}

.postLinkTitle {
font-size:20px
}

.emptyLink {
display:none
}

.footerBlock {
padding-left:24px
}
}

/* Mobile nested region styles */
#travelOptions {
background-color:#be9e9b;
text-align:left;
margin-top:1vh;
padding:0
}

#travelOptions .mobile-region {
border-bottom:1px solid #66403b33
}

#travelOptions .mobile-region-label {
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 16px;
font-size:28px;
color:#66403b;
cursor:pointer
}

#travelOptions .mobile-region-links {
display:none
}

#travelOptions .mobile-region-links a {
display:block;
padding:10px 16px 10px 32px;
font-size:20px;
color:#66403b;
text-decoration:none;
border-bottom:1px solid #66403b33
}

.mobile-region-icon {
font-size:28px;
float:right
}

.footerLinks a {
color:inherit;
text-decoration:none;
font-size:14px;
}

/* About Me page styles */
.aboutBlock {
display:flex;
justify-content:center;
align-items:center;
margin:24px auto;
gap:24px;
flex-wrap:wrap;
max-width:90vw
}

.aboutMeImage {
width:45%;
max-width:450px;
height:auto
}

.aboutMeBlock {
width:50%;
padding-left:12px;
padding-right:72px;
color:#321e18;
font-family:Poppins;
text-align:left;
font-size:22px;
letter-spacing:0;
line-height:1.6
}

@media only screen and (max-width: 435px) {
.aboutBlock {
display:block;
width:85vw;
padding:0
}

.aboutMeImage {
width:100%;
margin:0 0 24px
}

.aboutMeBlock {
width:auto;
padding:2vh 4vw;
font-family:Nunito;
font-size:18px;
text-align:left;
letter-spacing:0;
margin:0
}
}

/* Override stacking: image above text on tablet/mobile */
@media only screen and (max-width: 768px) {
.aboutBlock {
display:flex!important;
flex-direction:column!important;
align-items:center!important
}

.aboutMeImage {
order:-1!important;
margin-bottom:24px!important
}
}

/* Collage styles */
.collageContainer {
    width: 100%;
    position: relative;
    -ms-overflow-style: none;  /* hide scrollbar in IE/Edge */
    scrollbar-width: none;      /* hide scrollbar in Firefox */
    padding-top: 4vh;
    padding-bottom: 4vh;
}

/* Hide horizontal scrollbar in WebKit browsers */
.collageContainer::-webkit-scrollbar {
    display: none;
}

.collageContainer .collageImage {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    max-height: 30vh;
    max-width: none;
}

/* Mobile override: restrict collageContainer to viewport width */
@media only screen and (max-width: 435px) {
    .collageContainer {
        width: 100vw;
        overflow-x: scroll;
    }

    .collageContainer .collageImage {
        max-width: none;
        left: 0;
        transform: translateX(0%);
    }
}