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

:root {
    --light: #d1de62;
    --dark: #283200;
}

@font-face {
    font-family: 'Outward Block';
    src: url('./assets/fonts/outward-block-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Outward Borders';
    src: url('./assets/fonts/outward-borders-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Outward Round';
    src: url('./assets/fonts/outward-round-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Karrik';
    src: url('./assets/fonts/Karrik-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Karrik';
    src: url('./assets/fonts/Karrik-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

body {
    font-family: 'Karrik', sans-serif;
    font-weight: normal;
    background-color: white;
font-size: 1.2rem;
}

nav {
    position: sticky;
    top: 0;
margin: auto;
font-style: italic;
height: 10vh;
transition: 1s;
}

/* HAMBURGER MENU */

.ham-menu {
    display: none;
    height: 50px;
    width: 50px;
    right: 0;
    margin: 2.5vh;
    position: fixed;
    cursor: pointer;
    background-image: url(assets/gifs/WebsiteGif_Menu.gif);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
    z-index: 10;
    transition: .5s ease;
    filter: 
    drop-shadow(1px 1px 1px black) 
    drop-shadow(1px 1px 0px black) 
    drop-shadow(-1px -1px 0px black) 
    drop-shadow(1px -1px 0px black) 
    drop-shadow(-1px 1px 0px black)
    drop-shadow(1px 0px 0px black)
    drop-shadow(-1px 0px 0px black)
    drop-shadow(0px 1px 0px black)
    drop-shadow(0px -1px 0px black)
    drop-shadow(2px 2px 1px black);
}

.ham-menu.active {
    background-image: url(assets/gifs/WebsiteGif_Cross.gif);
}

/* .ham-menu span {
    background-color: white;
    height: 2px;
    width: 80%;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1);
    filter: 
    drop-shadow(1px 1px 1px black) 
    drop-shadow(1px 1px 0px black) 
    drop-shadow(-1px -1px 0px black) 
    drop-shadow(1px -1px 0px black) 
    drop-shadow(-1px 1px 0px black)
    drop-shadow(1px 0px 0px black)
    drop-shadow(-1px 0px 0px black)
    drop-shadow(0px 1px 0px black)
    drop-shadow(0px -1px 0px black)
    drop-shadow(2px 2px 1px black);
}

.ham-menu span:nth-child(1) {
    top: 25%;
}

.ham-menu span:nth-child(3) {
    top: 75%;
}

.ham-menu.active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.ham-menu.active span:nth-child(2) {
    opacity: 0;
}

.ham-menu.active span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, 50%) rotate(-45deg);
} */

.blackBG{
    background: black;
}

.navImg{
    position: absolute;
top: 0;
left: 0;
z-index: 0;
    height: 100%;
    width: 100%;
    background-image: url('./assets/standin.png');
background-size: cover;
background-position: center;

/* Apply a gradient mask */
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;

/* For browsers that support unprefixed 'mask-image' */
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
mask-size: 100% 100%;
mask-repeat: no-repeat;
}

.list{
    display: flex;
    justify-content: center;
    margin: 0 auto;
    height: 100%;
}

.footerBGlight {
    background-image: linear-gradient(to top, rgba(25, 33, 0, 0.5), rgba(65, 86, 0, 0));
}
.navBGlight {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    transition: all 2.5s ease;
}

.maxWidth {
    max-width: 1000px;
}

.maxWidthGrid {
    max-width: 1200px;
}

.space-between {
    justify-content: space-between;
    align-items: center;
    min-width: 900px;
}

.socials{
    display: inline;
    overflow: visible;
}

.socials img {
    width: 30px;
    filter: drop-shadow(1px 1px 0px black);
    margin: 0 .5vw;
    transition: 0.2s;
    overflow: visible;
}

nav a {
    text-decoration: none;
    /* font-size: 1.3rem; */
    color: white;
    padding: 2rem;
    letter-spacing: .05rem;
    text-shadow: 
    1px 1px 0px black, 
    -1px -1px 0px black, 
    1px -1px 0px black, 
    -1px 1px 0px black,
    1px 0px 0px black,
    -1px 0px 0px black,
    0px 1px 0px black,
    0px -1px 0px black,
    2px 2px 1px black;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

li {
    list-style: none;
    margin: auto;
    z-index: 100;
    /* background: rgba(0,0,0,0.5); */

}

.cv {
    background-color: var(--dark);
    border-radius: 10px;
    color: white;
    padding: 1rem;
    margin: 5vh 0;
}

nav a:hover {
    color: transparent;
    padding: 1rem;
    filter: 
        drop-shadow(1px 1px 1px black) 
        drop-shadow(1px 1px 0px black) 
        drop-shadow(-1px -1px 0px black) 
        drop-shadow(1px -1px 0px black) 
        drop-shadow(-1px 1px 0px black)
        drop-shadow(1px 0px 0px black)
        drop-shadow(-1px 0px 0px black)
        drop-shadow(0px 1px 0px black)
        drop-shadow(0px -1px 0px black)
        drop-shadow(2px 2px 1px black);
    text-shadow: none;
}

.sub-menu {
    position: absolute;
    top: 4vh;
    width: 100%;
    text-align: center;
    background-color: rgba(40, 50, 0, 0.8);
    padding: 10px;
    list-style: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid white;
}

.sub-menu a {
    color: white;
    text-decoration: none;
    padding: 1rem 0;
    display: block;
    cursor: pointer;
}

.sub-menu li:nth-child(1) a:hover, .on-clients {
    background-image: url(assets/gifs/WebsiteGif_Clientwork_1.gif);
}
.sub-menu li:nth-child(2) a:hover, .on-personal {
    background-image: url(assets/gifs/WebsiteGif_Personalwork_1.gif);
}

.on-clients, .on-personal {
    filter: drop-shadow(1px 1px 1px black) 
drop-shadow(1px 1px 0px black) 
drop-shadow(-1px -1px 0px black) 
drop-shadow(1px -1px 0px black) 
drop-shadow(-1px 1px 0px black)
drop-shadow(1px 0px 0px black)
drop-shadow(-1px 0px 0px black)
drop-shadow(0px 1px 0px black)
drop-shadow(0px -1px 0px black)
drop-shadow(2px 2px 1px black);
}

.nav-link-2-container {
    position: relative; /* Ensure the sub-menu is positioned relative to this container */
}

.nav-link-1:hover, .on-1 {
    padding: 2.5rem;
    background-image: url(assets/gifs/WebsiteGif_CharDesign.gif);
}
.nav-link-2:hover, .on-2 {
    padding: 2.5rem;
    background-image: url(assets/gifs/WebsiteGif_DesForAnimation.gif);
}
.nav-link-3:hover, .on-3 {
    padding: 2.5rem;
    background-image: url(assets/gifs/WebsiteGif_Shortfilms.gif);
}
.nav-link-4:hover, .on-4 {
    padding: 2.5rem;
    background-image: url(assets/gifs/WebsiteGif_illustration.gif);
}
.nav-link-5:hover, .on-5 {
    padding: 2.5rem;
    background-image: url(assets/gifs/WebsiteGif_AboutMe.gif);
}

.on-1, .on-2, .on-3, .on-4, .on-5 {
    color: transparent;
    filter: 
    drop-shadow(1px 1px 1px black) 
    drop-shadow(1px 1px 0px black) 
    drop-shadow(-1px -1px 0px black) 
    drop-shadow(1px -1px 0px black) 
    drop-shadow(-1px 1px 0px black)
    drop-shadow(1px 0px 0px black)
    drop-shadow(-1px 0px 0px black)
    drop-shadow(0px 1px 0px black)
    drop-shadow(0px -1px 0px black)
    drop-shadow(2px 2px 1px black);
text-shadow: none;
}

footer {
    position: fixed;
    transform: translateX(-50%);
    left: 50%;
bottom: 0;
height: 150px;
display: flex;
justify-content: space-between;
width: 100%;
margin: auto;
padding: 1rem;
}

.footerSpan {
    display: flex;
    margin: 0 auto;
}
.bio {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    max-width: 1000px;
    margin: auto;
    height: 82vh;
}

.bio-img {
    background: url('assets/profile.jpeg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 150vw;
    height: 100%;

}

.bio-text {
    padding: 1rem;
}

.bio-text p {
    margin: 1rem 0;
}
.bio-text p:nth-of-type(5) {
    margin: 2rem 0;
    text-align: center;
}

.navVideo {
    position: fixed;
    width: 100%;
    height: 12vh;
    top: 0;
    overflow: hidden;
    background-image: url('assets/icons/bg_seq/TopForest_Comp\ 2_00000.jpg'); /* Fallback background image */
    background-size: cover;
    background-position: center;
    /* Apply a gradient mask */
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;

/* For browsers that support unprefixed 'mask-image' */
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
mask-size: 100% 100%;
mask-repeat: no-repeat;
transition: 1s;
}

#nav-background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footImg {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
        height: 100%;
        width: 100%;
    /* background-image: url('./assets/standin.png'); */
    background-color: white;
background-size: cover;
background-position: center;

/* Apply a gradient mask */
-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;

/* For browsers that support unprefixed 'mask-image' */
mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
mask-size: 100% 100%;
mask-repeat: no-repeat;
}

.z100 {
    z-index: 100;
}

.slideshow-container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    overflow: hidden;
    padding: 0;
    z-index: -1;
}

.slideshow-image {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slideshow-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Cover ensures the image covers the area while maintaining its aspect ratio */
}

.shortFilmsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 30px;
    height: 250vh;
    width: 100%;
    margin: 10vh auto 35vh auto;
}


.shortFilmsGrid > .div2, .shortFilmsGrid > .div4, .shortFilmsGrid > .div6, .shortFilmsGrid > .div8, .shortFilmsGrid > .div10, .shortFilmsGrid > .div12 {
    display: block;
    padding: 2rem 0.5rem;
    color: white;
    border-left: 1px solid var(--light);
}

.film-title {
    font-size: 2rem;
    padding-bottom: 1rem;
    font-style: italic;
    color: var(--light);
}

.film-credits{
    line-height: 1.5rem;
}
 
.shortFilmsGrid > .div1 {
    grid-column: span 2 / span 2;
}

.shortFilmsGrid > .div2 {
    grid-column-start: 3;
}

.shortFilmsGrid > .div3 {
    grid-column: span 2 / span 2;
    grid-row-start: 2;
}

.shortFilmsGrid > .div4 {
    grid-column-start: 3;
    grid-row-start: 2;
}

.shortFilmsGrid > .div5 {
    grid-column: span 2 / span 2;
    grid-row-start: 3;
}

.shortFilmsGrid > .div6 {
    grid-column-start: 3;
    grid-row-start: 3;
}

.shortFilmsGrid > .div7 {
    grid-column: span 2 / span 2;
    grid-row-start: 4;
}

.shortFilmsGrid > .div8 {
    grid-column-start: 3;
    grid-row-start: 4;
}

.shortFilmsGrid > .div9 {
    grid-column: span 2 / span 2;
    grid-row-start: 5;
}

.shortFilmsGrid > .div10 {
    grid-column-start: 3;
    grid-row-start: 5;
}

.div11 {
    grid-column: span 2 / span 2;
    grid-row-start: 6;
}

.div12 {
    grid-column-start: 3;
    grid-row-start: 6;
}

.signature {
    background-image: url(assets/icons/pedro.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 50%;
    height: 100px;
    filter: drop-shadow(1px 1px 0px black);
    cursor: pointer;
}

.gridOne {
    display: grid;
    height: 650vh;
    gap: 8px;
    grid-template-areas: 
    "div-1 div-1 div-1 div-2 div-2 div-2"
    "div-1 div-1 div-1 div-2 div-2 div-2"
    "div-1 div-1 div-1 div-2 div-2 div-2"
    "div-3 div-3 div-3 div-3 div-3 div-3"
    "div-3 div-3 div-3 div-3 div-3 div-3"
    "div-3 div-3 div-3 div-3 div-3 div-3"
    "div-3 div-3 div-3 div-3 div-3 div-3"
    "div-4 div-4 div-5 div-5 div-6 div-6"
    "div-4 div-4 div-5 div-5 div-6 div-6"
    "div-7 div-7 div-7 div-8 div-8 div-8"
    "div-7 div-7 div-7 div-8 div-8 div-8"
    "div-7 div-7 div-7 div-8 div-8 div-8"
    "div-9 div-9 div-9 div-10 div-10 div-10"
    "div-9 div-9 div-9 div-10 div-10 div-10"
    "div-9 div-9 div-9 div-10 div-10 div-10"
    "div-11 div-11 div-11 div-11 div-11 div-11"
    "div-11 div-11 div-11 div-11 div-11 div-11"
    "div-11 div-11 div-11 div-11 div-11 div-11"
    "div-11 div-11 div-11 div-11 div-11 div-11"
    "div-12 div-12 div-12 div-13 div-13 div-13"
    "div-12 div-12 div-12 div-13 div-13 div-13"
    "div-12 div-12 div-12 div-13 div-13 div-13"
    "div-12 div-12 div-12 div-13 div-13 div-13"
    "div-14 div-14 div-15 div-15 div-16 div-16"
    "div-14 div-14 div-15 div-15 div-16 div-16"
    "div-17 div-17 div-17 div-18 div-18 div-18"
    "div-17 div-17 div-17 div-18 div-18 div-18"
    "div-17 div-17 div-17 div-18 div-18 div-18"
    "div-19 div-19 div-19 div-20 div-20 div-20"
    "div-19 div-19 div-19 div-20 div-20 div-20"
    "div-19 div-19 div-19 div-20 div-20 div-20"
    "div-21 div-21 div-21 div-21 div-21 div-21"
    "div-21 div-21 div-21 div-21 div-21 div-21"
    "div-21 div-21 div-21 div-21 div-21 div-21"
    "div-21 div-21 div-21 div-21 div-21 div-21"
    "div-22 div-22 div-22 div-23 div-23 div-23"
    "div-22 div-22 div-22 div-23 div-23 div-23"
    "div-22 div-22 div-22 div-23 div-23 div-23"
    "div-22 div-22 div-22 div-23 div-23 div-23"
    "div-24 div-24 div-24 div-24 div-24 div-24"
    "div-24 div-24 div-24 div-24 div-24 div-24"
    "div-24 div-24 div-24 div-24 div-24 div-24"
    "div-24 div-24 div-24 div-24 div-24 div-24"
    "div-25 div-25 div-26 div-26 div-27 div-27"
    "div-25 div-25 div-26 div-26 div-27 div-27"
    "div-28 div-28 div-29 div-29 div-30 div-30"
    "div-28 div-28 div-29 div-29 div-30 div-30";  
    padding: 8px;
    margin: 10vh auto;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
}

.gridOne {margin: 10vh auto 2vh auto;}

.gridOne > div, .gridTwo > div, .gridThree > div, .div-comic > div {
    /* background-color: #f0f0f0; */
    /* border: 1px solid #000; */
    /* padding: 1rem; */
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    /* background-color: var(--dark); */
}

/* .gridThree > div {background-size: contain;} */

.gridOne > .div-1 { grid-area: div-1;  background-image: url(assets/design_personal/1_504ea4_0e218db0908f4adf9c99d37e9613408e~mv2.webp)}
.gridOne > .div-2 { grid-area: div-2;  background-image: url(assets/design_personal/1_504ea4_5aaf266e61c14704b723c9df93ab6488~mv2.jpg)}
.gridOne > .div-3 { grid-area: div-3;  background-image: url(assets/design_personal/1H_504ea4_6be3912aed284ca9bc5f180fed448e0a~mv2.webp)}
.gridOne > .div-4 { grid-area: div-4;  background-image: url(assets/design_personal/1_504ea4_c1261933c4e34d8a8ef90e5d3d874230~mv2.webp)}
.gridOne > .div-5 { grid-area: div-5;  background-image: url(assets/design_personal/1_504ea4_37b7db8467ad443cb365309cbb20c1cd~mv2.webp)}
.gridOne > .div-6 { grid-area: div-6;  background-image: url(assets/design_personal/1_504ea4_75998b82b78b40f09acea62afe7874d0~mv2.webp)}
.gridOne > .div-7 { grid-area: div-7;  background-image: url(assets/design_personal/1_504ea4_4586f3ad6b5f4940933fb906200e89a6~mv2.jpg)}
.gridOne > .div-8 { grid-area: div-8;  background-image: url(assets/design_personal/1H_504ea4_ba9e73b4c1a445d7ba4879b16d858f4f~mv2.webp)}
.gridOne > .div-9 { grid-area: div-9;  background-image: url(assets/design_personal/1H_504ea4_89f38e6c5dd34a8c996fad1c1b883254~mv2.webp)}
.gridOne > .div-10 { grid-area: div-10; background-image: url(assets/design_personal/1H_504ea4_9ea99a2d8cbd42aaab8cc78fb422e811~mv2.webp)}
.gridOne > .div-11 { grid-area: div-11; background-image: url(assets/design_personal/1H_504ea4_c779e44d63d84434aaffe8377c462324~mv2.webp)}
.gridOne > .div-12 { grid-area: div-12; background-image: url(assets/design_personal/2_ESTOU_504ea4_078b7b2843c347999cc00679df086373~mv2.webp)}
.gridOne > .div-13 { grid-area: div-13; background-image: url(assets/design_personal/2_ESTOU_504ea4_5e5269881f7f40d9a43b0e342972f642~mv2.webp)}
.gridOne > .div-14 { grid-area: div-14; background-image: url(assets/design_personal/3_504ea4_6911cd9d1c1d442b9382feca41d02168~mv2.webp)}
.gridOne > .div-15 { grid-area: div-15; background-image: url(assets/design_personal/3_CASCA_504ea4_41b45a90b94a467fb1b7223a571e85fa~mv2.webp)}
.gridOne > .div-16 { grid-area: div-16; background-image: url(assets/design_personal/3_CASCA_504ea4_486b732f07ca4997919cab9f4eb7e937~mv2.webp)}
.gridOne > .div-17 { grid-area: div-17; background-image: url(assets/design_personal/3_CASCA_504ea4_558e67ddde1d44e288c8e633e819a6a7~mv2.webp)}
.gridOne > .div-18 { grid-area: div-18; background-image: url(assets/design_personal/3H_504ea4_c2855176676c4645be764da2af3e084e~mv2.jpg)}
.gridOne > .div-19 { grid-area: div-19; background-image: url(assets/design_personal/4_504ea4_589e08f34214469ca9eea682af3357ee~mv2.webp)}
.gridOne > .div-20 { grid-area: div-20; background-image: url(assets/design_personal/4_504ea4_dab61038565446bfafcc8016a6a82cbf~mv2.webp)}
.gridOne > .div-21 { grid-area: div-21; background-image: url(assets/design_personal/4H_504ea4_623b208b4a7a4aeea2d285bffe0aa79f~mv2.webp)}
.gridOne > .div-22 { grid-area: div-22; background-image: url(assets/design_personal/5_504ea4_dc42b5d4eced4d0eb17300cb1d95b931~mv2.webp)}
.gridOne > .div-23 { grid-area: div-23; background-image: url(assets/design_personal/5_504ea4_e834697e20a34460bb6b5f02f1f0d43f~mv2.webp)}
.gridOne > .div-24 { grid-area: div-24; background-image: url(assets/design_personal/5H_504ea4_c8a924ccffd14fd98deaf92dcc9e46a3~mv2.webp)}
.gridOne > .div-25 { grid-area: div-25; background-image: url(assets/design_personal/8_504ea4_a1ccbfe792534a37aaec60ce8ea97dd8~mv2.webp)}
.gridOne > .div-26 { grid-area: div-26; background-image: url(assets/design_personal/9_504ea4_16569880871140e7b2049a50b68458b0~mv2.jpg)}
.gridOne > .div-27 { grid-area: div-27; background-image: url(assets/design_personal/9_504ea4_5518256b80f64565bcb619859998435c~mv2.webp)}
.gridOne > .div-28 { grid-area: div-28; background-image: url(assets/design_personal/9_504ea4_ac418f085b6d442281ae4530c99183f8~mv2.webp)}
.gridOne > .div-29 { grid-area: div-29; background-image: url(assets/design_personal/10_504ea4_d7fc79ac4bec4e5fbc09480c651ad34b~mv2.webp)}
.gridOne > .div-30 { grid-area: div-30; background-image: url(assets/design_personal/10_504ea4_e3a3498290954c0d8fd8a7824790cd4e~mv2.webp)}

.link2clients { 
    background-color: #415600;
    color: white;
    margin: auto;
    max-width: 900px;
    margin-bottom: 20vh;
    height: 10vh;
    align-content: center;
    text-align: center;
border: white 1px solid;
cursor: pointer;}
.link2clients i {
    font-size: 0.8rem;
}

.link2clients:hover {
    background-color: #d1de62;
    color: black;
}

.gridTwo {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  display: grid; 
  grid-template-areas: 
  "div-1 div-1 div-1 div-2 div-2 div-2"
  "div-1 div-1 div-1 div-2 div-2 div-2"
  "div-1 div-1 div-1 div-2 div-2 div-2"
  "div-3 div-3 div-4 div-4 div-5 div-5"
  "div-3 div-3 div-4 div-4 div-5 div-5"
  "div-3 div-3 div-4 div-4 div-5 div-5"
  "div-3 div-3 div-4 div-4 div-5 div-5"
  "div-6 div-6 div-7 div-7 div-8 div-8"
  "div-6 div-6 div-7 div-7 div-8 div-8"
  "div-9 div-9 div-9 div-9 div-9 div-9"
  "div-9 div-9 div-9 div-9 div-9 div-9"
  "div-9 div-9 div-9 div-9 div-9 div-9"
  "div-9 div-9 div-9 div-9 div-9 div-9"
  "div-10 div-10 div-11 div-11 div-12 div-12"
  "div-10 div-10 div-11 div-11 div-12 div-12"
  "div-13 div-14 div-14 div-15 div-16 div-16"
  "div-13 div-14 div-14 div-15 div-16 div-16"
  "div-13 div-14 div-14 div-165 div-165 div-165"
  "div-13 div-14 div-14 div-165 div-165 div-165"
  "div-13 div-14 div-14 div-165 div-165 div-165"
  "div-comic div-comic div-comic div-comic div-comic div-comic"
  "div-comic div-comic div-comic div-comic div-comic div-comic"
  "div-comic div-comic div-comic div-comic div-comic div-comic"
  "div-comic div-comic div-comic div-comic div-comic div-comic"
  "div-comic div-comic div-comic div-comic div-comic div-comic"
  "div-comic div-comic div-comic div-comic div-comic div-comic"
  "div-comic div-comic div-comic div-comic div-comic div-comic"
  "div-comic div-comic div-comic div-comic div-comic div-comic"
  "div-comic div-comic div-comic div-comic div-comic div-comic"
  "div-comic div-comic div-comic div-comic div-comic div-comic"
  "div-25 div-25 div-25 div-25 div-25 div-25"
  "div-25 div-25 div-25 div-25 div-25 div-25"
  "div-25 div-25 div-25 div-25 div-25 div-25"
  "div-25 div-25 div-25 div-25 div-25 div-25"
  "div-26 div-26 div-26 div-27 div-27 div-27"
  "div-26 div-26 div-26 div-27 div-27 div-27"
  "div-28 div-28 div-28 div-30 div-30 div-30"
  "div-28 div-28 div-28 div-30 div-30 div-30"
  "div-29 div-29 div-29 div-30 div-30 div-30"
  "div-29 div-29 div-29 div-30 div-30 div-30"
  "div-31 div-31 div-32 div-32 div-35 div-35"
  "div-31 div-31 div-32 div-32 div-35 div-35"
  "div-31 div-31 div-32 div-32 div-35 div-35"
  "div-33 div-33 div-34 div-34 div-35 div-35"
  "div-33 div-33 div-34 div-34 div-35 div-35"
  "div-33 div-33 div-34 div-34 div-35 div-35";  
    height: 330vw;
    gap: 12px;
    padding: 8px;
    margin: 12vh auto;
    background-color: none;
}

.div-comic {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr 1fr; 
    gap: 8px;
    grid-template-areas: 
    "div-17 div-17 div-18 div-18 div-19 div-19 div-20 div-20"
    "div-17 div-17 div-18 div-18 div-19 div-19 div-20 div-20"
    "div-21 div-21 div-22 div-22 div-23 div-23 div-24 div-24"
    "div-21 div-21 div-22 div-22 div-23 div-23 div-24 div-24"; 
    grid-area: div-comic;
  }

.gridTwo > .div-1 { background-image: url(assets/Illustration/1_504ea4_1b8a98431c74427cae68331f50e89be3~mv2.webp); grid-area: div-1}
.gridTwo > .div-2 { background-image: url(assets/Illustration/1_504ea4_8d6de1bffe7f4eda81a1a6466f66128b~mv2.webp); grid-area: div-2}
.gridTwo > .div-3 { background-image: url(assets/Illustration/2_504ea4_1534d3a457b442cc9df32f95f1258c87~mv2.webp); grid-area: div-3}
.gridTwo > .div-4 { background-image: url(assets/Illustration/2_504ea4_49ea5e64e44346b68431fd7119bc3f0e~mv2.webp); grid-area: div-4}
.gridTwo > .div-5 { background-image: url(assets/Illustration/2_504ea4_baa90b9370144a26b929ec29d84ce00f~mv2.jpg); grid-area: div-5}
.gridTwo > .div-6 { background-image: url(assets/Illustration/3_504ea4_505389a514b842998a2b3ffad8886bae~mv2.webp); grid-area: div-6}
.gridTwo > .div-7 { background-image: url(assets/Illustration/3_504ea4_c604c33081a84756907826f89f90a377~mv2.webp); grid-area: div-7}
.gridTwo > .div-8 { background-image: url(assets/Illustration/3_504ea4_d7324d17eaac4fbcb439e3dd6b33b637~mv2.webp); grid-area: div-8}
.gridTwo > .div-9 { background-image: url(assets/Illustration/504ea4_dd59533287134b83bcb7e95776351132~mv2_H.webp); grid-area: div-9}
.gridTwo > .div-10 { background-image: url(assets/Illustration/504ea4_de0a7572b24746d18b394dc2d62844b6~mv2.webp); grid-area: div-10}
.gridTwo > .div-11 { background-image: url(assets/Illustration/504ea4_f297881a07b34bcabb6c1a6a8f115177~mv2.webp); grid-area: div-11}
.gridTwo > .div-12 { background-image: url(assets/Illustration/504ea4_f8c1b966854143cd8651bddf356ec695~mv2.webp); grid-area: div-12}
.gridTwo > .div-13 { background-image: url(assets/Illustration/AOM.jpg); grid-area: div-13}
.gridTwo > .div-14 { background-image: url(assets/Illustration/CB_Concept_01.webp); grid-area: div-14}
.gridTwo > .div-15 { background-image: url(assets/Illustration/ClubToilet_Comic_01.webp); grid-area: div-15}
.gridTwo > .div-16 { background-image: url(assets/Illustration/CozyFamily_Fire_v01.webp); grid-area: div-16}
.gridTwo > .div-165 { background-image: url(assets/Illustration/page_5.jpg); grid-area: div-165}
.gridTwo > .div-comic > .div-17 { background-image: url(assets/Illustration/HD09_P13.webp); grid-area: div-17}
.gridTwo > .div-comic > .div-18 { background-image: url(assets/Illustration/HD11_P02.webp); grid-area: div-18}
.gridTwo > .div-comic > .div-19 { background-image: url(assets/Illustration/HD11_P06.webp); grid-area: div-19}
.gridTwo > .div-comic > .div-20 { background-image: url(assets/Illustration/HD11_P20.webp); grid-area: div-20}
.gridTwo > .div-comic > .div-21 { background-image: url(assets/Illustration/HD11_P22.webp); grid-area: div-21}
.gridTwo > .div-comic > .div-22 { background-image: url(assets/Illustration/HD11_P24.webp); grid-area: div-22}
.gridTwo > .div-comic > .div-23 { background-image: url(assets/Illustration/HD11_P27.webp); grid-area: div-23}
.gridTwo > .div-comic > .div-24 { background-image: url(assets/Illustration/HD11_P31.webp); grid-area: div-24}
.gridTwo > .div-25 { background-image: url(assets/Illustration/digimon.jpg); grid-area: div-25}
.gridTwo > .div-26 { background-image: url(assets/Illustration/Pokemon_page_01.webp); grid-area: div-26}
.gridTwo > .div-27 { background-image: url(assets/Illustration/Pokemon_page_02.webp); grid-area: div-27}
.gridTwo > .div-28 { background-image: url(assets/Illustration/Pokemon_page_03.webp); grid-area: div-28}
.gridTwo > .div-29 { background-image: url(assets/Illustration/Terrarium_Survival_04.webp); grid-area: div-29}
.gridTwo > .div-30 { background-image: url(assets/Illustration/Terrarium_Survival03.webp); grid-area: div-30}
.gridTwo > .div-31 { background-image: url(assets/Illustration/Omori_Bunnies.webp); grid-area: div-31}
.gridTwo > .div-32 { background-image: url(assets/Illustration/Divinity_Fanart.jpg); grid-area: div-32}
.gridTwo > .div-33 { background-image: url(assets/Illustration/Page_03.webp); grid-area: div-33}
.gridTwo > .div-34 { background-image: url(assets/Illustration/Page_02.webp); grid-area: div-34}
.gridTwo > .div-35 { background-image: url(assets/Illustration/Toilet_Painting_Render.webp); grid-area: div-35}

.gridThree {
    display: grid; 
    height: 220vw;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    gap: 8px;
    padding: 8px;
    margin: 14vh auto;
    grid-template-areas: 
    "div-1 div-1 div-3 div-3 div-3 div-3"
    "div-1 div-1 div-3 div-3 div-3 div-3"
    "div-2 div-2 div-3 div-3 div-3 div-3"
    "div-2 div-2 div-3 div-3 div-3 div-3"
    "div-2 div-2 div-3 div-3 div-3 div-3"
    "div-2 div-2 div-4 div-4 div-6 div-6"
    "div-5 div-5 div-4 div-4 div-6 div-6"
    "div-5 div-5 div-7 div-7 div-6 div-6"
    "div-5 div-5 div-7 div-7 div-8 div-8"
    "div-9 div-9 div-9 div-9 div-8 div-8"
    "div-9 div-9 div-9 div-9 div-8 div-8"
    "div-9 div-9 div-9 div-9 div-10 div-10"
    "div-11 div-11 div-11 div-12 div-10 div-10"
    "div-11 div-11 div-11 div-12 div-10 div-10"
    "div-11 div-11 div-11 div-12 div-10 div-10"
    "div-13 div-13 div-13 div-14 div-14 div-14"
    "div-13 div-13 div-13 div-14 div-14 div-14"
    "div-13 div-13 div-13 div-14 div-14 div-14";
}
  
.gridThree > .div-1 { background-image: url(assets/character_design/1_EldenRing_CharDesign_001_Imp.webp); grid-area: div-1; }  
.gridThree > .div-2 { background-image: url(assets/character_design/1_EldenRing_CharDesign_002_Wraith.webp); grid-area: div-2; }  
.gridThree > .div-3 { background-image: url(assets/character_design/1_EldenRing_CharDesign_002_Prelate_01.webp); grid-area: div-3; }  
.gridThree > .div-4 { background-image: url(assets/character_design/2_Bronn.webp); grid-area: div-4; }  
.gridThree > .div-5 { background-image: url(assets/character_design/2_Elec.webp); grid-area: div-5; }  
.gridThree > .div-6 { background-image: url(assets/character_design/2_Flor_Char_Des.webp); grid-area: div-6; }  
.gridThree > .div-7 { background-image: url(assets/character_design/2_Hynn_Char_Des.webp); grid-area: div-7; }  
.gridThree > .div-8 { background-image: url(assets/character_design/2_Al_Char_Des.webp); grid-area: div-8; }  
.gridThree > .div-9 { background-image: url(assets/character_design/2_HynnFamPhoto_v03.webp); grid-area: div-9; }  
.gridThree > .div-11 {background-image: url(assets/character_design/3_Destiny_Comics_Redraw\ copy\ 2.webp);  grid-area: div-11; }  
.gridThree > .div-12 { background-image: url(assets/character_design/3_Fran_CharDes_01.webp); grid-area: div-12; }  
.gridThree > .div-10 { background-image: url(assets/character_design/3_Inverna_Gangster.webp); grid-area: div-10; }
.gridThree > .div-13 { background-image: url(assets/character_design/pt_school_of_magic_1.jpg); grid-area: div-13; }
.gridThree > .div-14 { background-image: url(assets/character_design/pt_school_of_magic_2.webp); grid-area: div-14; }


.clients {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    height: 22vh;
    width: 100%;
    border-top: black 1px solid;
    margin: 2rem 0;
    padding-top: 4rem;
    position: relative;
}

.clients::before {content: 'Previous clients';
    position: absolute;
    top: 0;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    font-size: .8rem;
    font-style: italic;
    padding: 1rem;}
.clients > * {
    opacity: 0.7;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.clients > div:nth-child(1) {
    background-image: url(assets/clients/1200px-Aardman_Logo.svg.png);
    
}

.clients > div:nth-child(2) {
    background-image: url(assets/clients/BBF-logo-2020.png);
    /
}

.clients > div:nth-child(3) {
    background-image: url(assets/clients/Blinkink.png);
    
}

/* Repeat for all twelve children */
.clients > div:nth-child(4) {
    background-image: url(assets/clients/CITV_logo_2013.svg.png);
    /
}

.clients > div:nth-child(5) {
    background-image: url(assets/clients/Dandelooo.png);
    
}

.clients > div:nth-child(6) {
    background-image: url(assets/clients/Giant\ Animation.png);
    
}

.clients > div:nth-child(7) {
    background-image: url(assets/clients/MusoFIlms.png);
}

.clients > div:nth-child(8) {
    background-image: url(assets/clients/Netflix_Logo_PMS.png);
}

.clients > div:nth-child(9) {
    background-image: url(assets/clients/Nickelodeon_2009_logo.svg.png);
}

.clients > div:nth-child(10) {
    background-image: url(assets/clients/ogp_square-enix.png);
}

.clients > div:nth-child(11) {
    background-image: url(assets/clients/Sun_Moon.png);
}

.clients > div:nth-child(12) {
    background-image: url(assets/clients/Universal_Pictures_logo.svg.png);
}

.flexGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    margin: 10vh auto;
}

.flexGridItem {
    display: inline-block; /* Important: for column layout */
    width: 100%;          /* Makes items fill the column width */
    margin-bottom: 1rem;   /* Gap between items */
    height: 42vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.flexGridItem img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.flexGrid > .div-1 { background-image: url(assets/design_client/1/LiS_DblExpSwitch_BG_sh01.webp)}
.flexGrid > .div-2 { background-image: url(assets/design_client/1/LiS_SH002_BG_v002.webp)}
.flexGrid > .div-3 { background-image: url(assets/design_client/1/LiS_SH003_BG_v002.webp)}
.flexGrid > .div-4 { background-image: url(assets/design_client/1/LiS_SH005_BG.webp)}
.flexGrid > .div-5 { background-image: url(assets/design_client/2/504ea4_3b1bf652ac5540e3899749e159449a1f~mv2.webp)}
.flexGrid > .div-6 { background-image: url(assets/design_client/2/504ea4_4837e1ad33fc4affb1bdd7d7bd15499a~mv2.webp)}
.flexGrid > .div-7 { background-image: url(assets/design_client/2/504ea4_63e09be5a289470aa1dcdc0508c5f151~mv2.webp)}
.flexGrid > .div-8 { background-image: url(assets/design_client/2/504ea4_bf9256b9b2544602a10acbc70ae5240a~mv2.webp)}
.flexGrid > .div-9 { background-image: url(assets/design_client/3/504ea4_05f6c30315af4abcbf7e53efa5df53e1~mv2.webp)}
.flexGrid > .div-10 { background-image: url(assets/design_client/3/504ea4_5b40228e786a46689eb8447d6271f841~mv2.webp)}
.flexGrid > .div-11 { background-image: url(assets/design_client/3/504ea4_b5314e4bff4f470faa0b8a0222dccc1e~mv2.webp)}
.flexGrid > .div-12 { background-image: url(assets/design_client/3/504ea4_d094800dd26f41b398d4e2245eb4b24b~mv2.webp)}
.flexGrid > .div-13 { background-image: url(assets/design_client/3/504ea4_e4d2dd762f1d426fa31e13234c9de3a9~mv2.webp)}
.flexGrid > .div-14 { background-image: url(assets/design_client/4/504ea4_025916103302453fb243a6eb01cc4c25~mv2.webp)}
.flexGrid > .div-15 { background-image: url(assets/design_client/4/504ea4_044990d8bce44b6da3297bfbf63ef3a7~mv2.webp)}
.flexGrid > .div-16 { background-image: url(assets/design_client/4/504ea4_060fb1b0845f46d5a9bcb0b833119c05~mv2.webp)}
.flexGrid > .div-17 { background-image: url(assets/design_client/4/504ea4_0fbdfc655e154727bfae77ec010c160b~mv2.webp)}
.flexGrid > .div-18 { background-image: url(assets/design_client/4/504ea4_28adeca07c73461aabd9f3076870ca71~mv2.webp)}
.flexGrid > .div-19 { background-image: url(assets/design_client/4/504ea4_320e1d1428f04c9da1533503ee1b640a~mv2.webp)}
.flexGrid > .div-20 { background-image: url(assets/design_client/4/504ea4_43d0ca52a7134e05bb8530629d0e24dd~mv2.webp)}
.flexGrid > .div-21 { background-image: url(assets/design_client/4/504ea4_45397d391ec54ae183b35eb74e2233f4~mv2.webp)}
.flexGrid > .div-22 { background-image: url(assets/design_client/4/504ea4_52c9f845ccc5495e9f918071d89d6e1b~mv2.webp)}
.flexGrid > .div-23 { background-image: url(assets/design_client/4/504ea4_56c60505e46944cdb605a9b9ac5d5473~mv2.webp)}
.flexGrid > .div-24 { background-image: url(assets/design_client/4/504ea4_666e2fa03f5d4ae1b2c3b397545d0792~mv2.webp)}
.flexGrid > .div-25 { background-image: url(assets/design_client/4/504ea4_7284aebbb6dc49479b4bc811d7d35574~mv2.webp)}
.flexGrid > .div-26 { background-image: url(assets/design_client/4/504ea4_78b2eb10d3c748a2881750ada01cf64a~mv2.webp)}
.flexGrid > .div-27 { background-image: url(assets/design_client/4/504ea4_825ec4664eeb4b9aad893df540f3f524~mv2.webp)}
.flexGrid > .div-28 { background-image: url(assets/design_client/4/504ea4_c6061132d3084e54a160917f103a7449~mv2.webp)}
.flexGrid > .div-29 { background-image: url(assets/design_client/4/504ea4_cd6e6a38e3da4795bfff722990857540~mv2.webp)}
.flexGrid > .div-30 { background-image: url(assets/design_client/4/504ea4_e5eb3f8531b4430283df0e31cb5078ee~mv2.webp)}
.flexGrid > .div-31 { background-image: url(assets/design_client/4/504ea4_fbcf1fa3d25541b1824cc3027b9a25c2~mv2.webp)}
.flexGrid > .div-32 { background-image: url(assets/design_client/4/504ea4_fdaf1a8d0f7844b3a7ce11f2ec7de1ad~mv2.webp)}
.flexGrid > .div-33 { background-image: url(assets/design_client/7/504ea4_46d25beff7854142ba2cad69d5195943~mv2.webp)}
.flexGrid > .div-34 { background-image: url(assets/design_client/5/504ea4_8d71bdf5d7734d8ea83028beefea37b1~mv2.webp)}
.flexGrid > .div-35 { background-image: url(assets/design_client/5/504ea4_aa30591c67324ae8a3e79c43d0605f22~mv2.webp)}
.flexGrid > .div-36 { background-image: url(assets/design_client/7/504ea4_4ef2d446fbdb464db246ab69849605d8~mv2.webp)}
.flexGrid > .div-37 { background-image: url(assets/design_client/7/504ea4_5d5ac1c7ef394589b4e4dbbcf901642b~mv2.webp)}
.flexGrid > .div-38 { background-image: url(assets/design_client/7/504ea4_bcee49af3af34fe39df16963cf7c1aeb~mv2.webp)}
.flexGrid > .div-39 { background-image: url(assets/design_client/504ea4_5ee05dda8617496eaf4fd11bc0061975~mv2.webp)}

.hidden {
    display: none;
  }
  
  #password-protect {
    /* display: flex; */
    height: 30vh;
    width: 40vw;
    margin: 25vh auto;
    background-color: var(--dark);
    color: white;
    border: white 1px solid;
    border-radius: 10px;
  }
  
  #password-input {
    padding: 10px;
    position: absolute;
    left: 15%;
    font-size: 1rem;
    cursor: text;
    width: 50%;
    height: 5vh;
    border-radius: 25px;
    font-family: 'Karrik', sans-serif;
    border: 1px solid black;
  }

  #password-form {
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }
  
  #password-form button {
    font-size: 1.2rem;
    position: absolute;
    cursor: pointer;
    /* height: 4vh; */
    font-family: 'Karrik', sans-serif;
    font-style: italic;
    right: 15%;
    width: 20%;
    padding: 1rem;
    /* border-radius: 2px; */
}

#password-form button:hover {
    color: black;
        filter: 
    drop-shadow(1px 1px 1px var(--light)) 
    drop-shadow(1px 1px 0px var(--light)) 
    drop-shadow(-1px -1px 0px var(--light)) 
    drop-shadow(1px -1px 0px var(--light)) 
    drop-shadow(-1px 1px 0px var(--light))
    drop-shadow(1px 0px 0px var(--light))
    drop-shadow(-1px 0px 0px var(--light))
    drop-shadow(0px 1px 0px var(--light))
    drop-shadow(0px -1px 0px var(--light))
    drop-shadow(2px 2px 1px var(--light));
}

#error-message {
    margin: auto;
    padding: 1rem;
    text-align: center;
    color: red;
    font-size: 1rem;
  }

.carousel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(var(--dark), rgba(45, 66, 0, 0.5));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(7px);
}

.carousel-overlay.hidden {
    display: none; /* Hide the overlay by default */
}

.carousel-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.carousel-image-container {
    position: relative;
    width: 80%;
    max-width: 1200px;
    height: 80%;
    max-height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-item {
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease-in-out;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* box-shadow: 0 0 25px 5px rgba(255,255,255,0.6); */
}

.carousel-item.active {
    opacity: 1;
    z-index: 1;
}

.carousel-item-tag {
    position: fixed;
    bottom: 3vh;
    margin: auto;
    padding: 1rem;
    color: white;
    font-size: 1.5rem;
    font-style: italic;
    z-index: 100;
    letter-spacing: .05rem;
text-shadow: 1px 1px 0px black, 
-1px -1px 0px black, 
1px -1px 0px black, 
-1px 1px 0px black,
1px 0px 0px black,
-1px 0px 0px black,
0px 1px 0px black,
0px -1px 0px black,
2px 2px 1px black;
}

button {
    position: absolute;
    background: transparent;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    z-index: 101;
    width: 100px;
    height: 100px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: 
    drop-shadow(1px 1px 1px black) 
    drop-shadow(1px 1px 0px black) 
    drop-shadow(-1px -1px 0px black) 
    drop-shadow(1px -1px 0px black) 
    drop-shadow(-1px 1px 0px black)
    drop-shadow(1px 0px 0px black)
    drop-shadow(-1px 0px 0px black)
    drop-shadow(0px 1px 0px black)
    drop-shadow(0px -1px 0px black)
    drop-shadow(2px 2px 1px black);
}

.close-btn {
    top: 10px;
    right: 10px;
    background-image: url(assets/gifs/WebsiteGif_Cross.gif);
}

.prev-btn {
    left: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    background-image: url(assets/gifs/WebsiteGif_Arrow.gif);
}

.next-btn {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(assets/gifs/WebsiteGif_Arrow.gif);
}



/* Single Breakpoint: Below 850px, stack items in one column */
@media (max-width: 849px) {
    .gridTwo, .gridOne, .shortFilmsGrid, .gridThree, .flexGrid {
        height: 800vw;
        grid-template-columns: 1fr !important; /* Single column */
        grid-auto-rows: minmax(30vh, auto);
        grid-template-areas: none;
    }

    .sub-menu{
        position: relative;
top: 2vh;
width: 100%;
text-align: center;
background-color: rgba(40, 50, 0, 0.8);
padding: 0px;
list-style: none;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid white;
    }
    .navMobileList .sub-menu li {
        padding: 0.5rem; /* Reset the padding */
    }

    #password-protect {
        width: 90vw;
    }

    .flexGrid {
        grid-auto-rows: minmax(35vh, auto);
        margin-bottom: 20vh;
        height: 2500vw;
    }

    .flexGridItem img {
        background-size: cover;
    }

    .gridThree {
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    }

    .gridOne {
        height: 1500vw;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    }

    .gridTwo {
        height: 2500vw;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    }

    .shortFilmsGrid {
        height: 400vh;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        margin: 10vh auto 20vh auto;
        padding: 1rem;
    }
    
    .shortFilmsGrid > .div2, .shortFilmsGrid > .div4, .shortFilmsGrid > .div6, .shortFilmsGrid > .div8, .shortFilmsGrid > .div10 {
        height: 25vh;
        /* border-top: 1px solid var(--light); */
    }

    /* Override all custom spans */
    .gridTwo > *, .gridOne > *, .shortFilmsGrid > *, .gridThree > *, .flexGrid > * {
        grid-column-start: none !important;
        grid-row-start: none !important;
        grid-column: span 1 / span 1 !important; /* Full width (one column) */
        grid-row: auto !important; /* Reset custom row spans */
        /* height: 20vh; */
    }

    .flexGrid > * {
        height: 30vh;
    }

    footer {
        height: 100px;
        padding: 0;
    }

    .footerSpan {
        display: flex;
        margin: 0 auto;
        padding: 0 3vh;
    }

    .signature {
        min-width: 300px;
    }

    .socials {
        width: 35px;
        margin-bottom: 75px;
        align-items: center;
    }

    .space-between {
        min-width: unset;
        width: 100vw;
}

    .carousel-item-tag {
        font-size: 1rem;
        letter-spacing: .05rem;
text-shadow: 1px 1px 0px black, 
-1px -1px 0px black, 
1px -1px 0px black, 
-1px 1px 0px black,
1px 0px 0px black,
-1px 0px 0px black,
0px 1px 0px black,
0px -1px 0px black,
2px 2px 1px black;
    }

    .bio {
        display: block;
    }

    .next-btn, .prev-btn {
        top: unset;
        bottom: -1%
    }

    .bio-img {
        width: 100%;
        height: 25vh;
        margin: auto;
    }

    .navBGlight {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }

    .clients{
        margin: 1rem 0;
        padding-top: 2.5rem;
        height: 18vh;
        padding-left: 4vw;
padding-right: 4vw;
    }
    .bio-text p {
        font-size: 0.8rem;
    }

    .clients::before {
        font-size: 0.6rem;
        padding: 0.6rem 0;
    }

    nav {
        overflow: hidden;
    }

    nav a{
        font-size: 1.5rem;
        padding: 1rem;
    }

    .list{display: none;}

    .navMobileList {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        height: 100vh;
        width: 100vw;
        position: fixed;
        padding: 20vh 0 25vh 0;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100vw;
        transition: all 0.5s ease-in-out;
    }

    .navMobileList li {
        padding: 2rem;
        display: block;
        width: 100%;
        text-align: center;
    }

    .navVideo {
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    }
    .ham-menu {
        display: block;
    }
}