@font-face {
  font-display: swap;
  font-family: "Inter";
  font-stretch: 75% 100%;
  font-style: oblique 0deg 20deg;
  font-weight: 1 999;
  src:
    url("/css/fonts/Inter-UI.var.woff2") format("woff2 supports variations"),
    url("/css/fonts/Inter-UI.var.woff2") format("woff2-variations");
  unicode-ransge: U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
	font-family:"Wildwick";
	src: url("/css/fonts/WildwickDemo-d9j8K.otf");
  unicode-range: U+0021-007D;
}
@font-face {
	font-family:"RusticStory";
	src: url("/css/fonts/RusticStory-R9vKM.ttf");
  unicode-range: U+0021-007D;
}
@font-face {
	font-family:"Zymbols Font";
	src: url("/css/fonts/Zymbols-X3xrP.ttf");
  unicode-range: U+0023,U+002A,U+002F,U+003C-003E,U+005B-005F;
}
@font-face {
	font-family:"Auseklis Font";
	src: url("/css/fonts/Auseklis-6YXpv.ttf");
  unicode-range: U+0028-002F;
}
@font-face {
	font-family:"Yorksign Font";
	src: url("/css/fonts/Yorksign-0vv2R.otf");
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}
@media (prefers-color-scheme: light) {
  :root {
    --text-color: black;
    --box-color: white;
    --main-bg-background: white;
    --main-bg-color: #fefefe;
    --shadow-color1: rgba(0, 0, 0, 0.3);
    --shadow-color2: rgba(0, 0, 0, 0.06);
    --shadow-color3: rgba(0, 0, 0, 0.5);
    --nav-backgroud: rgb(255, 255, 255, 0.9);
    --footer-background: rgb(0, 0, 0, 0.03);
    --nav-hover: #d6b7b7b0;
    --img-height: 120px;
    --margin-left_mt: 1em;
    --margin-left_nav: 3em;
    --margin-left_md: 10em;    
    --backgroud-image: url(/img/wanka.png);
    --bottom-right-logo: url(/img/unclefeifei_light.png);
    --image-wave:url(/img/wave.png);
    --top-gradient: linear-gradient(rgba(1, 1, 1, 0.2), rgba(255, 255, 255, 0));
    --bottom-gradient: linear-gradient(rgba(255, 255, 255, 0), rgba(1, 1, 1, 0.2));
    --frame-gradient: linear-gradient(225deg, #784e4e, #00000057);
    --frame-color: #fdfdf9 #f7f7f7 #eeeeee #f9f9f9;
    --frame-color-fix: #f3f3e5 #efefe8 #f0f0d3 #f8f8ea;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: white;
    --box-color: black;
    --main-bg-background: black;
    --main-bg-color: #151515;
    --shadow-color1: rgba(255, 255, 255, 0.3);
    --shadow-color2: rgba(255, 255, 255, 0.06);
    --shadow-color3: rgba(255, 255, 255, 0.5);
    --nav-backgroud: rgba(255, 255, 255, 0.66);
    --footer-background: rgb(255, 255, 255, 0.05);
    --nav-hover: #d6b7b7b0;
    --img-height: 120px;
    --margin-left_mt: 1em;
    --margin-left_nav: 3em;
    --margin-left_md: 10em;
    --backgroud-image: url(/img/wanka_dark.png);
    --bottom-right-logo: url(/img/unclefeifei_dark.png);
    --image-wave:url(/img/wave_dark.png);
    --top-gradient: rgb(0, 0, 0, 1);
    --bottom-gradient: linear-gradient(rgba(1, 1, 1, 0),rgba(255, 255, 255, 0.2));
    --frame-gradient: linear-gradient(225deg, #1f2f29, #00000057);
    --frame-color: #2b2b2b #272727 #1f1f1f #232323;
    --frame-color-fix: #2b2b20 #272720 #1f1f10 #232320;
  }
}
@media (prefers-color-scheme: no-preference) {
}

:root {
  --img-height: 120px;
  --img-height-fix: 82px;
  --body-width: 680px;
  --margin-left_mt: 1em;
  --margin-left_nav: 3em;
  --margin-left_md: 5em;
  --nav-height: 48px;
  --nav-hover: #d6b7b7b0;
}

@media screen and (min-width: 768px) {
  :root {
    --img-height: 120px;
    --img-height-fix: 82px;
    --body-width: 680px;
    --margin-left_mt: 1em;
    --margin-left_md: 2em;
    --margin-left_nav: 2em;
  }
}
@media screen and (min-width: 960px){
  :root {
    --img-height: 128px;
    --img-height-fix: 88px;
    --body-width: 800px;
    --margin-left_mt: 1.2em;
    --margin-left_md: 2.2em;
    --margin-left_nav: 2.3em;
  }
}
@media screen and (min-width: 1024px){
  :root {
    --img-height: 150px;
    --img-height-fix: 102px;
    --body-width: 960px;
    --margin-left_mt: 1.68em;
    --margin-left_md: 2.2em;
    --margin-left_nav: 3em;
  }
}
@media screen and (min-width: 1280px){
  :root {
    --img-height: 200px;
    --img-height-fix: 136px;
    --body-width: 1000px;
    --margin-left_mt: 2.2em;
    --margin-left_md: 3.2em;
    --margin-left_nav: 3em;
  }
}
@media screen and (min-width: 1440px){
  :root {
    --img-height: 240px;
    --img-height-fix: 164px;
    --body-width: 1200px;
    --margin-left_mt: 2.2em;
    --margin-left_md: 3.2em;
    --margin-left_nav: 3em;
  }
}
@media screen and (min-width: 1920px){
  :root {
    --img-height: 240px;
    --img-height-fix: 164px;
    --body-width: 1600px;
    --margin-left_mt: 2.2em;
    --margin-left_md: 3.2em;
    --margin-left_nav: 3em;
  }
}

body {
  margin: 0 auto;
  /*background: var(--top-gradient);*/
  background: var(--main-bg-color);
}

.nav{
  position: fixed;
  z-index: 999;
  top: 0px;
  min-width: 100%;
  min-height: var(--nav-height);
  background: var(--nav-backgroud);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}

.mininav{
  max-width: var(--body-width);
  margin: 0 auto;
  line-height: 3.0;
  padding-left: var(--margin-left_nav);
  padding-right: var(--margin-left_nav);
}

.mainbody {
  max-width: var(--body-width);
  margin: var(--nav-height) auto;
  -webkit-text-size-adjust: 100%;
  line-height: 0em;
  /* background: var(--main-bg-background); */
  font-family:  "RusticStory", system-ui, -apple-system, Roboto, SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: right;
  padding: 0.5em 0 0 0;
}
li a {
  display: inline-block;
  color: #1f2f29;
  text-align: center;
  padding: 0px 10px 0px 0px;
  text-decoration: none;
}
li a:hover {
  background-color: var(--nav-hover);
}
div {
  font-family:  "RusticStory", system-ui, -apple-system, Roboto, SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
  line-height: 0;
}

.maincontainer {
  margin: 0 12px;
  background: var(--backgroud-image) no-repeat;
  background-size: 72px;
}
#content-wrap {
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  min-height: 4rem;
  background: var(--bottom-right-logo) no-repeat bottom;
  background-size: 96px;
}
.footer {
  text-align: center;
  max-width: 100%;
  margin: 0 0px;
  bottom: 0;
  left: 50%;
  height: 10rem;            /* Footer height */
  padding-top: 1em;
  padding-bottom: 2em;
  background: var(--footer-background);
}
.icon {
    background-color: var(--main-bg-background);
    margin: 0 -1px;
}
#main_title{
  font-family: "Zymbols Font", "RusticStory", system-ui, -apple-system, Roboto, SF Pro SC, SF Pro Display, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
}
#nav_links{
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 0.68em;
}

.menuicon {
  vertical-align: -0.5em;
  height: 2em;
  display: inline-block;
}
.emoji {
  vertical-align: -20%;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.075em;
  margin-left: 0.075em;
  display: inline-block;
}

.mt { color: var(--text-color);
  text-shadow: #AAA 1px 1px 1px;
  line-height: 1.0;
  font-size: 2rem;
  font-weight: 300;
  padding-top: 0.68em;
  padding-bottom: 0.3em;
  padding-left: var(--margin-left_mt);
  padding-right: var(--margin-left_mt);
  text-align-last: left;
}
.md { color: var(--text-color);
  text-shadow: #AAA 1px 1px 1px;
  line-height: 1.0;
  font-size: 1rem;
  font-weight: 200;
  padding-left: var(--margin-left_md);
  padding-right: var(--margin-left_md);
  padding-bottom: 1.2em;
  text-align: left;
  background: var(--image-wave) no-repeat bottom;  
}
.ct { color: var(--text-color);
  line-height: 1.5;
  font-size: 1rem;
  font-weight: 300;
}

div#memo_desc { color: var(--text-color);
  line-height: 1.0;
  font-size: 11px;
  font-weight: 200;
}
div#memo_label {
  color: var(--text-color);
  line-height: normal;
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  padding-top: 10px;
}

.links{
  position: relative;
}

.imgbox_init{
  height: var(--img-height);
  vertical-align: top;
  margin: 5px;
  box-shadow: 0px 0px 5px 0px var(--shadow-color1), 0px 2px 10px 0px var(--shadow-color2), 0px 0px 1px 0px var(--shadow-color3);
  transition: all 0.3s ease;
  border-style: solid;
  border-color: var(--frame-color);
}

.imgbox_t{
  height: var(--img-height);
  vertical-align: top;
  margin: 5px;
  /*padding: 12px;*/
  /*border-width: 12px;*/
  box-shadow: 0px 0px 5px 0px var(--shadow-color1), 0px 2px 10px 0px var(--shadow-color2), 0px 0px 1px 0px var(--shadow-color3);
  transition: all 0.3s ease;
  border-style: solid;
  border-color: var(--frame-color);
}
.imgbox_t:hover{
  transform: scale(1.05);
  position: relative;
  z-index: 2;
}
.imgbox_t_fix{
  height: var(--img-height-fix);
  vertical-align: top;
  margin: 15px;
  /*padding: 12px;*/
  /*border-width: 12px;*/
  box-shadow: 0px 0px 5px 0px var(--shadow-color1), 0px 2px 10px 0px var(--shadow-color2), 0px 0px 1px 0px var(--shadow-color3);
  transition: all 0.3s ease;
  border-style: solid;
  border-color: var(--frame-color-fix);
}
.imgbox_t_fix:hover{
  transform: scale(1.03);
  position: relative;
  z-index: 2;
}

.imgbox_t img{
  position: relative;
}
.imgbox_t img::after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(/img/loading.gif) no-repeat center;
}


.imgbox_t1{
  width: 250px;
  object-fit: cover;
  flex: 1;
  border: 1px solid var(--box-color);
  vertical-align: top;
  padding: 4px;
}
.imgbox_t1 img{
    position: relative;
}
.imgbox_t1 img::after {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(/img/loading.gif) no-repeat center;
}

.imgbox_q{
  width:152px;
  height: 152px;
  object-fit: cover;
  flex: 1;
  border: 1px solid var(--box-color);
}