@media screen and (grid:0)
{
  html,body
  {
    margin: 0 !important;
    padding: 0 !important;
    background: #000;
    color: grey;
  }

  body>hr,
  #header>hr,
  main>hr,
  #footer>hr
  {
    display: none;
  }

  #shortcut,
  #header,
  #menu,
  #footer
  {
    background: black;
    color: gray;
    display: block;
    margin: 0;
    padding: 0.5em;
    text-align: center;
    font-family: Inconsolata, monospace;
    font-size: 14px;
  }

  #shortcut:lang(ja),
  #header:lang(ja),
  #menu:lang(ja),
  #footer:lang(ja)
  {
    font-family: monospace;
  }

  #shortcut
  {
    position: fixed !important;
    height: 2em !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99;
  }

  #shortcut ul
  {
    display: block;
    margin: 0;
    list-style: none;
  }

  #header
  {
    margin-top: 2em !important;
  }

  #header ul
  {
    display: block;
    margin: 0.5em 0.25em;
    list-style: none;
  }

  #shortcut ul li,
  #header ul li
  {
    display: inline-block;
    padding: 0.25em 0.5em;
    margin: 0;
  }

  #menu h2,
  #menuContent div,
  #footer h2,
  #footer div
  {
    display: block;
    margin: 1em auto;
    max-width: 60rem;
    text-align: left;
  }

  #menu h2,
  #footer h2
  {
    padding: 1px 0.5em;
  }

  #menuContent div,
  #footer div
  {
    background: #202020;
    padding: 1px 0.5em;
  }

  #menu ul
  {
    list-style: square;
  }

  #menu ul li
  {
    display: list-item;
  }

  #shortcut a,
  #header a,
  #menu a,
  #menu-move,
  #footer a
  {
    color:gray;
  }

  #shortcut a:hover,
  #header a:hover,
  #menu a:hover,
  #menu-move:hover,
  #footer a:hover
  {
    color:black;
    background:gray;
  }

  #signal
  {
    background: repeat-x url(signal-bg);
    color: #EEE;
    display: block;
    margin: 0;
    padding: 1px 0;
    text-shadow: 0 0 6px #FFF;
    max-width: 100% !important;
    width: 100%;
    height: 100px !important;
  }

  #signal p
  {
    font-size: 20px;
    margin-top: 25px;
  }

  main
  {
    display: block:
  }

  #main
  {
    border-width: 4px;
    border-style: solid;
    border-color: gray;
    display: block;
    padding: 40px;
    position: relative;
  }
}

#menu-move{display:none}

@media screen and (grid:0) and (min-width:96rem)
{
  main { display: flex }
  #main{flex-grow:1}
  #menu{width:30rem}
  #menu-move{display:block;cursor:pointer}
}

@media print
{
  #shortcut,
  #header,
  main>hr,
  #menu,
  #footer
  {
    display: none;
  }
}

ruby,
ruby rp,
ruby rt
{
  display: inline;
  font: inherit;
}

@supports (display:ruby) and (display:ruby-text)
{
  ruby:lang(ja)
  {
    display: ruby;
  }

  ruby:lang(ja) rp
  {
    display: none;
  }

  ruby:lang(ja) rt
  {
    display: ruby-text;
    font-size: 50%;
  }
}

abbr[title]
{
  cursor: help;
}

table.dated,
table.reviews
{
  width: 100%;
}

table.dated td:nth-child(1),
table.reviews td:nth-child(1),
table.reviews td:nth-child(3)
{
  text-align: center;
  width: 5em;
}

#signal b
{
  font-weight: bold;
}

#page-header h1
{
  text-align: center;
}

#main figure
{
  margin: 2em auto;
  text-align: center;
}

#main img
{
  max-width: 100%;
  height: auto;
}

#main p:lang(ja)
{
  line-height: 1.75em;
}

#main code,
#main pre
{
  font-family: Inconsolata, monospace;
}

#main table
{
  margin: auto;
}

#main th,
#main td
{
  padding: 0 0.5em;
}

#main dt
{
  margin: 1em 0 0.5em 0;
}

#main cite
{
  font: inherit;
}

@media screen and (min-width: 800px)
{
  @supports (display: table) and (display: table-cell)
  {
    #main div.profile
    {
      display: table;
      width: 100%;
    }

    #main div.profile div
    {
      width: 48%;
      display: table-cell;
      vertical-align: top;
    }
  }

  @supports (display:flex)
  {
    #main div.profile
    {
      display: flex;
      width: 100%;
    }

    #main div.profile div
    {
      display: block;
      flex: auto;
    }
  }
}

#page-meta
{
  columns: 2;
  margin: 1rem auto;
  max-width: 40rem;
  text-align: left;
}

#footer dt
{
  margin: 1em 0;
}

#footer code
{
  font: inherit;
}

#footer label
{
  cursor: pointer;
}

#footer button
{
  background: #444;
  border: 1px solid #AAA;
  color: #DDD;
  cursor: pointer;
  font: inherit;
  padding: 2px 0.25em;
}

#footer button[disabled]
{
  cursor: not-allowed;
  background-color: #000;
}

#diary-toc tr *
{
  vertical-align: top;
}

#diary-toc tr *:first-child
{
  width: 6em;
}