/* FONTS */
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700');
@import url('syntax-highlighting.css');

:root {

  --main-color: white;
  --bg-color: black;

  --text-color: #DDD;
  --pop-color: white;
  --alt-color: #2ed573;
  --light-alt-color: rgba(46, 213, 115);

}

/* BASE */
body { background-color: var(--bg-color); color: var(--main-color); font-family: 'Roboto Mono', monospace; margin: 0 auto; width: 90%; max-width: 700px; line-height: 2em; font-size: 0.9em; }
h1, h2, h3, h4, h5, h6 {  margin: 0px;  margin-top: 22px;  font-weight: bold;  color: var(--pop-color); font-size: 1em; }
p, ul, ol { font-size: 1em;  color: var(--text-color); }
a { text-decoration: underline;  color: var(--alt-color); }
a:hover { color: var(--bg-color); background-color: var(--alt-color); }
.primary-text { color: var(--main-color); }
@media only screen and (max-device-width: 500px) { * { font-size: 12px !important; } }
b, strong { color: var(--main-color); }
.invert { color: var(--bg-color); background-color: var(--main-color); padding-left: 3px; padding-right: 3px; padding-top: 1px; padding-bottom: 1px; }

/* SMALL FONT OVERRIDE */
body.large { line-height: 2em; font-size: 1em; }

/* LAYOUT */
.container { margin-right: auto;  margin-left: auto; }
p { word-wrap: break-word;  word-break: break-word;  white-space: pre-wrap; }
footer { color: var(--text-color);  border-top: dashed 1px rgba(219, 219, 219, 0.9);  margin: 20px auto 15px;  padding-top: 10px;  text-align: right; }
header { margin-top: 25px;  margin-bottom: 10px; }
header p { text-align: left;  margin: 0; }
footer { margin-bottom: 20px; }
img.home_header { width: 100%; margin-top: 5%; margin-bottom: 5%; }
img.detail_header { width: 100%; }

/* LISTS */
:not(.menu) > ul { list-style: none; padding-left: 1em; }
ul :not(.menu) > ul { list-style: none; padding-left: 3em; margin-top: 0.5em; margin-bottom: 0.7em; }
:not(.menu) > ul { list-style-type: none; }
:not(.menu) > ul > li:before { content: "-";  margin-right: 9px; }
ul :not(.menu) > ul > li:before { content: "*";  margin-right: 9px; }

/* NAVIGATION */
.menu { border-top: dashed 1px rgba(219, 219, 219, 0.9);  border-bottom: dashed 1px rgba(219, 219, 219, 0.9);  margin-bottom: 25px; }
.menu ul { margin-top: 12px;  margin-bottom: 12px;  padding-left: 0px;  list-style-type: none;  text-align: right; }
.menu ul li { display: inline;  margin-left: 10px; }
.menu ul li a { text-decoration: none;  color: var(--text-color); }
.menu ul li a:hover { text-decoration: none; color: var(--bg-color); background-color: var(--main-color); }
.menu ul li.page_title { text-align: left; margin-left: 10px; float: left; font-weight: bold; color: var(--main-color) }


/* ERROR PAGES */

div.error_box { margin: 100px; text-align: center; }
div.error_box h1 { font-size: 2em; }

*::selection { background-color: var(--light-alt-color); color: black; }


.link-chip {
  display: inline-block;
  height: 64px;
  box-sizing: border-box;
  margin: 2px 0;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: #e0e0e0;
  border-radius: 50px 16px 16px 50px;
  -webkit-transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1);
          transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1);

  will-change: box-shadow;
}
.link-chip:hover,
.link-chip:focus {
 -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.link-chip:active {
  background-color: #d6d6d6;
}
/* 左侧的图标 */
.link-chip-icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  /*margin-right: -8px;*/
  overflow: hidden;
  font-size: 18px;
  line-height: 32px;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  background-color: #989898;
  border-radius: 50px;
}
.link-chip-icon .link-icon {
  color: #fff;
}
/* 文本 */
.link-chip-title {
  display: inline-block;
  height: 64px;
  padding-right: 12px;
  padding-left: 12px;
  font-size: 14px;
  line-height: 64px;
  vertical-align: middle;
  margin-bottom: -5px;
}