body {
  background: var(--page-bg);
  padding-left: 1vw;
  padding-right: 1vw;
}


.design-blah {
    font-family: 'bpdots', sans-serif;
    font-size: 2em;
}

.navbar {
    grid-area: navbar;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5dvh 1.5dvw;
    background-color:#78cc3c;
    position: sticky;
    top: 0;
    z-index: 1;               
    background-color: #78cc3c;  
    width: 100%;
}

.nav-logo {
    grid-area: navbar;
    justify-self: start;
    align-self: center;
    margin: 1dvh 0;
}

.nav-logo img {
    height: 70px;
    max-height: 10dvh;
}

.nav-btn {
    grid-area: navbar;
    justify-self: center;
    font-family: 'bpdots', sans-serif;
    font-size: 1.25em;
    text-decoration: none;
    color: #000;
}

.nav-links {
    display: flex;
    gap: 2.5dvw;
}

a:hover {
    color: #C2FF26;
}

.header-section {
    display: flex;
    align-items: center; /* vertically center the title and arrows */
    width: 100%;
}

.h-text {
    grid-area: header;
    justify-content: start;
    align-self: start;
}

.arrows {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1em;
    padding-right: 2rem;
}

h1 {
    margin: 0;
    font-family: 'Frobo', sans-serif;
    font-size: 12em;
    margin-left: 1dvw;
    padding-top: 10dvh;
}


.thumbnail {
  display: inline-block;
  position: relative;
  overflow: hidden;          
}

.thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter .25s ease, transform .25s ease;
  will-change: filter, transform;
}

.thumbnail:hover img,
.thumbnail:focus-visible img {
  filter: brightness(.65);       
  transform: scale(1.02);        
}

.scroll-content {
    display: grid;  
    grid-template-areas:
    "row"
    "row"
    "row"
    "row";
    gap: 2dvh;
    overflow: auto;
    padding-bottom: 5dvh;
}

.row-wrapper {
    display: flex;
    flex-wrap: nowrap;
    margin-left: 2.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position:relative;
    gap: 2rem;
    cursor: grab; /* indicate draggable */
    -ms-overflow-style: none; /* hide scrollbar IE/Edge */
    scrollbar-width: none; /* hide scrollbar Firefox */
}

.row-wrapper img {
    width: 23em;
}

.row-wrapper::-webkit-scrollbar { height: 0; display: none; }

.row-wrapper2 {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    margin-right: 0.5rem;
    overflow-x: auto;
    position:relative; 
    gap: 2rem;
}

.row-wrapper2 img {
    width: 23em;
}

.row-wrapper3 {
    display: flex;
    flex-wrap: nowrap;
    margin-left: 0;
    overflow-x: auto;
    position:relative; 
    gap: 2rem;
}

.row-wrapper3 img {
    width: 23em;
}

.row-wrapper2::-webkit-scrollbar { height: 0; display: none; }
.row-wrapper2 { -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }

.row-wrapper3::-webkit-scrollbar::-webkit-scrollbar { height: 0; display: none; }
.row-wrapper3 { -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
/* Responsive rules: make header title, arrows and thumbnails smaller on narrow viewports */
@media (max-width: 1160px) {
    h1 {
        /* scale the big title down for tablet/smaller screens */
        font-size: clamp(3.5rem, 10vw, 6.5rem);
        padding-top: 4dvh; /* reduce extra top spacing */
        margin-left: 1dvw;
    }

    .arrows h1 {
        font-size: clamp(1.5rem, 4.5vw, 2.5rem);
        padding-right: 1rem;
    }

    /* make thumbnails and row images smaller so rows remain usable on smaller screens */
    .thumbnail img,
    .row-wrapper img,
    .row-wrapper2 img,
    .row-wrapper3 img {
        width: 18rem; /* smaller fixed size for medium screens */
        max-width: 40vw;
    }

    .row-wrapper,
    .row-wrapper2,
    .row-wrapper3 {
        margin-left: 1rem;
        gap: 1rem;
    }
}

@media (max-width: 600px) {
    /* small phones: tighten everything further */
    h1 {
        font-size: clamp(2.25rem, 12vw, 4rem);
        padding-top: 2dvh;
    }

    .arrows h1 {
        font-size: 1.4rem;
        padding-right: 0.5rem;
    }

    .thumbnail img,
    .row-wrapper img,
    .row-wrapper2 img {
        width: 14rem;
        max-width: 85vw;
    }

    .row-wrapper,
    .row-wrapper2 {
        margin-left: 0.75rem;
        gap: 0.75rem;
    }
}