/* GLOBAL PAGE SETTINGS */
* {margin: 0; padding: 0; box-sizing: border-box;}
/* *{border: 0.01dvw solid blue;} */

html{scroll-behavior: smooth;}
body {font-family: system-ui, apple-system, sans-serif; color:#333; height: 100%; }

/* container general settings */
#container{position: relative; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); grid-auto-rows: minmax(3dvh, auto); grid-auto-flow: column; width: 100%; height: 100%; }
#container{container-type: inline-size; container-name: parent;}

/* grid settings*/
#heading{grid-column: 1/5; grid-row:1/2;}
#info{grid-column: 1/5; grid-row:2/3;}
section{grid-column:1/5; grid-row:3/4;}
.lw-box{grid-column:1/5; grid-row: 4/5;}
footer{grid-column: 1/5;grid-row: 5/6;}

/*** HEADING settings ***/
#heading{display: grid; grid-template-columns: 1fr, 5fr; width: 100%; height: clamp(5rem, 12dvh, 8rem);}
#heading{--s: 1dvw; --c: lightgrey; --_s: calc(2*var(--s)) calc(2*var(--s)); --_g: 35.36% 35.36% at; --_c: #0000 66%,black 40% 70%, #0000 72%; background: radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s),  radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s), radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s), repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s), radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c); }

/* navigation section formatting*/
#menu button{position: fixed; width: clamp(2%, 5%, 7%); height: 5%; background:skyblue; opacity:1; color:white; box-shadow:inset 0 0 0 1px black; border:0.2dvw solid white; display: flex; justify-content: center; align-items: center; border-radius: 1dvw; top: 5%; z-index: 1;}
#menu button a{font-size: clamp(1rem, 2dvh, 2rem)}
#menu button:hover{background:grey; color:aliceblue; box-shadow:inset 0 0 0 1px white; border:0.2dvw solid black; cursor: pointer;}

/* formatting header */
header{ width: 100%; text-align: center; }
header h1{position: relative; display: inline; color: blue; font-size: clamp(2rem, 5dvw, 4rem); animation: infinite linear 10s styling; }
@keyframes styling{
    0%{ color: lightgreen; }
    25%{ color:blue; }
    50%{ color: red;}
    75%{ color: navy; }
    100%{ color: lightgreen;}
}
/* formatting INFO section */
#info{display: grid; grid-template-rows: repeat(auto-fit, minmax(35px,1fr)); position: relative; width: 100%; height: 20%;}
#info p{font-size: clamp(1rem, 1dvw, 2rem);}
#info p span{color: red;}

/* formatting the FILTER section */
section{display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; padding: 1dvw; width: 100% }
.filter{display: none;}
/* The "show" class is added to the filtered elements */
.show {display: block; }
button:not(#menu button){font-size: clamp(0.5rem, 1dvw, 1.25rem); padding: 0.3% ; color: black;  background: repeating-linear-gradient(45deg,lightgrey, skyblue, lightgreen); border: 0.1dvw solid black; cursor: pointer;border-radius:25%; margin-inline: 0.2dvw; width: 7dvw; }
button:not(#menu button):hover { background:repeating-linear-gradient(25deg,lightgrey, black, indigo); color:red;}
button:not(#menu button).active{background: orange; color: blue;}
button.active{background:orange; color: blue;}
button p{color: red; font-weight: 600; z-index: 10; font-size: clamp(0.5rem, 1.5dvw, 1rem);}

/* formatting the LW-BOX main section*/
.lw-box {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); grid-auto-rows: minmax(4dvh, auto); gap: 10px; ; width: 100%;position: relative; counter-reset: image-number; overflow-x:hidden;}
.lw-box .gallery-item {position: relative; width: clamp(15rem, 18dvw, 18rem); height: auto; gap: 10px; font-weight: normal; border-radius: 0.5dvw;counter-increment: image-number;}
.lw-box .gallery-item::before{ content: counter(image-number); position: relative; top: 0%; right: -1%; width: max-content;  background: aqua; font-weight: normal; border-radius: 0.5dvw; z-index: 1; font-size: clamp(0.5rem, 1dvw, 1rem);}
.lw-box .gallery-item img {cursor: pointer;max-width: clamp(15rem, 18dvw, 18rem); aspect-ratio: 1/1; gap: 10px; border-radius: 1dvw;}
.lw-box .gallery-item img:hover {opacity: 0.98; scale: 1.1;  transition: 3s ease;}
.gallery-item  p{position: absolute; text-align: center; font-size:clamp(0.5rem, 1dvw, 1.2rem); height: fit-content; max-width: clamp(15rem, 18dvw, 18rem); width: 100%; background-color: blue; color:aquamarine; border-radius: 1dvw; z-index: 1110; top: 0; }
.gallery-item .caption{display: none;}
.gallery-item:hover .caption{display: inline;  top: 0;position: absolute; top: 0; left: 0;}

/* settings for the pop-up */
#lw-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;  top: 1dvw; left: 1dvw; overflow: hidden; background: var(--backdrop-color); z-index: 9999; }
.lw-overlay{position: fixed; inset: 0;}
#lw-screen .lw-image {height: 100%; display: inline-flex; justify-content: center; align-items: center; scale: 1.1;}
#lw-screen .lw-image img {max-width: 100%; aspect-ratio: 1 / 1; margin-block: 0dvw; margin-inline: 0dvw; transition: 5s ease;border-radius: 1dvw; position: relative;}
#lw-screen.dragging{cursor: grabbing;}
.lw-btn {width: clamp(1rem, 2dvw, 6rem); height: clamp(1rem, 4dvh, 6rem); background: lightgreen; color: red; text-align: center; line-height: 1;  cursor: pointer; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease;  -webkit-transition: all 0.4s ease;  transition: all 0.4s ease; font-size: clamp(1rem, 4dvh, 6rem); box-sizing: border-box;  position: absolute; bottom: 2dvw;}
.lw-btn:hover { background-color: darkblue; }
.lw-close {position: absolute; bottom: 15%; right: 40%;}

/* format the WATERMARKING */
/* .gallery-item { position: relative;  display: float;}
.gallery-item::after{ content: '© L. Witters';  position: absolute;  top: 11%; left: 16%; transform: translate(-50%, -50%); font-size: var(--fs-1); color: aqua; opacity: 0.8; pointer-events: none; }
.lw-image::after{ content: '© L. Witters';  position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--fs-1); color: white; opacity: 0.8; pointer-events:none;} */


/** SETTINGS FOR OTHER DEVICES AND OTHER SIZES**/

/*max-width: 107rem = 1,712px */
/* @media only screen and (96rem <= width <= 107rem){
    #menu button{ max-width: 12%; width: 100%; height: 5%; }
    #heading{height: 15dvh; max-width: 100%; font-size: clamp(1rem, calc(var(--fs-2)*2), 4rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.25), 4rem); margin-top: 2%; }
    #enlarge{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem);}
    .lw-box{position: relative; grid-template-columns: repeat(5, 1fr); gap: 0.2dvw; max-width: 100dvw;}
    .lw-box .gallery-item{position: relative; max-width: 95%;}
    .lw-box .gallery-item img{aspect-ratio: 1 / 1;}
    .gallery-item p{max-width: 95%; font-size:clamp(1rem, calc(var(--fs-1)*1), 2rem)}
    .lw-close {position: absolute; bottom: 15%; right: 25%;}
} */

/*max-width: 96rem = 1,528px */
/* @media only screen and (85rem <= width <= 96rem){
    #heading{height: 15dvh;}
    #menu button{width: 12%; height: 5%; font-size: clamp(1rem, calc(var(--fs-2)*3), 4rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.5), 4rem); margin-top: 2%; }
    #info p{font-size: clamp(1rem, calc(var(--fs-1)*1.25), 2rem);}
    button:not(#menu button){font-size: clamp(1rem, calc(var(--fs-1)*1), 2rem);}
    .lw-box{position: relative; grid-template-columns: repeat(5, 1fr); gap: 0.1dvw; max-width: 100dvw; height: 100%; overflow: hidden;}
    .lw-box .gallery-item{position: relative; max-width: 95%;}
    .lw-box .gallery-item img{width: 20dvw; aspect-ratio: 1 / 1;}
    .gallery-item p{max-width: 95%; font-size:clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem)}
    #lw-screen .lw-image img {width: 80%; aspect-ratio: 1 / 1;}
    .lw-btn {width: 2.5dvw; height: 6dvh; font-size: clamp(1rem, calc(var(--fs-2)*2), 3rem); }
    .lw-close {position: absolute; bottom: 15%; right: 25%;}

} */

/* max-width: 85rem = 1,360px */
/* @media screen and (75rem <= width <= 85rem) {
    #heading{height: 15dvh;}
    #menu button{max-width: 10%; height: 5%; font-size: clamp(1rem, calc(var(--fs-2)*3), 4rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.5), 4rem); margin-top: 2%; }
    #info p{font-size: clamp(1rem, calc(var(--fs-1)*1.25), 2rem);}
    .lw-box{position: relative; grid-template-columns: repeat(5, 1fr); gap: 0.2dvw; max-width: 100dvw;}
    .lw-box .gallery-item{position: relative; max-width: 95%;}
    .lw-box .gallery-item img{aspect-ratio: 1 / 1;}
    .gallery-item p{max-width: 95%; font-size:clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem)}
    #lw-screen .lw-image img {width: 80%; aspect-ratio: 1 / 1;}
    .lw-btn {width: 2.5dvw; height: 6dvh; font-size: clamp(1rem, calc(var(--fs-2)*2), 3rem); }
    .lw-close {position: absolute; bottom: 15%; right: 25%;}
} */


/* max-width: 75rem = 1,200px */
/* @media screen and (65rem <= width <= 75rem) {
    body{height: 100%;}
    #heading{height: 15dvh;}
    #menu button{max-width: 15dvw; width: 100%; height: 8dvh; font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.5), 4rem); margin-top: 2%; }
    #info p{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem);}
    button:not(#menu button){font-size: clamp(1rem, calc(var(--fs-1)*0.6), 1.5rem);}
    .lw-box{position: relative; grid-template-columns: repeat(4, 1fr); gap: 0.2dvw; max-width: 100dvw;  min-height: 100%;}
    .lw-box .gallery-item{position: relative; max-width: 95%;}
    .lw-box .gallery-item img{aspect-ratio: 1 / 1;}
    .gallery-item p{max-width: 95%; font-size:clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem)}
    #lw-screen .lw-image img {width: 80%; aspect-ratio: 1 / 1;}
    .lw-btn {width: 2.5dvw; height: 6dvh; font-size: clamp(1rem, calc(var(--fs-2)*2), 3rem); }
    .lw-close {position: absolute; bottom: 15%; right: 25%;}
} */

 /* max-width : 65rem  = 1,040px */
 /* @media screen and (55rem <= width <= 65rem) {
    #heading{height: 18dvh;}
    #menu button{max-width: 15dvw; width: 100%; height: 10dvh; font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.5), 4rem); margin-top: 2%; }
    #info p{font-size: clamp(1rem, calc(var(--fs-1)*1), 1.5rem);}
    button:not(#menu button){font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem);}
    .lw-box{position: relative; grid-template-columns: repeat(4, 1fr); gap: 0.2dvw; max-width: 100dvw;}
    .lw-box .gallery-item{position: relative; max-width: 95%;}
    .lw-box .gallery-item img{aspect-ratio: 1 / 1;}
    .lw-box .gallery-item::before{font-size:clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem)}
    .gallery-item p{max-width: 95%; font-size:clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem)}
    #lw-screen .lw-image img {width: 80%; aspect-ratio: 1 / 1;}
    .lw-btn {width: 2.5dvw; height: 6dvh; font-size: clamp(1rem, calc(var(--fs-2)*2), 3rem); }
    .lw-close {position: absolute; bottom: 15%; right: 25%;}
 } */

/* max-width: 55rem =  880px */
 /* @media screen and (45rem <= width <= 55rem){
    body{height: 100%;}
    #heading{height: 20dvh;}
    #menu button{max-width: 10dvw; Width:100%; height: 8dvh; font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem); margin-top: 4%; }
    #info p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem);}
    button:not(#menu button){font-size: clamp(0.3rem, calc(var(--fs-1)*0.4), 1rem); }
    .lw-box{position: relative; grid-template-columns: repeat(4, 1fr); gap: 0.2dvw; max-width: 100dvw; min-height: 100%;}
    .lw-box .gallery-item{position: relative; max-width: 95%;}
    .lw-box .gallery-item img{aspect-ratio: 1 / 1;}
    .lw-box .gallery-item::before{font-size:clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem)}
    .gallery-item p{max-width: 95%; font-size:clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem)}
    #lw-screen .lw-image img {width: 80%; aspect-ratio: 1 / 1;}
    .lw-btn {width: 2.5dvw; height: 6dvh; font-size: clamp(1rem, calc(var(--fs-2)*2), 3rem); }
    .lw-close {position: absolute; bottom: 15%; right: 25%;}
 } */

/* max-width: 45rem =  720px */
 /* @media screen and (35rem <= width <= 45rem){
    #heading{height: 15dvh;}
    #menu button{max-width: 12dvw; width: 100%; height: 10dvh; font-size: clamp(1rem, calc(var(--fs-2)*3), 4rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.5), 4rem); margin-top: 2%; }
    #enlarge{font-size: clamp(1rem, calc(var(--fs-1)*1.25), 2rem);}
    button:not(#menu button){font-size: clamp(0.3rem, calc(var(--fs-1)*0.4), 1rem); }
    .lw-box{position: relative; grid-template-columns: repeat(4, 1fr); gap: 0.2dvw; max-width: 100dvw;}
    .lw-box .gallery-item{position: relative; max-width: 95%;}
    .lw-box .gallery-item img{aspect-ratio: 1 / 1;}
    .gallery-item p{max-width: 95%; font-size:clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem)}
    #lw-screen .lw-image img {width: 80%; aspect-ratio: 1 / 1;}
    .lw-btn {width: 2.5dvw; height: 6dvh; font-size: clamp(1rem, calc(var(--fs-2)*2), 3rem); }
    .lw-close {position: absolute; bottom: 15%; right: 25%;}
 } */

/* max-width: 35rem =  560px */
 /* @media screen and (25rem <= width <= 35rem){
    #heading{height: 10dvh;}
    #menu button{max-width: 15dvw; width: 100%; height: 10dvh; font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem);margin-top: -1dvh;}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); }
    #info p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem);}
    button:not(#menu button){font-size: clamp(0.3rem, calc(var(--fs-1)*0.4), 1rem); }
    .lw-box{position: relative; grid-template-columns: repeat(2, 1fr); gap: 0.2dvw; max-width: 100dvw;}
    .lw-box .gallery-item{position: relative; max-width: 95%;}
    .lw-box .gallery-item img{aspect-ratio: 1 / 1;}
    .gallery-item p{max-width: 95%; font-size:clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem)}
    .lw-box .gallery-item::before{font-size: clamp(0.3rem, calc(var(--fs-1)*0.7), 1rem);}
    #lw-screen .lw-image img {width: 80%; aspect-ratio: 1 / 1;}
    .lw-btn {width: 3dvw; height: 4dvh; font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); }
    .lw-close {position: absolute; bottom: 30%; right: 15%;}
 } */

/* max-width: 25rem =  400px */
 /* @media screen and (20rem <= width <= 25rem){
    #heading{height: 10dvh; width: 100dvw; grid-template-columns: 2fr 3fr;}
    #menu button {max-width: 20dvw; width: 100%; height: 10dvh; font-size: clamp(0.5rem, calc(var(--fs-1)*0.7), 1rem); margin-top: -1dvh;}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); }
    #info p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem);}
    button:not(#menu button){font-size: clamp(0.3rem, calc(var(--fs-1)*0.4), 1rem); }
    .lw-box{position: relative; grid-template-columns: repeat(2, 1fr); gap: 0.2dvw; max-width: 100dvw;}
    .lw-box .gallery-item{position: relative; max-width: 95%;}
    .lw-box .gallery-item img{aspect-ratio: 1 / 1;}
    .gallery-item p{max-width: 95%; font-size:clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem)}
    .lw-box .gallery-item::before{font-size: clamp(0.3rem, calc(var(--fs-1)*0.7), 1rem);}
    #lw-screen .lw-image img {width: 80%; aspect-ratio: 1 / 1;}
    .lw-btn {width: 3dvw; height: 4dvh; font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); }
    .lw-close {position: absolute; bottom: 30%; right: 15%;}
 } */