@import url("../font/font.css");
@import "color-light.css" screen;
@import "color-dark.css" screen;
/* @import "color-dark.css" screen and (prefers-color-scheme: dark); */
@import "hljs.css";

/* When document goes through a printer, don't show the header */
@media print {
  div#header { display: none; }
}

/* this is the main stylesheet.
 * Don't put colors inside.
 * (see color-*.css for day/night and hljs.css for code highlighting)
 */

#theme-toggle {
  height: 32px;
  width: 32px;
  display: inline-block;
  opacity: .9;
}

/* html[data-theme="dark"] #header img { filter: invert(1); } */

html[data-theme="dark"] #theme-toggle-moon,
html[data-theme="light"] #theme-toggle-sun {
  display: none;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

html,
body {
  transition: 0.25s all ease;
  line-height: 1.54em;
	font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; font-weight: normal;
	font-family: Verdana, Helvetica, sans-serif;
}

h1 { font-size: 2em; line-height: 42px; }
h2 { font-size: 1.618em; line-height: 36px; }
h3 { font-size: 1.50em; line-height: 36px; }
h4 { font-size: 1.33em; line-height: 34px; }
h5 { font-size: 1.25em; line-height: 32px; }
h6 { font-size: 1.10em; line-height: 30px; }

ul, ol { padding-left: 1.618em; }

/* blockquote blockquote { margin: 0; } */
pre { margin: 0; }
pre > code {
  display: block;
  padding: 1em;
  font-size: 14px;
  line-height: 1.618em;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

blockquote {
  margin: 1em 10px;
  padding: 0 10px;
}

blockquote > p {
  margin-top: 0;
  margin-bottom: 0;
}

code {
  overflow: auto;
}

/* TODO rename to img#github */
html body img#github32 { 
  width: 28px; 
  height: 28px; 
  content:url(/static/img/github-mark-white.svg);
  opacity: 91%;
  padding-bottom: 2px;
  margin-right: 1px;
}
html body img#github32:hover { 
  opacity: 80%;
}

#package_file pre > code {
  font-size: 1.02em;
  line-height: 1.24em;
  padding: 1em;
}

#root { 
  margin: 20px; 
  /* note: Interesting is max-width for mini-asteroids */
  max-width: 920px;
}

/*
 * header uses flex, can have 4 elements horizontally:
 * 1. a.back_button
 * 2. a.logonav
 * 3. span.separator
 * 4. a.page_name
 * 5. #header_buttons
 *
 * The header_buttons on this theme is on the right,
 * all others are shown in succession on the left.
 */
#header {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  padding: .5em .75em .5em 1em;
  margin-bottom: 0;
  height: 38px;
}
#header a.back_button { order:0; padding-right: 0.3em; padding-left: 0em; }
#header a.back_button::before { content: "<"; }
#header a.logonav { order: 0; margin-right: 0.4em; }
#header span.separator { order: 3; }
#header span.separator::before { content: "/"; font-size: 22px; color: gray; padding-left: 5px; padding-right: 5px; }
#header .page_name { order: 4; color: gray; }
#header #header_buttons { order: 5; }

#home {
  margin-top: 0px;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

#header #logo, 
#header .logonav, 
#header .back_button,
#header .page_name{
  position: relative;
  font-size: 1.5em;
  line-height: 1.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#header a.logonav:hover, #header a.back_button:hover { border-radius: 1.5px; }

#header #header_buttons {
  float: right;
  position: relative;
  padding-left: 22px;
  padding-top: .5em;
  margin-left: auto;
}

h1.post_header_page_name { display: none; }

/* div#package_file, */
div#home,
div#packge_dir,
div#realm_help,
div#realm_render { 
  padding: 1em;
}

div#realm_render { padding-left: 50px; }

/* adjust margins at the very top of #home */
div#home > p:first-of-type { margin-top: 0; }
div#home > h1:first-of-type,
div#home > h2:first-of-type,
div#home > h3:first-of-type,
div#home > h4:first-of-type,
div#home > h5:first-of-type,
div#home > h6:first-of-type {
  margin-top: 5px;
}

h1, h2, h3, h4, h5, h6 { margin-top: 5px; margin-bottom: 10px; }
ul { margin-top: 5px; margin-bottom: 15px; }

span.tag {
  border: lightsalmon 1px solid;
  border-radius: 5px;
  background-color: salmon;
  padding: 3px;
  font-size: 12px;
  line-height: 12px;
  color: gold;
  box-shadow: 1px 1px rgba(0,0,0,.2);
}

div#home table { 
  border-collapse: collapse; 
  box-shadow: #00000020 1px 1px 5px;
  border-radius: 5px;
  width: 100%;
  margin-bottom: 15px;
  font-size: 0.94rem;
}
div#home table, th, td { 
  border: 1px solid #00000070; 
  padding: 3px;
}

a { text-decoration: none; }

#logo_path { 
  position: relative; 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#logo_path a:hover { text-decoration: underline; }


#realm_links { position: relative; padding-left: 0.25em; }
#realm_links a:hover { text-decoration: underline; }

/* enabled conditionally with <noscript> */
#source { display: none; }

/*** REALM HELP ***/

html #realm_help .func_spec .shell_command { 
  /* font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; */
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-weight: normal;
  font-size: 0.9em;
}

#realm_help .func_spec > table > tbody > tr > th {
  width: 50px;
  vertical-align: top;
  text-align: right;
}

#realm_help div.func_spec > table {
/*   background: rgba(255,0,64,10%); */
  border-collapse: collapse;
}

#realm_help .func_name td {
  font-weight: bold;
}

/* the weird case of table within table */
#realm_help div.func_spec > table table th, #realm_help div.func_spec > table table { margin: 0; }
#realm_help div.func_spec > table table th, #realm_help div.func_spec > table table td { padding-left: 0; padding-top: 0; padding-bottom: 0; }
#realm_help div.func_spec > table table th, #realm_help div.func_spec > table table td { border: none; }

/* #realm_help div.func_spec > table th, #realm_help div.func_spec > table td { */
/*   padding: 10px; */
/* } */

h1 { font-size: 1.618em; line-height: 1.25em; }


/* small screen (responsive changes) */
@media (max-width: 585px), (max-height: 320px) {
  #root { margin:0; }
  #header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  div#header + div {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* fullscreen #home when small screen */
  div#root {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  div#home { 
    flex-grow: 1; 
  }
}

/** 
 * Hide header buttons but try to keep them 
 * on most phones for toggling theme.
 * iPhone 11 is 375x812
 * Galaxy S10 is 360x760
 */
@media (max-width: /* 359px */ 25em) {
  /* #header_buttons { visibility: hidden; } */
  #header_buttons { display: none; }
}