:root {
  --bg0: #111111;
  --bg1: #32302f;
  --bg_dim: #090909;
  --fg0: #d4be98;
  --grey0: #7c6f64;
  --green: #a9b665;
  --yellow: #d8a657;
  --orange: #e78a4e;
  --red: #ea6962;
  --aqua: #89b482;
  --blue: #7daea3;
  --purple: #d3869b;

  --general_font_size: 16px
}

body {
  background-color: var(--bg0);
}

p, li {
  font-family: "Lucida Console", "Courier New", monospace;
  color: var(--fg0);
  font-size: var(--general_font_size);
}

iframe {
  width: 100%;
  max-width: 1000px;
}

h1 {
  font-family: "Lucida Console", "Courier New", monospace;
  color: var(--green);
  font-size: 23px
}
h2 {
  font-family: "Lucida Console", "Courier New", monospace;
  color: var(--blue);
  font-size: 20px
}
h3 {
  font-family: "Lucida Console", "Courier New", monospace;
  color: var(--yellow);
  font-size: 17px
}
h4 {
  font-family: "Lucida Console", "Courier New", monospace;
  color: var(--orange);
  font-size: 16px;
}
h5 {
  font-family: "Lucida Console", "Courier New", monospace;
  color: var(--purple);
  font-size: 13px;
}

b {
  font-family: "Lucida Console", "Courier New", monospace;
  color: var(--fg0);
  font-size: var(--general_font_size);
}

input {
  color: var(--fg0);
  background-color: var(--bg1);
  border: 1px solid var(--bg_dim);
}

hr {
  color: var(--fg0);
}

.ct {
  display: block;
  overflow-x: auto;
  padding: 1.5em;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  /* height: 135px; */
  height:auto;
  background-color: var(--bg_dim);
  border: 1px solid var(--bg_dim);
}

.ct:hover {
  color: var(--bg1)
}

img {
  max-width: 100%;
  max-height: 100%;
}

.ct img,
.ct span {
  display: inline-block;
}

.trend_exp_bt,
.prj-r,
.exp-panel-elem:link,
.prj-r:link {
  color: var(--fg0);
  text-decoration: none;
  background-color: transparent;
  font-family: "Lucida Console", "Courier New", monospace;
}

.exp-panel-elem:hover,
.exp-panel-elem:active,
.prj-r:hover,
.prj-r:active {
  color: var(--orange);
  background-color: transparent;
  text-decoration: none;
  font-family: "Lucida Console", "Courier New", monospace;
  cursor: pointer;
}

.trend_exp_bt:active,
.trend_exp_bt:hover {
  color: var(--orange);
  background-color: transparent;
  text-decoration: none;
  font-family: "Lucida Console", "Courier New", monospace;
  cursor: pointer;
}

.ahref:link,
.ahref:visited,
.ahref:hover,
.ahref:active {
  color: var(--green);
  background-color: transparent;
  text-decoration: none;
}

/* .blg_iframe { */
/*   width: 1500px; */
/*   height: 1000px; */
/*   border: 0px solid var(--green); */
/* } */


.clhr {
  pointer-events: none;
  cursor: default;
}

code {
  background-color: var(--bg1);
  color: var(--fg0);
  font-size: var(--general_font_size);
}

.topnav {
  background-color: var(--bg_dim);
  overflow: hidden;
  text-align: center;
}

.topnav a {
  font-family: "Lucida Console", "Courier New", monospace;
  color: var(--fg0);
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 23px;

  display: inline-block;
  list-style-type: none;
}

/* Change the color of links on hover */
.topnav a:hover {
  color: var(--yellow);
}


/*
highlight.js
*/
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: var(--bg_dim);
}

.hljs,
.hljs-subst {
  color: var(--fg0);
}

/* Gruvbox Red */
.hljs-deletion,
.hljs-formula,
.hljs-keyword,
.hljs-link,
.hljs-selector-tag {
  color: var(--red);
}

/* Gruvbox Blue */
.hljs-built_in,
.hljs-emphasis,
.hljs-name,
.hljs-quote,
.hljs-strong,
.hljs-title,
.hljs-variable {
  color: var(--blue);
}

/* Gruvbox Yellow */
.hljs-attr,
.hljs-params,
.hljs-template-tag,
.hljs-type {
  color: var(--yellow);
}

/* Gruvbox Purple */
.hljs-builtin-name,
.hljs-doctag,
.hljs-literal,
.hljs-number {
  color: var(--purple);
}

/* Gruvbox Orange */
.hljs-code,
.hljs-meta,
.hljs-regexp,
.hljs-selector-id,
.hljs-template-variable {
  color: var(--orange);
}

/* Gruvbox Green */
.hljs-addition,
.hljs-meta-string,
.hljs-section,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-string,
.hljs-symbol {
  color: var(--green);
}

/* Gruvbox Aqua */
.hljs-attribute,
.hljs-bullet,
.hljs-class,
.hljs-function,
.hljs-function .hljs-keyword,
.hljs-meta-keyword,
.hljs-selector-pseudo,
.hljs-tag {
  color: var(--aqua);
}

/* Gruvbox Gray */
.hljs-comment {
  color: var(--grey0);
}

/* Gruvbox Purple */
.hljs-link_label,
.hljs-literal,
.hljs-number {
  color: var(--purple);
}

.hljs-comment,
.hljs-emphasis {
  font-style: italic;
}

.hljs-section,
.hljs-strong,
.hljs-tag {
  font-weight: bold;
}

/* expand/collapse */
.panel {
  width: 650px;
  height: 0px;
  /* border: 1px solid blue; */
  /* background-color: var(--bg0); */
  /* transition: all 0.3s; */
  display: block;
  overflow-x: auto;
  margin-left: auto;
  margin-right: auto;
  /* height: 135px; */
  /* border: 1px solid var(--bg_dim); */
}

.panel-elem {
  color: rgba(0,0,0,0);
}

.expanded {
  height: 40px;
  background-color: var(--bg_dim);
}

.revealed {
  color: var(--fg0)
}