/* 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);
    --bg-color: repeating-linear-gradient(45deg, rgba(231, 222, 222, 0.52) 5%, rgba(17, 238, 146, 0.048) 10%), repeating-linear-gradient(-45deg, rgba(104, 112, 117, 0.753) 5%, rgba(221, 199, 215, 0.068) 10%); 
}

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(auto-fill, 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; }
section{grid-column: 1/5; grid-row: 2/3; }
main{grid-column: 1/5; grid-row: 3/4;}

/*** HEADING settings ***/
#heading{display: grid; grid-template-columns: 14% 85%; max-width: 200rem; width: 100%; max-height: 18dvh; height: 100%; }
#heading{--s: 0.5dvw; --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); }
/* formatting language */
#language {position: fixed; max-width: 14%; width: 100%; height: 17dvh; display: flex; flex-flow: column nowrap; z-index: 1111;}
#language input{width: 40%; font-size: var(--fs-1); color: white; background-color: black; border: 0.1dvw solid black; line-height: 1;  padding-left: calc(var(--padding-1)*0.6); margin-block:0.3dvw;cursor: pointer; border-radius: 2dvw; }
#language input[class="chinese"]:not(h1){font-size: var(--fs-1);line-height: 1.5; letter-spacing: 0.01dvw; font-family: 松本，微软雅黑, Helvetica, sans-serif; }
/* navigation section formatting*/
#menu button{position: fixed; max-width: 6%; width: 100%; height: 2dvw; background:skyblue; opacity:1; color:white; box-shadow:inset 0 0 0 1px black; border:0.3dvw solid white; display: flex; justify-content: center; align-items: center; border-radius: 1dvw;}
#menu button{font-size: var(--fs-2); }
#menu button:hover{background:grey; color:aliceblue; box-shadow:inset 0 0 0 1px white; border:0.4dvw solid black; cursor: pointer;}  
/* formatting header */
header{width: 55dvw;  height: 18dvh; } 
header h1{position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 50%; margin-inline: 30%;  margin-block: 2%; color: blue; font-size: var(--fs-4); text-align: center;  animation: infinite linear 30s 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;} 
}  

/* 2 - formatting the section */
section{display: grid; grid-template-columns: 50% 50% ;position: relative; height: 4dvh; max-width: 200rem; width: 100%;  }
section #enlarge{font-size: calc(var(--fs-2)*0.8); color: black; font-weight: normal;}
section #number{font-size: calc(var(--fs-2)*0.8); color: black;  font-weight:normal; }
#number .number span{margin-left: 0.5dvw; color: red;}

/* 3 - formatting the container section */

/* 3.1 - formatting the lw-container */
.lw-container{max-width: 200rem; width: 100%; margin-top: -3dvh;}
.lw-box{display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(4dvw, auto); gap: .1dvw; margin-left: 1dvw;counter-reset: image-number; } 
.gallery-item:not(.city, .distr){display: flex; flex-flow: column nowrap; width: 10dvw; height: 30dvh; justify-content: space-between;counter-increment: image-number; }
.lw-box .gallery-item:not(.city, .distr)::before{ content: counter(image-number); position: relative;  top: 4dvh; right: 0dvw; width: max-content;  background: aqua;  padding: 0.2dvw 0.4dvw; font-weight: normal; border-radius: 0.5dvw; z-index: 11;}
.lw-box .city p, .lw-box .distr p{position: relative; display: flex; justify-content: center; align-items: center; width: 10dvw; height: 15dvh;color: rgb(207, 213, 29); font-size: var(--fs-2); background-color: grey; margin-top: 8dvh;;border-radius: 2dvw;}
.gallery-item img{display: flex; flex-flow: row wrap; width: 10dvw; height:90%; object-fit: fill; cursor: pointer; border-radius: 5%; z-index: 1;}
.lw-box p{display: flex; flex-flow: row nowrap; justify-content: center; align-items: stretch; color: darkblue; font-size: var(--fs-1); height: 2dvh; width: 10dvw; background-color: aquamarine; border-radius: 2dvw; z-index: 10; }
.gallery-item .content{-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; }    
.gallery-item .content:hover {opacity: 0.98; scale: 1.1;}

/* 3.2 - formatting the pop-up image */ 

#lw-screen { position: fixed; width: 100%; height: 100%;  top: 1dvw; left: 1dvw; overflow: hidden; background: var(--backdrop-color); z-index: 9999;  text-align: center; }
#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%; max-height:100%; margin-block: 0dvw; margin-inline: 0dvw; transition: 5s ease;border-radius: 1dvw;}
#lw-screen.dragging{cursor: grabbing;}
.lw-btn {width: 3dvw; height: 3dvw; background: var(--main-color); color: var(--txt-color); text-align: center; line-height: 3dvw;  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: 2dvw; box-sizing: border-box;  position: fixed; bottom: 2dvw;}
.lw-btn:hover { background: var(--secondary-color); }
.lw-close {bottom: 15dvw; right: 30dvw;}



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

/*max-width: 107rem = 1,712px */
@media only screen and (96rem <= width <= 107rem){
   #language{max-width: 20dvw;}
   #menu button{max-width: 9dvw; height: 4dvh;} 
   #language input{font-size: calc(var(--fs-1)*1);}
   #menu button{font-size: calc(var(--fs-1)*1.5);}
   header{height: 15dvh;}
   header h1{font-size: calc(var(--fs-3)*1.5); margin-top: 3%; margin-left: 15dvw; width: 60dvw;}
   section #enlarge div{font-size: calc(var(--fs-1)*1.1);margin-top: 1dvh; }
   section #number div{font-size: calc(var(--fs-1)*1.1);margin-top: 1dvh; }
   #number1, #number2, #number3{font-size: calc(var(--fs-1)*1.1);margin-top: 0dvh; }
   .lw-box{grid-template-columns: repeat(4, 1fr); gap: 0.2dvw;}
   .lw-box .gallery-item {width: 22dvw; height: 30dvh; margin-top: 2dvh; }
      .gallery-item p{font-size: calc(var(--fs-1)*0.9); width: 18dvw;}
   .gallery-item img{width: 20dvw; max-height: 31dvh;}
   .lw-box .gallery-item:not(.city, .distr)::before{top: 6dvh;} 
   .lw-box .distr p, .lw-box .city p{width: 16dvw; font-size: calc(var(--fs-1)*1.4); margin-inline: 1dvw;}
}    

/*max-width: 96rem = 1,528px */
@media only screen and (85rem <= width <= 96rem){
   #language{max-width: 20dvw;}
   #menu button{max-width: 9dvw; height: 6dvh;} 
   #language input{font-size: calc(var(--fs-1)*1);}
   #menu button{font-size: calc(var(--fs-1)*1.5);}
   header h1{font-size: calc(var(--fs-3)*1.5); margin-top: 3%; margin-left: 15dvw; width: 60dvw;}
   section #enlarge div{font-size: calc(var(--fs-1)*1.3);margin-top: 1dvh; }
   section #number div{font-size: calc(var(--fs-1)*1.3);margin-top: 1dvh; }
   #number1, #number2, #number3{font-size: calc(var(--fs-1)*1.3);margin-top: 0dvh; }
   .lw-box{grid-template-columns: repeat(5, 1fr); gap: 0.2dvw;}
   .lw-box .gallery-item {width: 18dvw; height: 35dvh; margin-top: 2dvh; }
   .gallery-item p{font-size: calc(var(--fs-1)*0.9); width: 18dvw;}
   .gallery-item img{width: 18dvw; max-height: 34dvh;}
   .lw-box .gallery-item:not(.city, .distr)::before{top: 6dvh;} 
   .lw-box .distr p{width: 16dvw; font-size: calc(var(--fs-1)*1.4); margin-inline: 1dvw;}
}
@container parent (85rem <= width <= 96rem){
   #heading{width: 95rem; height: 9rem; margin-inline: 0dvw;}
   section{width: 95rem; height: 3rem; margin-inline: 2dvw;}
   .lw-container{width: 93rem; height: auto; margin-inline: 2dvw;}
}

/* max-width: 85rem = 1,360px */
@media screen and (75rem <= width <= 85rem) {
   #language{max-width: 20dvw;}
   #menu button{max-width: 9dvw; height: 6dvh;} 
   #language input{font-size: calc(var(--fs-1)*1);}
   #menu button{font-size: calc(var(--fs-1)*1.5);}
   header h1{font-size: calc(var(--fs-3)*1.5); margin-top: 3%; margin-left: 15dvw;}
   section #enlarge div{font-size: calc(var(--fs-1)*1.3);margin-top: 1dvh; }
   section #number div{font-size: calc(var(--fs-1)*1.3);margin-top: 1dvh; }
   #number1, #number2, #number3{font-size: calc(var(--fs-1)*1.3);margin-top: 0dvh; }
   .lw-box{grid-template-columns: repeat(5, 1fr); gap: 0.2dvw;}
   .lw-box .gallery-item {width: 18dvw; height: 35dvh; margin-top: 2dvh; }
   .gallery-item p{font-size: calc(var(--fs-1)*0.9); width: 18dvw;}
   .gallery-item img{width: 18dvw; max-height: 34dvh;}
   .lw-box .gallery-item:not(.city, .distr)::before{top: 6dvh;} 
   .lw-box .distr p{width: 16dvw; font-size: calc(var(--fs-1)*1.4); margin-inline: 1dvw;}
} 

@container parent (75rem <= width <= 85rem){
   #heading{width: 85rem; height: 9rem; margin-inline: 0dvw;}
   section{width: 85rem; height: 3rem; margin-inline: 2dvw;}
   .lw-container{width: 83rem; height: auto; margin-inline: 2dvw;}
}

/* max-width: 75rem = 1,200px */
@media screen and (65rem <= width <= 75rem) {
   #language{max-width: 22dvw;}
   #menu button{max-width: 9dvw; height: 5dvh;} 
   #language input{font-size: calc(var(--fs-1)*0.9);}
   #menu button{font-size: calc(var(--fs-1)*1.3);}
   header h1{font-size: calc(var(--fs-3)*1.5); margin-top: 3%; margin-left: 15dvw;}
   section #enlarge div{font-size: calc(var(--fs-1)*1);margin-top: 1dvh; }
   section #number div{font-size: calc(var(--fs-1)*1);margin-top: 1dvh; }
   #number1, #number2, #number3{font-size: calc(var(--fs-1)*1);margin-top: 0dvh; }
   .lw-box{grid-template-columns: repeat(4, 1fr); gap: 0.2dvw;}
   .lw-box .gallery-item {width: 18dvw; height: 35dvh; margin-top: 2dvh; }
   .gallery-item p{font-size: calc(var(--fs-1)*0.8); width: 18dvw;}
   .gallery-item img{width: 18dvw; max-height: 34dvh;}
   .gallery-item::before{font-size: calc(var(--fs-1)*0.8);}
   .lw-box .gallery-item:not(.city, .distr)::before{top: 6dvh;} 
   .lw-box .distr p{width: 16dvw; font-size: calc(var(--fs-1)*1.3); margin-inline: 1dvw;}
}

@container parent (65rem <= width <= 75rem){
   #heading{width: 75rem; height: 8rem; margin-inline: 0dvw;}
   section{width: 75rem; height: 3rem; margin-inline: 2dvw;}
   .lw-container{width: 73rem; height: auto; margin-inline: 2dvw;}
}

 /* max-width : 65rem  = 1,040px */
 @media screen and (55rem <= width <= 65rem) {   
   #language{max-width: 22dvw;}
   #menu button{max-width: 9dvw; height: 5dvh;} 
   #language input{font-size: calc(var(--fs-1)*0.9);}
   #menu button{font-size: calc(var(--fs-1)*1.3);}
   header h1{font-size: calc(var(--fs-3)*1); margin-top: 3%; margin-left: 15dvw;}
   section #enlarge div{font-size: calc(var(--fs-1)*1);margin-top: 1dvh; }
   section #number div{font-size: calc(var(--fs-1)*1);margin-top: 1dvh; }
   #number1, #number2, #number3{font-size: calc(var(--fs-1)*1);margin-top: 0dvh; }
   .lw-box{grid-template-columns: repeat(4, 1fr); gap: 0.2dvw;}
   .lw-box .gallery-item {width: 18dvw; height: 35dvh; margin-top: 2dvh; }
   .gallery-item p{font-size: calc(var(--fs-1)*0.7); width: 18dvw;}
   .gallery-item img{width: 18dvw; max-height: 34dvh;}
   .gallery-item::before{font-size: calc(var(--fs-1)*0.7);}
   .lw-box .gallery-item:not(.city, .distr)::before{top: 6dvh;} 
   .lw-box .distr p{width: 16dvw; font-size: calc(var(--fs-1)*1.1); margin-inline: 1dvw;}
}

@container parent (55rem <= width <= 65rem){
   #heading{width: 65rem; height: 8rem; margin-inline: 0dvw;}
   section{width: 65rem; height: 3rem; margin-inline: 2dvw;}
   .lw-container{width: 63rem; height: auto; margin-inline: 2dvw;}
}
 

/* max-width: 55rem =  880px */
 @media screen and (45rem <= width <= 55rem){
   #language{max-width: 25dvw;}
   #menu button{max-width: 11dvw; height: 5dvh;} 
   #language input{font-size: calc(var(--fs-1)*0.8);}
   #menu button{font-size: calc(var(--fs-1)*1.2);}
   header h1{font-size: calc(var(--fs-3)*1); margin-top: 3%; margin-left: 15dvw;}
   section #enlarge div{font-size: calc(var(--fs-1)*0.8);margin-top: 1dvh; }
   section #number div{font-size: calc(var(--fs-1)*0.8);margin-top: 1dvh; }
   #number1, #number2, #number3{font-size: calc(var(--fs-1)*0.8);margin-top: 0dvh; }
   .lw-box{grid-template-columns: repeat(4, 1fr); gap: 0.2dvw;}
   .lw-box .gallery-item {width: 18dvw; height: 35dvh; margin-top: 2dvh; }
   .gallery-item p{font-size: calc(var(--fs-1)*0.6); width: 18dvw;}
   .gallery-item img{width: 18dvw; max-height: 34dvh;}
   .gallery-item::before{font-size: calc(var(--fs-1)*0.6);}
   .lw-box .gallery-item:not(.city, .distr)::before{top: 4dvh;} 
   .lw-box .distr p{width: 16dvw; font-size: calc(var(--fs-1)*1); margin-inline: 1dvw;}
 }

@container parent (45rem <= width <= 55rem){
   #heading{width: 55rem; height: 8rem; margin-inline: 0dvw;}
   section{width: 55rem; height: 3rem; margin-inline: 2dvw;}
   .lw-container{width: 53rem; height: auto; margin-inline: 2dvw;}
  
}

/* max-width: 45rem =  720px */
 @media screen and (35rem <= width <= 45rem){
      #language{max-width: 29dvw;}
      #menu button{max-width: 12dvw; height: 4dvh;} 
      #language input{font-size: calc(var(--fs-1)*0.8);}
      #menu button{font-size: calc(var(--fs-1)*1.1);}
      header h1{font-size: calc(var(--fs-3)*1); margin-top: 3%; margin-left: 15dvw;}
      section #enlarge div{font-size: calc(var(--fs-1)*0.8);margin-top: 1dvh; }
      section #number div{font-size: calc(var(--fs-1)*0.8);margin-top: 1dvh; }
      #number1, #number2, #number3{font-size: calc(var(--fs-1)*0.8);margin-top: 0dvh; }
      .lw-box{grid-template-columns: repeat(3, 1fr); gap: 0.2dvw;}
      .lw-box .gallery-item {width: 20dvw; height: 35dvh; margin-top: 2dvh; }
      .gallery-item p{font-size: calc(var(--fs-1)*0.6); width: 20dvw;}
      .gallery-item img{width: 20dvw; max-height: 34dvh;}
      .gallery-item::before{font-size: calc(var(--fs-1)*0.6);}
      .lw-box .gallery-item:not(.city, .distr)::before{top: 4dvh;} 
      .lw-box .distr p{width: 20dvw; font-size: calc(var(--fs-1)*1); margin-inline: 1dvw;}
 }

@container parent (35rem <= width <= 45rem){
      #heading{width: 45rem; height: 7rem; margin-inline: 0dvw;}
      section{width: 45rem; height: 3rem; margin-inline: 2dvw;}
      .lw-container{width: 43rem; height: auto; margin-inline: 2dvw;}
}

/* max-width: 35rem =  560px */
 @media screen and (25rem <= width <= 35rem){
      #language{max-width: 30dvw;}
      #menu button{max-width: 12dvw; height: 4dvh;} 
      #language input{font-size: calc(var(--fs-1)*0.7);}
      #menu button{font-size: calc(var(--fs-1)*0.9);}
      header h1{font-size: calc(var(--fs-3)*1); margin-top: 3%; margin-left: 15dvw;}
      section #enlarge div{font-size: calc(var(--fs-1)*0.8);margin-top: 1dvh; }
      section #number div{font-size: calc(var(--fs-1)*0.8);margin-top: 1dvh; }
      #number1, #number2, #number3{font-size: calc(var(--fs-1)*0.8);margin-top: 0dvh; }
      .lw-box{grid-template-columns: repeat(3, 1fr); gap: 0.2dvw;}
      .lw-box .gallery-item {width: 20dvw; height: 35dvh; margin-top: 2dvh; }
      .gallery-item p{font-size: calc(var(--fs-1)*0.5); width: 20dvw;}
      .gallery-item img{width: 20dvw; max-height: 34dvh;}
      .gallery-item::before{font-size: calc(var(--fs-1)*0.6);}
      .lw-box .gallery-item:not(.city, .distr)::before{top: 4dvh;} 
      .lw-box .distr p{width: 21dvw; font-size: calc(var(--fs-1)*0.8); margin-inline: 1dvw;}
 }

@container parent (25rem <= width <= 35rem){
    #heading{width: 35rem; height: 8rem; margin-inline: 0dvw;}
   section{width: 35rem; height: 3rem; margin-inline: 2dvw;}
   .lw-container{width: 33rem; height: auto; margin-inline: 2dvw;}
}

/* max-width: 25rem =  400px */
 @media screen and (20rem <= width <= 25rem){
      #language{max-width: 25dvw;}
   #menu button{max-width: 11dvw; height: 5dvh;} 
   #language input{font-size: calc(var(--fs-1)*0.8);}
   #menu button{font-size: calc(var(--fs-1)*1.2);}
   header h1{font-size: calc(var(--fs-3)*1); margin-top: 3%; margin-left: 15dvw;}
   section #enlarge div{font-size: calc(var(--fs-1)*0.8);margin-top: 1dvh; }
   section #number div{font-size: calc(var(--fs-1)*0.8);margin-top: 1dvh; }
   #number1, #number2, #number3{font-size: calc(var(--fs-1)*0.8);margin-top: 0dvh; }
   .lw-box{grid-template-columns: repeat(4, 1fr); gap: 0.2dvw;}
   .lw-box .gallery-item {width: 18dvw; height: 35dvh; margin-top: 2dvh; }
   .gallery-item p{font-size: calc(var(--fs-1)*0.6); width: 18dvw;}
   .gallery-item img{width: 18dvw; max-height: 34dvh;}
   .gallery-item::before{font-size: calc(var(--fs-1)*0.6);}
   .lw-box .gallery-item:not(.city, .distr)::before{top: 4dvh;} 
   .lw-box .distr p{width: 16dvw; font-size: calc(var(--fs-1)*1); margin-inline: 1dvw;}
 }

@container parent (20rem <= width <= 25rem){
    #heading{width: 25rem; height: 8rem; margin-inline: 0dvw;}
   section{width: 25rem; height: 3rem; margin-inline: 2dvw;}
   .lw-container{width: 25rem; height: auto; margin-inline: 2dvw;}
}