@import "nipponcolors.min.css";
@font-face {
  font-family: "Advocate Ancient Serif";
  font-weight: 700;
  src: url("AdvocateAncientSerif-Heavy.subset.woff2") format("woff2");
}
@font-face {
  font-family: "ChiuKong Gothic MN";
  src: url("WuSupplement.woff2") format("woff2");
  unicode-range: U+21372;
  font-weight: normal;
}
@font-face {
  font-family: "LXGW WenKai TC";
  src: url("LXGWWenKaiTC-Bold.subset.woff2") format("woff2");
  font-weight: bold;
}
@font-face {
  font-family: "ChiuKong Gothic MN";
  font-weight: 300;
  src: url("ChiuKongGothic-M-Light.subset.woff2") format("woff2");
}
@font-face {
  font-family: "ChiuKong Gothic MN";
  font-weight: normal;
  src: url("ChiuKongGothic-M-Regular.subset.woff2") format("woff2");
}

:root {
  --ming: "Advocate Ancient Serif", serif;
}

body {
  font-family: "Helvetica", "Open Sans", "Arial", "ChiuKong Gothic MN",
    noto sans cjk kr, source han sans kr, noto sans cjk tc, source han sans tc,
    noto sans cjk sc, source han sans cn, pingfang tc, hiragino sans gb,
    microsoft jhenghei, wenquanyi micro hei, st heiti, SimHei, sans-serif;
}

#headline {
  height: 600px;
  background-image: url(background-pc.jpg);
  background-position: center;
  background-size: cover;
}

#githubstatus,
#headline h1,
#headline h2 {
  color: var(--nc-shironeri);
  text-shadow: 1px 1px 4px black;
}

@media screen and (max-width: 540px) {
  #headline {
    background-image: url(background-mo.jpg);
  }
  #githubstatus,
  #headline h1,
  #headline h2 {
    color: var(--nc-sumi);
    text-shadow: 1px 1px 4px white;
  }
}

u.dotted {
  text-decoration: underline dotted;
}

#githubstatus > a {
  color: inherit;
}

#headline h1 {
  font-family: var(--ming);
}
#inputDemo-text-float {
  display: inline-block;
}
@media screen and (max-width: 540px) {
  #inputDemo-text-float {
    display: none;
  }
}

.code-container {
  background-color: #1e1e2e;
  color: #cdd6f4;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.code-container pre,
.code-container code {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  margin-bottom: 0;
  word-break: normal;
}

.clipboard-container {
  padding: 16px;
}

kbd {
  --kbd-color-background: #e9e9e9;
  --kbd-color-border: #8e8e8e;
  --kbd-color-text: #202020;
  background-color: var(--kbd-color-background);
  color: var(--kbd-color-text);
  border-radius: 0.25rem;
  border: 1px solid var(--kbd-color-border);
  box-shadow: 0 2px 0 1px var(--kbd-color-border);
  cursor: default;
  font-size: 0.75em;
  line-height: 1;
  min-width: 0.75rem;
  display: inline-block;
  text-align: center;
  padding: 2px 5px;
  position: relative;
  top: -3px;
}
kbd:hover {
  box-shadow: 0 1px 0 0.5px var(--kbd-color-border);
  top: -1px;
}

.downloadBtn {
  height: 1.8rem;
  vertical-align: -0.5rem;
}

div.scr {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

div.scr > div {
  width: 100%;
}

#introduction1 {
  background-color: var(--nc-hanada);
  color: var(--nc-shironeri);

  background-image: url("nguphing-bg.svg");
  background-position: center;
  background-size: contain;
  background-repeat: repeat;
}

#vocabulary {
  background-color: var(--nc-rurikon);
  color: var(--nc-shironeri);

  background-image: url("vocab-bg.svg");
  background-position: center;
  background-size: cover;
  background-repeat: repeat;

  text-shadow: 0px 0px 4px var(--nc-rurikon);
}

footer {
  background-color: var(--nc-kon);
  color: var(--bs-body-color);
}

.scn {
  font-family: "LXGW WenKai TC", noto sans cjk kr, source han sans kr,
    noto sans cjk tc, source han sans tc, noto sans cjk sc, source han sans cn,
    pingfang tc, hiragino sans gb, microsoft jhenghei, wenquanyi micro hei,
    st heiti, SimHei, sans-serif;
  font-weight: bold;
}