@charset "UTF-8";
/* @import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@400;500;700&display=swap"); */
@import url(https://fonts.bunny.net/css?family=noto-color-emoji:400|noto-sans-tc:400,500,700|noto-serif-tc:400,500,700);

/* COLRv1: family=Noto+Colr+Emoji+Glyf
   B&W:    family=Noto+Emoji           */

/* Adobe Blank 2 */
@font-face {
  font-family: AdobeBlank2;
  src: url(https://jedi.org/fonts/adobe-blank-2/AdobeBlank2.otf.woff) format('woff'); 
}

/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/* [disabled]
 * Remove default fieldset styles.

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
 */

/* [disabled]
 * Allow only vertical resizing of textareas.

textarea {
  resize: vertical;
}
 */

/* ==========================================================================
   Tomorrow Themes from https://github.com/chriskempson/tomorrow-theme
   Bluloco Light Theme from https://github.com/uloco/theme-bluloco-light
   Solarized Themes from https://ethanschoonover.com/solarized/
   Using CSS variables:
     1. default (Tomorrow Night)
     2. more contrast (Tomorrow Night Bright)
     3. light (Bluloco Light)
     4. less contrast (Solarized Light)
   ========================================================================== */

:root {
  --background: hsl(210,6%,12%);
  --currentline: hsl(236,10%,33%);
  --selection: hsl(216,8%,24%);
  --selectionmark: hsla(140,2%,77%,80%);
  --foreground: hsl(140,2%,77%);
  --comment: hsl(120,0%,59%);
  --red: hsl(0,50%,60%);
  --orange: hsl(24,65%,62%);
  --yellow: hsl(39,80%,69%);
  --green: hsl(65,39%,57%);
  --aqua: hsl(171,28%,64%);
  --blue: hsl(207,31%,62%);
  --purple: hsl(286,22%,65%);
  --themeicon: "☽"
  --themechange: "☽"
  --switchthemeicon: var(--themeicon);
  --switchthemechange: var(--themechange);
  --nightbackground: hsl(210,6%,12%);
  --notoSans: "Noto Sans TC", "Noto Color Emoji", "微軟正黑體", palatino, georgia, verdana, arial, sans-serif;
  --notoSerif: "Noto Serif TC", "Noto Color Emoji", palatino, georgia, "times new roman", serif;
  --fontKai: "標楷體", DFKai-sb, "楷體-繁", STKaiTi-TC-Regular, STKaiTi-TC, STKaiTi, fangsong, cursive, "Noto Serif TC", serif;
/*  --fontKai: "標楷體", DFKai-sb, BiauKai, "楷體-繁", STKaiTi-TC-Regular, STKaiTi-TC, STKaiTi, fangsong, cursive, "Noto Serif TC", serif;
   COLRv1: "Noto Colr Emoji Glyf"
   B&W:    "Noto Emoji"           */
}

@media (prefers-color-scheme: light) {
  :root {
    --background: hsl(0,0%,98%);
    --currentline: hsl(0,0%,92%);
    --selection: hsl(0,0%,82%);
    --selectionmark: hsla(228,8%,24%,80%);
    --foreground: hsl(228,8%,24%);
    --comment: hsl(231,4%,64%);
    --red: hsl(345,69%,49%);
    --orange: hsl(22,78%,49%);
    --yellow: hsl(46,60%,48%);
    --green: hsl(140,62%,36%);
    --aqua: hsl(199,100%,43%);
    --blue: hsl(222,78%,52%);
    --purple: hsl(263,86%,60%);
    --themeicon: "☀";
    --themechange: "☽";
    --switchthemeicon: var(--themeicon);
    --switchthemechange: var(--themechange);
    --nightbackground: hsl(210,6%,12%);
  }
}

@media (prefers-contrast: less) {
  :root {
    --background: hsl(44,87%,94%);
    --currentline: hsl(45,64%,91%);
    --selection: hsl(46,42%,88%);
    --selectionmark: hsla(196,13%,45%,80%);
    --foreground: hsl(196,13%,45%);
    --comment: hsl(180,7%,60%);
    --red: hsl(1,71%,52%);
    --orange: hsl(18,80%,44%);
    --yellow: hsl(45,100%,35%);
    --green: hsl(68,100%,30%);
    --aqua: hsl(175,59%,40%);
    --blue: hsl(205,69%,49%);
    --purple: hsl(237,43%,60%);
    --themeicon: "☼";
    --themechange: "☽";
    --switchthemeicon: var(--themeicon);
    --switchthemechange: var(--themechange);
    --nightbackground: hsl(210,6%,12%);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: hsl(210,6%,12%);
    --currentline: hsl(236,10%,33%);
    --selection: hsl(216,8%,24%);
    --selectionmark: hsla(140,2%,77%,80%);
    --foreground: hsl(140,2%,77%);
    --comment: hsl(120,0%,59%);
    --red: hsl(0,50%,60%);
    --orange: hsl(24,65%,62%);
    --yellow: hsl(39,80%,69%);
    --green: hsl(65,39%,57%);
    --aqua: hsl(171,28%,64%);
    --blue: hsl(207,31%,62%);
    --purple: hsl(286,22%,65%);
    --themeicon: "☽";
    --themechange: "☽";
    --switchthemeicon: var(--themeicon);
    --switchthemechange: var(--themechange);
    --nightbackground: hsl(210,6%,12%);
  }
}

@media (prefers-contrast: more) {
  :root {
    --background: hsl(0,0%,0%);
    --currentline: hsl(0,0%,16%);
    --selection: hsl(0,0%,26%);
    --selectionmark: hsla(0,0%,92%,80%);
    --foreground: hsl(0,0%,92%);
    --comment: hsl(120,1%,59%);
    --red: hsl(358,62%,57%);
    --orange: hsl(26,77%,59%);
    --yellow: hsl(47,77%,59%);
    --green: hsl(68,55%,54%);
    --aqua: hsl(169,39%,60%);
    --blue: hsl(213,56%,67%);
    --purple: hsl(281,45%,72%);
    --themeicon: "★";
    --themechange: "☽";
    --nightbackground: hsl(210,6%,12%);
  }
}

/* =====================================
   theme-switch checked = Tomorrow Night
   ===================================== */

.theme-switch:checked ~ * {
  --background: hsl(210,6%,12%);
  --currentline: hsl(236,10%,33%);
  --selection: hsl(216,8%,24%);
  --selectionmark: hsla(140,2%,77%,80%);
  --foreground: hsl(140,2%,77%);
  --comment: hsl(120,0%,59%);
  --red: hsl(0,50%,60%);
  --orange: hsl(24,65%,62%);
  --yellow: hsl(39,80%,69%);
  --green: hsl(65,39%,57%);
  --aqua: hsl(171,28%,64%);
  --blue: hsl(207,31%,62%);
  --purple: hsl(286,22%,65%);
  --switchthemeicon: var(--themechange);
  --switchthemechange: var(--themeicon);
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

::-moz-selection {
  color: var(--selection);
  background: var(--selectionmark);
}

::selection {
  color: var(--selection);
  background: var(--selectionmark);
}

/* GRID */
body {
  display: grid;
  grid-column-gap: 0.5em;
  grid-template-columns: 2em 1fr minmax(6em, 20em) minmax(15em, 50em) auto 1fr 2em;
  grid-template-rows: auto auto auto minmax(2em, auto) auto auto;
  grid-template-areas:
    "... ...   ...   crosssitenav crosssitenav ... ..."
    "... ...  banner    banner       banner    ... ..."
    "... ...   side    content      category   ... ..."
    "... ...   ...     content      category   ... ..."
    "... ...  footer   content      category   ... ..."
    "... ... related   related      related    ... ..."
}
@media (max-width: 425px) {
  body {
    grid-template-columns: 1em 1fr minmax(15em, auto) auto 1fr 1.5em;
    grid-template-rows: auto 1fr minmax(2em, auto) auto auto auto;
    grid-template-areas:
      "... ...    banner       banner    ... ..."
      "... ...   content      category   ... ..."
      "... ...     side         side     ... ..."
      "... ...    footer       footer    ... ..."
      "... ...   related      related    ... ..."
      "... ... crosssitenav crosssitenav ... ..."
  }
}
@media (max-width: 320px) {
  body {
    grid-template-columns: 0.5em minmax(10em, calc(320px - 1.7em)) 1.2em;
    grid-template-rows: auto;
    grid-template-areas:
      "...    banner    ..."
      "...   category   ..."
      "...   content    ..."
      "...     side     ..."
      "...    footer    ..."
      "...   related    ..."
      "... crosssitenav ..."
  }
}

header {
  grid-area: banner;
}

.description {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.description span {
  padding: 0 5px;
  border-right: 1px solid var(--comment);
}

main {
  grid-area: content;
}

main img, main img {
  max-width: 100% !important;
  height: auto;
}

/*
img.me {
  filter: blur(10px) sepia(90%);
}
img.me:hover, img.me:focus {
  filter: unset;
  transition: filter .1s;
}
@media (prefers-reduced-motion) {
  img.me, img.me:hover, img.me:focus {
    filter: unset;
  }
}
*/

a[href] > img:hover,
a[href] > img:focus,
a[href] > picture:hover,
a[href] > picture:focus {
  filter: drop-shadow(0 0 0.75rem var(--yellow));
  transition: filter .15s;
}

aside#categories {
  grid-area: category;
  padding: 0;
}
aside#categories ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  padding-inline-start: 0;
}

aside#aside {
  grid-area: side;
}

aside#related {
  grid-area: related;
  justify-self: center;
  max-width: 50em;
}

footer {
  grid-area: footer;
  align-self: end;
}

.switch-label {
  grid-column-start: -3;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: 3;
  margin-top: 1em;
  margin-right: 0.3em;
  align-self: start;
}

/* Theme switcher */
.theme-switch { /* Hides the checkbox */
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.switch-label {
  cursor: pointer;
  display: grid;
  grid-template-columns: min-content;
  grid-template-rows: auto auto;
  justify-items: center;
}

.switch-label::before {
  content: var(--switchthemeicon);
  font-size: 1.5em;
  transition: text-shadow .2s;
}

.switch-label::after {
  align-self: center;
  content: var(--switchthemechange);
  color: var(--purple);
  font-size: 1.5em;
  opacity: 0;
  transition: opacity .2s;
}

.theme-switch:focus ~ .switch-label::before,
.switch-label:hover::before {
  text-shadow: 0 0 15px var(--red);
}

.theme-switch:focus ~ .switch-label::after,
.switch-label:hover::after {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  .theme-switch, .switch-label {
    display: none;
  }
}

.background {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1;
  margin-bottom: -20px;
  z-index: -999999;
}
body.root {
  min-height: 97.7vh;
}

.blog, .content, #related {
  /* font-family: "微軟正黑體", palatino, georgia, verdana, arial, sans-serif; */
  font-family: var(--notoSans);
  font-size: medium;
  font-weight: normal;
  background: transparent;
  line-height: 170%;
  max-width: 60em;
  padding: 15px;
}
.resume {
  max-width: 100%;
}

main.blog {
  grid-column-start: side;
  grid-row-start: content;
  grid-column-end: banner;
  grid-row-end: footer;
  justify-self: center;
  font-size: calc(18em / 16);
}
main.resume {
  grid-column-start: 2;
  grid-column-end: -2;
}
main.root {
  grid-row-start: 1;
  grid-row-end: -1;
  align-self: center;
  padding: 5vh 5vw;
}

div#crosssitenavigation {
  grid-area: crosssitenav;
  justify-self: end;
  display: flex;
  align-items: baseline;
}
#crosssitenavigation a[href]:hover,
#crosssitenavigation a[href]:focus {
  text-shadow: 0 0 15px var(--yellow);
  transition: text-shadow .2s;
}
ul.flexitems {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  line-height: 1.2em;
}
ul.flexitems li {
  list-style: none;
  padding: 0 5px;
}
ul.flexitems li + li {
  border-left: 1px solid var(--comment);
}

.resumeFlex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.resumeFlex > * {
  padding: 12px;
  border: solid 1px var(--currentline);
  border-radius: 0.5em;
  max-width: 35em;
}
.resumeFlex > .resumeFlex {
  padding: 0;
  border: none;
}
.noWrap {
  flex-wrap: nowrap;
}
@media (max-width: 320px) {
  .noWrap {
    flex-wrap: wrap;
  }
}

article h2.title,
main.blog h1#entry {
  display: grid;
  grid-column-gap: 0.2em;
  grid-template-columns: 50px auto;
}
article h2.title span + a,
main.blog h1#entry span + a {
  align-self: center;
}

/* for bilingual resume */
address dd[lang^="en"] {
  text-indent: 1.5em;
}

/* general styles */

body {
  margin: 0px 0px 20px 0px;
  background: var(--background);
}
/* ======== UGLY HACK ======== */
body.short {
  background: var(--nightbackground);
}
body:has(.theme-switch:checked) {
  background: var(--nightbackground);
}

body > * {
  color: var(--foreground);
}

.background {
  background: var(--background);
}

a {
  color: var(--green);
  text-decoration: underline;
}
a:link {
  color: var(--green);
  text-decoration: underline;
}
a:visited {
  color: var(--orange);
  text-decoration: underline;
}
a:active {
  color: var(--red);
}
a:hover {
  color: var(--red);
}

h1, h2, h3, hgroup p {
  margin: 0px;
  padding: 0px;
}

h1, h2, h3 {
  line-height: normal;
}

abbr, acronym, .help {
  cursor: help;
}
abbr[title] {
  text-decoration: unset;
}

pre, blockquote {
  font-family: monospace; /*geneva, verdana, arial, sans-serif;*/
  font-size: 1em;
  line-height: 1.3em;
  background-color: var(--currentline);
  border: 1px dashed var(--selection);
  padding: 4px;
  padding-left: 10px;
  margin-left: 0.5em;
  margin-right: 0.5em;
  overflow-x: auto;
}

strong {
  color: var(--yellow);
}

input, textarea {
  color: var(--foreground);
}
@media (prefers-color-scheme: dark) {
  input, textarea {
    color: var(--background);
  }
}
@media (prefers-contrast: more) {
  input, textarea {
    color: var(--background);
  }
}

input:focus, textarea:focus {
  color: var(--foreground);
  background: var(--currentline);
}

input[type="button"]:focus {
  background: button-highlight;
}

input[type="submit"] {
    color: var(--background);
    background: var(--yellow);
}
input[type="submit"]:focus {
    color: var(--background);
    background: var(--green);
}

input:invalid {
  border: var(--red) dashed 3px;
}

input:invalid + mark::before {
  content: "（格式有誤，請檢查）";
}

cite {
  text-decoration: underline wavy;
}

dfn {
  display: inline-block;
  border-radius: 0.25rem;
  border: 1px solid var(--comment);
  padding: 0 3px;
  margin: 0 2px;
}
*:has(> dfn)::after {
  color: var(--comment);
  content: "[≝]";
}

code {
  color: var(--aqua);
}

var {
  color: var(--blue);
}

samp {
  color: var(--purple);
}

kbd {
  border-radius: 0.25rem;
  border: 1px solid var(--currentline);
  box-shadow: 0 2px 0 1px var(--currentline);
  font-size: 0.75em;
  line-height: 1;
  min-width: 0.75rem;
  display: inline-block;
  text-align: center;
  padding: 2px 5px;
  position: relative;
  top: -1px;
}

header {
  /* font-family: "微軟正黑體", palatino, georgia, verdana, arial, sans-serif; */
  font-family: var(--notoSans);
  color: var(--comment);
  font-weight: normal;
  border-top: 4px double var(--selection);
  z-index: 10;
}
header a, header a:link, header a:visited, header a:active, header a:hover {
  /* font-family: "微軟正黑體", palatino, georgia, verdana, arial, sans-serif; */
  font-family: var(--notoSans);
  font-size: larger;
  color: var(--comment);
  text-decoration: underline;
}
header.entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
header.entry form {
  grid-column-end: -1;
}

.description {
  /* font-family: palatino, georgia, "times new roman", serif; */
  font-family: var(--notoSerif);
  color: var(--comment);
  font-size: medium;
  text-transform: none;
}
header .description a, header .description a:link {
  font-size: medium;
  color: var(--green);
  text-decoration: underline;
}
header .description a:visited {
  font-size: medium;
  color: var(--orange);
  text-decoration: underline;
}
header .description a:active, header .description a:hover {
  font-size: medium;
  color: var(--red);
}

main {
  background: transparent;
  margin-top: 0.6em;
  border: 1px solid var(--selection);
  overflow-x: auto;
}

main > section, #related > section {
  padding: 15px;
  max-width: 60em;
}
main.blog section#more {
  padding: 0;
}

article {
  /* font-family: "微軟正黑體", palatino, georgia, verdana, arial, sans-serif; */
  font-family: var(--notoSans);
  font-weight: normal;
  background: transparent;
  line-height: 170%;
  max-width: 100%;
  overflow-x: auto;
}

article h1#entry, article h2.title, article h3[id^="entry"] {
  /* font-family: "標楷體", palatino, georgia, "times new roman", serif; */
  font-family: var(--fontKai);
  font-weight: normal;
}

.pre {
  /* font-family: geneva, verdana, arial, sans-serif; */
  font-family: var(--notoSans);
  background-color: var(--currentline);
  border: 1px solid var(--selection);
  padding: 2px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 0.5em;
  margin-right: 0.5em;
  overflow-x: auto;
}

.date {
  /* font-family: palatino, georgia, "times new roman", serif; */
  font-family: var(--notoSerif);
  font-size: large;
  color: var(--aqua);
  border-bottom: 1px solid var(--selection);
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: bold;
}

.posted {
  /* font-family: verdana, arial, sans-serif; */
  font-family: var(--notoSans);
  font-size: small;
  color: var(--aqua);
  margin-bottom: 25px;
  clear: both;
}

aside#aside {
  /* font-family: verdana, arial, sans-serif; */
  font-family: var(--notoSans);
  color: var(--foreground);
  font-size: small;
  font-weight: normal;
  background: transparent;
  line-height: 140%;
  padding: 2px;
}

aside h2 {
  /* font-family: palatino, georgia, "times new roman", serif; */
  font-family: var(--notoSerif);
  color: var(--blue);
  font-size: medium;
  font-weight: normal;
  padding: 2px;
  margin-top: 10px;
  border-bottom: dotted 1px var(--comment);
  background: transparent;
  text-transform: uppercase;
}
aside h3 {
  /* font-family: palatino, georgia, "times new roman", serif; */
  font-family: var(--notoSerif);
  color: var(--purple);
  font-size: medium;
  font-weight: normal;
  padding: 2px;
  margin-top: 0.5em;
  background: transparent;
  text-transform: uppercase;
}
summary h2 {
  border: none;
}
aside#to_more {
  display: grid;
  justify-items: center;
}

footer {
  /* font-family: palatino, georgia, "times new roman", serif; */
  font-family: var(--notoSerif);
  font-size: x-small;
  line-height: 140%;
  text-transform: uppercase;
  padding: 2px;
  margin-top: 50px;
}

#crosssitenavigation {
  background-color: transparent;
  /* font-family: Tahoma, sans-serif; */
  font-family: var(--notoSans);
  z-index:10000;
  font-size: 90%;
}
#crosssitenavigation .inner {
  margin: 0;
  padding: 3px;
  text-align: right;
}

.comments-body {
  /* font-family: palatino, georgia, verdana, arial, sans-serif; */
  font-family: var(--notoSans);
  font-size: medium;
  font-weight: normal;
  background: transparent;
  line-height: 140%;
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px dotted var(--selection);
  max-width: 50em;
  overflow-x: auto;
}

.comments-post {
  /* font-family: verdana, arial, sans-serif; */
  font-family: var(--notoSans);
  font-size: medium;
  font-weight: normal;
  background: transparent;
}

article.comments-body {
  display: grid;
  grid-template-columns: minmax(min-content, 3.5em) auto;
  grid-gap: 0 1em;
  margin-top: 1em;
}
article.comments-body h2, article.comments-body h3 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
  border-right: 1px solid var(--comment);
}
article.comments-body .mtcommentbody {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
article.comments-body .posted {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  margin-bottom: 0;
}
article.comments-body .posted p {
  margin: 0;
}

form#comments_form {
  display: grid;
  grid-template-columns: minmax(min-content, 10em) minmax(20em, 1fr);
  grid-gap: 1em;
}
form#comments_form #personal {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
form#comments_form #captcha {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}
form#comments_form #commentarea {
  grid-row: 1 / span 2;
}
form#comments_form textarea {
  height: 24em;
  width: calc(100% - 0.5em);
  max-width: 40em;
}

.comments-head {
  /* font-family: palatino, georgia, verdana, arial, sans-serif; */
  font-family: var(--notoSans);
  font-size: medium;
  border-bottom: 1px solid var(--selection);
  margin-top: 20px;
  font-weight: bold;
  background: transparent;
}

ul.menu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
  justify-items: center;
}
ul.menu li {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: min-content auto;
  width: 100%;
}
ul.menu li.previous * {
  justify-self: start;
}
ul.menu li.previous + li * {
  justify-self: center;
}
ul.menu li.next * {
  justify-self: end;
}

@media (max-width: 545px) {
  form#comments_form {
    grid-template-columns: auto;
    max-width: 45em;
  }
  form#comments_form #personal {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
  }
  form#comments_form #captcha {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
  }
  form#comments_form #commentarea {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
  }
  form#comments_form textarea {
    height: 16em;
  }
}

}
@media (max-width: 425px) {
  header {
    padding-top: 2em;
  }
  #crosssitenavigation .inner {
    text-align: left;
  }
  .switch-label {
    grid-column-start: -2;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-top: -1.5em;
    margin-right: 0;
    align-self: center;
    justify-self: center;
  }
}
@media (max-width: 320px) {
  header {
    padding-top: 2em;
  }
  aside#categories ul {
    grid-template-columns: repeat(auto-fill, 50px);
  }
  .switch-label {
    grid-column-start: -2;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-top: -1.5em;
    margin-right: 0;
    align-self: center;
    justify-self: center;
  }
}

/* hacks */

.codenote {
  color: var(--comment);
  float: right;
}

main .twitter {
  float: right;
}

input#search {
  width: calc(100% - 6em);
  min-width: fit-content;
}

form[role="search"] {
  text-align: end;
}

form[role="search"] input[type="submit"] {
  min-width: 5em;
}

aside ul, footer ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
#recentcomments li {
  padding-bottom: 0.5em;
}
#recentcomments li a span.guestbook {
  display: none;
}
#recentcomments li a[href*="entry_id=2542"] span.href {
  display: none;
}
#recentcomments li a[href*="entry_id=2542"] span.guestbook {
  display: inline;
}
details ul, aside#related ul {
  padding-left: 3em;
  padding-right: 1em;
  list-style: disc;
}
#related ul.menu {
  padding-left: 0;
  padding-right: 0;
  list-style: none;
}
details h3 {
  padding-left: 1em;
  padding-right: 1em;
}
#related details,
.resume details {
  border: solid 1px var(--comment);
  margin-bottom: 0.5em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
}
#related details summary,
.resume details summary {
  display: list-item;
  padding-left: 1em;
  padding-right: 1em;
  cursor: pointer;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  color: var(--background);
  background: var(--foreground);
}
#related details summary > *,
.resume details summary > * {
  display: inline;
  color: var(--background);
}
details:not([open])::after {
  content: "☝（展開後顯示）";
  padding-left: 0.5em;
  padding-right: 0.5em;
  color: var(--comment);
}
details > summary + *:empty::after {
  content: "沒有相關內容。";
  color: var(--comment);
}
details:has(> summary + *:empty) {
  display: none;
}
.resume dt {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.resume dd {
  margin-left: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.2em;
}
.resume details .longcol {
  column-count: 2;
  column-rule: dashed var(--currentline);
}
@media (max-width: 320px) {
  .resume details .longcol {
    column-count: 1;
  }
}

#comments + .emptyChecker:empty::after {
  content: "目前沒有任何迴響（或者可能是廣告所以先不呈現）。";
  color: var(--comment);
}
#comments:has(+ .emptyChecker:empty),
#comments:has(+ .emptyChecker:empty) + .emptyChecker {
  display: none;
}

footer figure {
  margin: 0;
}

.diff > #rev {
  display: none;
}
ins, .ins {
  text-decoration: underline dotted var(--yellow) 0.3em;
}
.ins {
  padding: 0 2px 0 2px;
}
del, .del {
  text-decoration: line-through solid var(--purple) 0.2em;
}
.del {
  padding: 0 2px 0 2px;
}

mark {
  background: var(--yellow);
  color: var(--background);
}

.book {
  text-decoration: wavy underline var(--comment);
}

span.noprint iframe {
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  border: 1px solid var(--foreground);
}

table th, table td {
  border: 1px solid;
  padding: 5px;
}

table + * {
  padding-top: 1em;
}

/* image switcher in div */
div.img_switch label + input { margin-left: 1.2em; }
div.img_switch img { width: 0px; height: 0px; }
div.img_switch input#check_img_switch_a:checked ~ img#img_switch_a { width: auto; height: auto; }
div.img_switch input#check_img_switch_b:checked ~ img#img_switch_b { width: auto; height: auto; }
div.img_switch input#check_img_switch_c:checked ~ img#img_switch_c { width: auto; height: auto; }
div.img_switch input#check_img_switch_d:checked ~ img#img_switch_d { width: auto; height: auto; }

/* ASL font */
@font-face {
  font-family: "Fingerspelling";
  src: url("https://jedi.org/blog/fingerspelling.eot?") format("eot"),url("https://jedi.org/blog/fingerspelling.woff") format("woff"),url("https://jedi.org/blog/fingerspelling.ttf") format("truetype"),url("https://jedi.org/blog/fingerspelling.svg#Fingerspelling") format("svg");
  font-weight: normal;
  font-style: normal;
}

.asl {
  font-family: "Fingerspelling";
  font-size: 1.2em;
}

/* TYPO monitor */
[herf] {
  border: solid 3px red;
}
[herf]::before {
  content: "TYPO: "
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/* Or, just using Adobe Blank 2 webfont... */

.blank {
  font-family: AdobeBlank2 !important;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  /*
  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }
   */

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  h1, h2, h3, h4, h5,
  p,
  blockquote,
  li, dt, dd,
  tr,
  img, picture, figure {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2, h3, h4, h5 {
    page-break-after: avoid;
  }

  .noprint,
  .skipTo,
  .switch-label,
  #crosssitenavigation,
  #keywords,
  #thisday,
  div.comments-body {
    display: none !important;
  }
}