html { font-size:calc(16px + 4*(100vw - 320px)/1280); line-height:1.4; color:black; background:url("pics/carbon.jpg"); background-size:cover;r; }
body { 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.woff") 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; margin:0px; }

a:link, a:visited, a:active { text-decoration:none; color:#660000; font-size:16px; font-weight:bold; 
  display:block; border:0.2px solid white; border-radius:6px; line-height:1.2; }
a:focus, a:hover { color:whitesmoke; background:#660000; }
a img { border:1.5px solid #756142; border-radius:12px; }
.home img { opacity:0.5; border:1px solid #756142; border-radius:50px; padding:0px; margin:0px; }
.infopic { position:relative; width:100%; height:auto; margin:0px; }
.infopic figcaption { position:absolute; bottom:5px; width:100%; padding-top:10px; text-align:center; 
  color:white; text-shadow:0 2px 3px rgba(0, 0, 0, 0.3);
  background:linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent); }
.frame { padding:10%; }
.kitslink { display:inline; color:#756142; font-size:12px; }
.hide { display:none; }

h1, h2, h3, h4, h5 { text-align:center; padding:0; }
h1, h2, h3 { font-family:MeriB, KaiTi, STKaiti, FangSong, 仿宋, STFangSong, 华文仿宋; }
h1 { font-size:2.0rem; color:#756142; margin:0 auto 1rem; }
h2 { font-size:1.7rem; color:#756142; margin:0 auto 0.8rem; }
h3 { font-size:1.3rem; color:black; margin:0 auto 0.6rem; }
h4 { font-size:1.0rem; color:black; margin:0 auto 0.5rem; }
h5 { font-size:0.8rem; color:black; margin:0 auto 0.4rem; }
h6 { display:inline; color:black; }

.home { position:fixed; top:0; left:0; }
.div1 { max-width:50ch; margin:0 auto; }
.lang { margin:0; padding:0; } 
.capt { background:#660000; font-size:0.8rem; line-height:1.2; font-weight:bold; color:white;
  width:100%; margin:0 0 1% 0; padding:0; border:2px solid #660000; border-radius:6px;}
.centre { text-align:center; }
.just { text-align:justify; }
.left { text-align:left; }
.right { text-align:right; }
.blue { color:#0000FF; }  .gold { color:#756142; } .deepred { color:#C40233; } .carmine { color:#960018; } .blood { color:#660000; } .apricot { color:#ffcc99; }

/*cards css*/
.wrap { width:100%; margin:0 auto; }
.card { display:inline-block; width:100%; height:auto; margin:0 0.5% 4% 0.5%; padding:2% 1%; border:1.5px solid #756142; border-radius:10px; background:#fff; }
.cols2 { columns:2 310px; column-gap:1%; }
.cols3 { column-gap:1%; }

.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; }
.grid4a { columns:4; width:100%; column-gap:0; margin:0; }

@media only screen and (min-width:620px) {
    .card { width:90%; margin:0 4% 4% 4%; padding:3%; }
    .cols3 { columns:3; column-gap:1%; }
    .grid { columns:4; } 
    .lang { margin:-3% 0 0 0; } 
    .home {width:5%; height:auto; } }
/*style*/