/** FORMATTING THE CHILDREN PAGES **/
/*webpage settings*/
*, *::before, *::after{box-sizing: border-box; margin: 0; padding: 0; border:0; }
body{box-sizing: border-box; margin: 0; padding: 0; font-size: 1vw; font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","????", STXihei, "????", sans-serif; text-decoration: none; background-image: conic-gradient(at 0%, lightgrey, lightblue);}

/* container settings */
/* container general settings */
.container{display: grid; grid-template-columns: repeat(4, 1fr);grid-auto-rows: minmax(3vw, auto); grid-gap: 0.1vw; max-width: 100%; position: relative; width: 100%; height: auto; overflow: hidden; background-position: left top;}
.container{background: repeating-linear-gradient(45deg, rgba(48, 244, 244, 0.52) 5%, rgba(248, 47, 247, 0.048) 10%), repeating-linear-gradient(-45deg, rgba(233, 172, 72, 0.52) 5%, rgba(213, 233, 41, 0.49) 10%);  background-size: 80vw 80vw;}

/* grid settings */
header{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;}

 
/* 1 - formatting the header */

header{display: grid; grid-template-columns: 14vw 60vw 12vw; position: relative; height: 14vh;} 
header{--s: 3vw; --c: #04f7f3; --_s: calc(2*var(--s)) calc(2*var(--s)); --_g: 35.36% 35.36% at; --_c: #0000 66%,#20022a 68% 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); }

/* 1.1 - formatting language */
.language {position: fixed; width: 14vw; height: auto; display: flex; flex-flow: column nowrap; z-index: 1111;}
.language input{font-size: 1.25vw; color: darkblue; background-color: lightcyan; border: 0.1vw solid black; line-height: 1; padding-left: 3vw; margin-inline: 1vw; margin-block:0.25vw;cursor: pointer; border-radius: 2vw;}
.language input[class="chinese"]:not(h1){font-size: 1.1vw;line-height: 1.5; letter-spacing: 0.01vw; font-family: 松本，微软雅黑, Helvetica, sans-serif; }


/* 1.2 - formatting the taal section */
.taal h1{display: flex; margin-left: 20vw; width: 60vw; color: blue; font-size: 3.5vw; text-align: center;  animation: infinite linear 30s styling; z-index: 99}
@keyframes styling{
    0%{color: white; text-shadow: 0vw 0vw grey; tranform:translate(0vw, 0vw);}
    25%{color: grey; text-shadow: 2vw 3vw black; tranform:translate(0vw, 0vw);}
    50%{color: black;text-shadow: 0vw 0vw white;tranform:translate(2vw, 2vw);}
    75%{color: grey; text-shadow: -2vw 3vw black; tranform:translate(0vw, 0vw);}
    100%{color: white;text-shadow: 0vw 0vw grey;tranform:translate(0vw, 0vw);} 
} 

/* 1.3 - formatting the return section */
#return{position: fixed; width:12vw; height: 3vw; margin: 3% ; font-size: 0.9vw; background:skyblue; opacity:1; color:white; box-shadow:inset 0 0 0 1px black; border:0.3vw solid white; text-transform:uppercase; display: inline-block; margin-left:85vw; text-align: center; z-index: 10}
#return p, #return span{display: flex; margin-block: 0.5vw}
#return span{margin-inline: 1vw;}
#return:hover{background-color:grey; color: red; box-shadow:inset 0 0 0 1px white; border:0.4vw solid black;}

/* 2 - formatting the section */
section{display: grid; grid-template-columns: 40vw 40vw ;position: relative; height: 4vh; margin-block: 1vw; margin-inline: 10vw;}
section #enlarge{color: darkblue; font-size: 1.2vw; font-weight: 500;}
section .number{color: darkblue; font-size: 1.2vw; font-weight: 500;}
section .number span{margin-left: 1vw; color: red;}

/* 3 - formatting the container section */

/* 3.1 - formatting the lw-container */
.lw-box{display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(4vw, auto); gap: 1vw; margin-left: 0.5vw;  } 
.gallery-item{display: flex; flex-flow: column nowrap; width: 24vw; height: 20vw; justify-content: center;}
.gallery-item .city, .gallery-item .distr{position: relative; display:flex; width: 22vw; height: 1.5vw; justify-content: center; color: orange; background-color: grey; border-radius: 2vw;}
.gallery-item .content{display: flex; flex-flow: row wrap; width: 22vw; height: 20vw; object-fit: cover; cursor: pointer;  background: var(--img-bg-color); 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: 1vw; height: 1.2vw; width: 22vw; background-color: skyblue; border-radius: 2vw; 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: 0vw; left: 1vw; 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.5;}
#lw-screen .lw-image img {max-width: 100%; margin: 0 auto; transition: all 5s ease;}
#lw-screen .lw-image img:hover {transform: scale(2); cursor: grab;}
.lw-btn {width: 3vw; height: 3vw; background: black; color: aqua; text-align: center; line-height: 3vw;  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: 2vw; box-sizing: border-box;  position: fixed; bottom: 10px;}
.lw-btn:hover { background: red; color:black}
.lw-close {bottom: 1vw; right: 1vw;}