/****  COMMON CSS SETTINGS FOR ALL DEVICES ***/

/* GLOBAL PAGE SETTINGS */
* {margin: 0; padding: 0; box-sizing: border-box;}
:root {
    --button-1: 10em; --button-2: 15em;--button-3: 20em;--button-4: 25em;
    --fs-1: 1rem; --fs-2: 2rem; --fs-3: 3rem; --fs-4: 4rem;
    --height-1: 2dvh; --height-2: 4dvh; -height-3: 6dvh; --height-4: 8dvh;
    --margin-1: 1dvw; --margin-2: 2dvw; --margin-3: 6dvw; --margin-4: 8dvw;
    --padding-1: 2dvw; --padding-2: 4dvw; --padding-3: 6dvw; --padding-4: 8dvw;
    --width-1: 2dvw; --width-2: 4dvw; --width-3: 6dvw; --width-4: 8dvw;--width-5: 10dvw;--width-6: 12dvw;
    --s: .5dvw; --c:darkgrey 70% 35%; --d: blue;
    --main-color: red; --secondary-color: lightgreen;  --txt-color: aliceblue;
    --img-bg-color: rgba(240, 240, 240, 0.9);
}
html{scroll-behavior: smooth;}
body {font-family: system-ui, apple-system, sans-serif; color:#333; margin: 0; padding: 0; box-sizing: border-box; overscroll-behavior-y: contain; }

/* container general settings */
#container{position: relative; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); grid-auto-rows: minmax(3dvh, auto); grid-auto-flow: column; max-width: 200rem; width: 100%; height: auto; margin-inline: auto ; overflow: auto; will-change: scroll-position; outline: 1dvw solid lightgreen; }
#container{container-type: inline-size; container-name: parent;}

/* grid settings*/
#heading{grid-column: 1/5; grid-row:1/2;}
.instuctions{grid-column: 1/5; grid-row:2/3;}
.lw-container{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: 14% 85%; max-width: 200rem; width: 100%; height: 15dvh;}
#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; max-width: 7%; width: 100%; 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; margin-block: 5dvh; z-index: 10;}
#menu button a{font-size: clamp(1rem, calc(var(--fs-1)*2), 2.3rem);}
#menu button:hover{background:grey; color:aliceblue; box-shadow:inset 0 0 0 1px white; border:0.2dvw solid black; cursor: pointer; font-size: calc(var(--fs-1)*1.6);}
/* formatting header */
header{padding-left: 1dvw; max-width: 200rem;  width: 100%;}
header h1{position: absolute; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin-inline: 20%;  margin-block: 2%; color: blue; font-size: clamp(1rem, calc(var(--fs-4)*2), 5rem); text-align: center;  animation: infinite linear 90s styling; z-index: 99}
@keyframes styling{
    0%{ translate: 0dvw 0dvw  1dvw; color: black; }
    25%{ translate: -4dvw -1dvw 2dvw; color:blue; }
    50%{ translate: 0dvw 0dvw 3dvw; color: red;}
    75%{ translate: 4dvw 1dvw 2dvw; color: navy; }
    100%{ translate: 0dvw 0dvw 1dvw; color: black;}
}

/* formatting INSTRUCTION section */
.instructions p{color: black; margin-block: 0.5dvw; font-size: clamp(1rem, calc(var(--fs-2)*1), 3rem); margin-left:5%; height: 2%; max-width: 200rem; width: 100%; }

/* formatting the LW-CONTAINER main section*/
.lw-container{position: relative; width: 100%; max-height: 300dvh; height: auto;}
.continent{position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: minmax(8dvh, auto); column-gap: 1dvw; row-gap: 2dvh;}
.region{display: block; max-width: 30dvw; width: 100%; max-height: auto; height: auto; border: 0.1dvw solid burlywood; border-radius: 1dvw; box-shadow: -0.4dvw 0.3dvw 0.1dvw 0.4dvw skyblue; margin-block: auto; margin-inline: auto;}
.region p{font-size: clamp(1rem, calc(var(--fs-2)*1.5), 3rem); padding-inline: 20%; padding-block: 10%}
.nation{display: block; max-width: 22dvw; width: 100%; max-height: auto; height: auto;}
.nation p{display: flex; color: darkblue; z-index:10; font-size: clamp(1rem, calc(var(--fs-1)*2), 2rem); font-weight: 500;cursor: none; width: 100% ; border: 0.1dvw solid skyblue; justify-content: center;border-radius: 2dvw; background-color: beige;}
.ref img {object-fit: cover; object-position: top; cursor: pointer; max-width: 45dvw; width: 100%; height: 30dvh; border-radius: 1dvw; z-index: 10;}
.ref > img{transition: all 2s ease;}
.ref > img:hover{display: block; cursor: pointer; transform: scale(1.2) translateY(0.7dvw); box-shadow: 0.5dvw 0.5dvw 2dvw 0.2dvw violet; border-radius: 4dvw;}

/* 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: 10%; height: 5%;}
   #heading{height: 15dvh;}
   .lw-container{position: relative; width: 100%; max-height: 450dvh; height: 100%;}
   .continent{grid-template-columns: repeat(5, 1fr); }
   .instructions{width: 50rem; max-width: 200rem;}
   .instructions p{font-size: clamp(1rem, calc(var(--fs-2)*0.8), 2rem); height: 2%; max-width: 200rem; width: 100%; }
   .nation p{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem)}
}

/*max-width: 96rem = 1,528px */
@media only screen and (85rem <= width <= 96rem){
   #menu button{max-width: 15%; height: 5%;}
   #heading{height: 15dvh; }
   header h1{font-size: clamp(1rem, calc(var(--fs-2)*2), 5rem);}
   .lw-container{position: relative; width: 100%; max-height: 450dvh; height: 100%;}
   .continent{grid-template-columns: repeat(4, 1fr); }
   .instructions{width: 50rem; max-width: 200rem;}
   .instructions p{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); height: 2%; max-width: 200rem; width: 100%; }
   .nation p{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem)}
}

/* max-width: 85rem = 1,360px */
@media screen and (75rem <= width <= 85rem) {
   #menu button{max-width: 15%; height: 5%;}
   #heading{height: 15dvh; }
   header h1{font-size: clamp(1rem, calc(var(--fs-2)*2), 5rem);}
   .lw-container{position: relative; width: 100%; max-height: 450dvh; height: 100%;}
   .continent{grid-template-columns: repeat(4, 1fr); }
   .instructions{width: 50rem; max-width: 200rem;}
   .instructions p{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); height: 2%; max-width: 200rem; width: 100%; }
   .nation p{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem)}
}

/* max-width: 75rem = 1,200px */
@media screen and (65rem <= width <= 75rem) {
   #menu button{max-width: 15%; height: 5%;}
   #heading{height: 15dvh; }
   header h1{font-size: clamp(1rem, calc(var(--fs-2)*2), 5rem);}
   .lw-container{position: relative; width: 100%; max-height: 450dvh; height: 100%;}
   .continent{grid-template-columns: repeat(4, 1fr); }
   .instructions{width: 50rem; max-width: 200rem;}
   .instructions p{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); height: 2%; max-width: 200rem; width: 100%; }
   .nation p{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem)}
}

 /* max-width : 65rem  = 1,040px */
 @media screen and (55rem <= width <= 65rem) {
   #menu button{max-width: 15%; height: 8%;}
   #heading{height: 15dvh; }
   header h1{font-size: clamp(1rem, calc(var(--fs-2)*1), 3rem);}
   .lw-container{position: relative; width: 100%; max-height: 450dvh; height: 100%;}
   .continent{grid-template-columns: repeat(4, 1fr); }
   .instructions{width: 50rem; max-width: 200rem;}
   .instructions p{font-size: clamp(1rem, calc(var(--fs-1)*1), 1.5rem); height: 2%; }
   .region p{font-size: clamp(0.5rem, calc(var(--fs-1)*2), 2.5rem)}
   .nation p{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem)}
}

/* max-width: 55rem =  880px */
 @media screen and (45rem <= width <= 55rem){
   #menu button{max-width: 15%; height: 10%;}
   #menu button a{font-size: clamp(1rem, calc(var(--fs-1)*1), 1.3rem);}
   #heading{height: 25dvh; }
   header h1{font-size: clamp(1rem, calc(var(--fs-2)*1), 4rem);}
   .lw-container{position: relative; width: 100%; max-height: 450dvh; height: 100%;}
   .continent{grid-template-columns: repeat(4, 1fr); }
   .instructions{width: 50rem; max-width: 200rem;}
   .instructions p{font-size: clamp(1rem, calc(var(--fs-1)*1), 2rem); height: 2%; max-width: 200rem; width: 100%; }
   .region p{font-size: clamp(0.5rem, calc(var(--fs-1)*2), 2.5rem)}
   .nation p{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem)}
 }

/* max-width: 45rem =  720px */
 @media screen and (35rem <= width <= 45rem){
   #menu button{max-width: 15%; height: 5%;}
   #heading{height: 15dvh; }
   header h1{font-size: clamp(1rem, calc(var(--fs-2)*2), 5rem);}
   .lw-container{position: relative; width: 100%; max-height: 450dvh; height: 100%;}
   .continent{grid-template-columns: repeat(4, 1fr); }
   .instructions{width: 50rem; max-width: 200rem;}
   .instructions p{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); height: 2%; max-width: 200rem; width: 100%; }
   .nation p{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem)}
 }

/* max-width: 35rem =  560px */
 @media screen and (25rem <= width <= 35rem){
  #menu button{max-width: 15%; height: 5%;}
   #heading{height: 15dvh; }
   header h1{font-size: clamp(1rem, calc(var(--fs-2)*2), 5rem);}
   .lw-container{position: relative; width: 100%; max-height: 450dvh; height: 100%;}
   .continent{grid-template-columns: repeat(4, 1fr); }
   .instructions{width: 50rem; max-width: 200rem;}
   .instructions p{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); height: 2%; max-width: 200rem; width: 100%; }
   .nation p{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem)}
 }

/* max-width: 25rem =  400px */
 @media screen and (20rem <= width <= 25rem){
   #menu button{max-width: 15%; height: 5%;}
   #heading{height: 15dvh; }
   header h1{font-size: clamp(1rem, calc(var(--fs-2)*2), 5rem);}
   .lw-container{position: relative; width: 100%; max-height: 450dvh; height: 100%;}
   .continent{grid-template-columns: repeat(4, 1fr); }
   .instructions{width: 50rem; max-width: 200rem;}
   .instructions p{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); height: 2%; max-width: 200rem; width: 100%; }
   .nation p{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 1.5rem)}
 }