tk-backface {
  background: radial-gradient(#f8f8f8 0%, #e6e6e6 100%);
}

[invert] + tk-backface {
  background: radial-gradient(#262626 0%, #080808 100%);
}

[layout] {
  line-height: 1.5;

  color: #222;
  box-shadow: 0 0 10px transparent;

  font-family: "NotoSansCJKjp-Light", "Open Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

[layout][invert] {
  color: #fff;
  background: transparent;
}

[layout] > * {
  margin: 30px 100px;
}

[layout][horizontal] {
  flex-wrap: wrap;
  align-content: center;
}

[layout][horizontal] > * {
  flex: 1;
  margin: 30px 30px;
}

[layout][horizontal] > *:first-child {
  margin-left: 100px;
}

[layout][horizontal] > h1:first-child,
[layout][horizontal] > h2:first-child,
[layout][horizontal] > h3:first-child,
[layout][horizontal] > h4:first-child,
[layout][horizontal] > h5:first-child,
[layout][horizontal] > h6:first-child {
  width: 100%;
  margin-left: 30px;
}

[layout][horizontal] h1:first-child + *,
[layout][horizontal] h2:first-child + *,
[layout][horizontal] h3:first-child + *,
[layout][horizontal] h4:first-child + *,
[layout][horizontal] h5:first-child + *,
[layout][horizontal] h6:first-child + * {
  margin-left: 100px;
}

[layout][horizontal] > *:last-child {
  margin-right: 100px;
}

[layout] h1,
[layout] h2,
[layout] h3,
[layout] h4,
[layout] h5,
[layout] h6 {
  flex: initial !important;
  text-align: center;
  font-family: "Lato", "Hiragino Mincho ProN", serif;
}

[layout] h1 {
  font-size: 4.8em;
}

[layout] h2 {
  font-size: 3.6em;
}

[layout] h3 {
  font-size: 2.4em;
}

[layout] p {
  font-size: 2.0em;
  text-align: center;
}

[layout] a:link,
[layout] a:visited,
[layout] a:hover,
[layout] a:active {
  color: dodgerblue;
  text-decoration: none;
}

[layout][invert] a:link,
[layout][invert] a:visited,
[layout][invert] a:hover,
[layout][invert] a:active {
  color: #33ffff;
}

[layout] em {
  font-size: 0.5em;
  font-style: normal;
}

[layout] strong {
  font-weight: bold;
}

[layout] table {
  border-collapse: collapse;
}

[layout] th,
[layout] td {
  padding: 1em;
  font-size: 2.0em;
  font-weight: normal;
  border: 1px solid #222;
}

[layout][invert] th,
[layout][invert] td {
  border-color: #fff;
}

[layout] ul,
[layout] ol {
  font-size: 1.8em;
  text-align: left;
  list-style-type: none;
}

[layout] ul ul,
[layout] ul ol,
[layout] ol ul,
[layout] ol ol {
  font-size: 1em;
}

[layout] li {
  margin-bottom: 0.5em;
}

[layout] del {
  opacity: 0.5;
}

[layout] video,
[layout] img {
  max-width: 100%;
}

[layout] blockquote {
  position: relative;
  font-style: italic;
}

[layout] blockquote::before {
  position: absolute;
  top: -0.6em;
  left: -0.6em;
  font-size: 5em;
  content: "\"";
}

[layout] pre {
  font-size: 1.6em;
}

[layout] code {
  padding: 0.1em 0.2em;
  /*background: #fff;*/
  border: 1px solid #999;
}

[layout][invert] code {
  /*background: #222;*/
}

[layout] pre code {
  padding: inherit;
  background: inherit;
  border: inherit;
}

[layout][scroll] pre {
  overflow-y: scroll;
}
