/** FORMATTING THE PARENT PAGE **/
/*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 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 layout*/
.heading{grid-column:1/5;grid-row:1/2; }
.info{grid-column: 1/5; grid-row: 2/3}
.shanghai{grid-column: 1/5; grid-row:3/4}
footer{grid-column:1/5; grid-row:4/5;}

/* 1.1 - formatting the heading section*/
.heading{display: grid; grid-template-columns: 20vw 50vw 20vw; width: 100%; height: 20vh; gap: 5vw; position: relative; z-index: 1;} 
.heading{--s: 4vw; --c: blue; --_s: calc(2*var(--s)) calc(2*var(--s)); --_g: 35.36% 35.36% at; --_c: #0000 6%,burlywood 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.2 - 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.3 - formatting the header */

header{display: inline-block; margin-inline: 30vw; width: 100%; color: blue; font-size: 3vw; 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.4  - navigation section formatting*/
.menu button{position: fixed; width:12vw; height: 3vw; margin: 5% ; 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: 55vw; text-align: center; }
button p, button span{display: flex; justify-content: center; align-items: center; }
button span{margin-inline: 1vw;}
.menu button:hover{background:grey; color:aliceblue; box-shadow:inset 0 0 0 1px white; border:0.4vw solid black;}

/* 2 - formatting the info section */
.info{margin-top: 0vw; color: darkblue; font-size: 1.25vw; font-weight: bold;margin-block: 1vw; margin-inline: 1vw;}

/* format the watermarking */
.gallery-item { position: relative;  display: inline-block;}
.gallery-item::after{ content: '© L. Witters';  position: absolute;  top: 14%; left: 14%; transform: translate(-50%, -50%); font-size: 1vw; color: white; opacity: 0.8; pointer-events: none; /* Ensures the watermark doesn't interfere with clicks */}
.lw-image::after{ content: '© L. Witters';  position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1vw; color: white; opacity: 0.8; pointer-events: none; /* Ensures the watermark doesn't interfere with clicks */}

/* 3 - formatting the China section*/
.china{display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; height: 100%; margin-left: 1vw; row-gap: 1vw;}  
.region{display: flex; flex-flow: column wrap; width: 24vw; height: 20vw; border: 0.25vw double saddlebrown; align-content: center; justify-content: center;}
.region p{color: red; font-size: 1.25vw; font-weight:bold; }
img:not(.logo img){width: 15vw; height: 15vw; transition: all 2s ease-out;}
img:hover{transform: scale(1.1) translateY(1vw);}

/* 4 - formatting the footer layout*/
footer{display:grid; grid-template-columns: 1fr 2fr;}
.block{ display: flex; flex-direction: column; color: white; font-weight: 500; padding: 0.5vw 1vw; font-size: 1vw; line-height: 2; background-image:repeating-linear-gradient(45deg, lightgreen 2vw, transparent 2vw, steelblue 3vw, transparent 3vw, white 2vw),repeating-linear-gradient(-45deg, transparent 2vw, lightgreen 2vw, transparent 2vw, steelblue 3vw, transparent 2vw, white 2vw); border-top-right-radius: 5%;border-bottom-right-radius: 5%;}
.id3 span, .id3 a{font-size:1vw;}
.logo{background-image:repeating-linear-gradient(45deg, green 2vw, transparent 2vw, steelblue 3vw, transparent 1vw, white 4vw),repeating-linear-gradient(-45deg, transparent, lightgreen 2vw, transparent 0.5vw, steelblue 3vw, transparent 0.5vw, white 4vw)} 
footer >div >img{border-radius: 50%;padding-top: 1vw; animation: slide 30s linear infinite alternate;}
.number{color: white; font-weight: 500;}
#number1, #number2, #number3{color:red; font-size:1.15vw; margin-top: -0.2vw; margin-left: 1vw;font-weight: 800;}
@keyframes slide{
    0%{ box-shadow: 0vw 0vw burlywood; transform: translate(60vw,0);} 
    25%{ box-shadow: -.4vw -.3vw lightgreen;transform: translate(30vw,0vw);}
    50%{ box-shadow: 0vw 0vw skyblue; transform: translate(0vw,0);} 
    75%{ box-shadow: .4vw -.3vw red; transform: translate(30vw,0);}
    100%{ box-shadow: 0vw 0vw yellow; transform: translate(60vw,0);} 
}

@media only screen and (min-device-width: 100px) and (max-device-width: 768px){
  .heading{width: 100%; height: 12vh;} 
}