html { font-size:18px; line-height:1.4; color:black; background:#1d1810; }
body { font-size:clamp(1rem, 1.5vw, 1.8rem); font-family:ManropeVar, KaiTi, STKaiti, FangSong, 仿宋, STFangSong, 华文仿宋, sans-serif; height:100%; margin:0; font-weight:400; }
@font-face { font-family:"MeriB"; src:url("font/MeriB.woff2") format("woff2"), url("font/MeriB.ttf") format("truetype"); } /*Merienda-Bold*/
@font-face { font-family:"ManropeVar"; src:url("font/ManropeVar.ttf") format("truetype-variations"); font-weight: 1 999; } /*manrope variable*/

*, *:before, *:after { box-sizing:border-box; }
html, body, img { margin:0; padding:0; }
span { width:auto; display:inline-block; }
img { width:100%; height:auto; display:block; background:whitesmoke; }

a:link, a:visited, a:active { text-decoration:none; color:red; font-size:clamp(0.8rem, 1.5vw, 1.6rem); font-weight:bold; 
  display:inline-block; margin:1.5px; border:1.5px solid whitesmoke; border-radius:10px; text-align:center; }
a:focus, a:hover { color:red; background:white; }
a:focus img, a:hover img { border:6px solid black; border-radius:10px; }
.infopic a { display:block; }
.flag a { display:block; border:6px solid black; background:black; }

.hide { display:none; border:5px #400; }
a:focus+.hide, a:hover+.hide, a:active+.hide { display:block; }

.arrow { border:solid red; border-width:0 3px 3px 0; display:inline-block; padding:3px;}
.down { transform:rotate(45deg); }
.up { transform:rotate(225deg); }
.rt { transform:rotate(315deg); }

.infopic { position:relative; width:100%; aspect-ratio:1/1; margin:0px; }
.infopic figcaption { position:absolute; bottom:0px; width:calc(100% - 6px); padding-top:10px; text-align:center; margin:0 auto 0;
  color:white; font-weight:bold; font-size:clamp(0.8rem, 1.5vw, 1.8rem); text-shadow:0px 0px 8px rgba(0, 0, 0, 0.7);
  background:linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  border:1px solid linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent); border-radius:0 0 9px 9px; }

.flagpic { vertical-align:top; display:inline-block; width:15%; }
.flagtxt { vertical-align:top; display:inline-block; width:83%; transform:translateX(-15px); }
.flagpic img{ display:block; background:black; }

.centre { text-align:center; }
.just { text-align:justify; }
.left { text-align:left; }
.right { text-align:right; }
.date { text-align:right; font-size:0.6rem}

.blue { color:#0000FF; } .gold { color:#756142; } .silver { color:#C0C0C0; } .kellygreen { color:#046A38; }
.emeraldgreen { color:#046307; } .darkgreen { color:#203020; } .darkgreentone { color:#002e1c; } .deepred { color:#C40233; } .carmine { color:#960018; }
.blood { color:#660000; } .burgundy { color:#4d0000; } .ghostwhite { color:#f8f8ff; } .white { color:white; } .chocolate { color:#1d1810; }

h1, h2, h3, h4, h5 { text-align:center; padding:0; }
h1 { font-family:MeriB, KaiTi, STKaiti, FangSong, 仿宋, STFangSong, 华文仿宋; }
h1 { font-size:clamp(2.2rem, 5vw, 7rem); color:#756142; margin:0 auto 1rem; }
h2 { font-size:clamp(1.5rem, 4vw, 3.4rem); margin:0 auto 0.8rem; }
h3 { font-size:clamp(1.1rem, 2.3vw, 2.4rem); margin:0 auto 0.6rem; }
h4 { font-size:clamp(1rem, 1.5vw, 1.8rem); margin:0 auto 0.5rem; }
h5 { font-size:clamp(0.8rem, 1.2vw, 1.6rem); margin:0 auto 0.4rem; }
h6 { font-size:clamp(0.6rem, 1.1vw, 1.0rem); display:inline; }

/*cards*/
.wrap { width:100%; margin:0 auto; text-align:center; }
.card { display:inline-block; 
   width:clamp(80vw, calc(99% - 19 * (100vw - 320px) / (800 - 680)), 99vw); 
   height:auto; margin:0 auto 0.5%; padding:3% auto;
   border:0.1px solid #756142; border-radius:10px; background:#fff; }
.card2 { display:inline-block; width:100%; height:auto; margin:0 auto 0.5%; padding:3% 1%;
   border:0.1px solid #756142; border-radius:10px; background:#fff; } /*transition:width 0.5s ease-in-out;*/
.flag { color:white; background:black; }
.ghost { color:#1d1810; background:ghostwhite; }
.mtop { margin:8vw auto 0.5%; }
.sq { aspect-ratio:1/1 }

.cols2 { columns:2 310px; column-gap:2px; }
.cols3 { column-gap:2px; }

.grid  { columns:2; width:100%; font-size:0.8rem; column-gap:2px; margin:0; }
.grid2 { columns:2; width:100%; font-size:0.8rem; column-gap:2px; margin:0; }
.grid3 { columns:3; width:100%; font-size:0.8rem; column-gap:0; margin:0; }
.grid4 { columns:4; width:100%; font-size:0.8rem; column-gap:2px; margin:0; }
.grid5 { columns:5; width:100%; font-size:0.8rem; column-gap:2px; margin:0; }
.grid6 { columns:6; width:100%; font-size:0.8rem; column-gap:2px; margin:0; }

@media only screen and (min-width:620px) {
  .ch40 { padding:3% calc((92vw - 40ch)/2); }
  .ch60 { padding:3% calc((92vw - 60ch)/2); }
  .ch70 { padding:3% clamp(1%, calc((92vw - 70ch)/2), 10%); text-align:justify; }
  .ch76 { padding:3% calc((92vw - 76ch)/2); }
  .pad1 { padding:1%; }
  .grid { columns:4; }
  .cols3 { columns:3; }   }
/*<style>*/