@keyframes fadein
{
  100%
  {
    opacity: 1;
  }
}

body
{
  font-family: Arial, sans-serif;
  margin: 0;
  display: flex;
  height: 100vh;
  width: 100vw;
  color: #e0e0e0;
  font-size: 18px;
  background-color: #181818;
  overflow: hidden;
}

#sidebar
{
  font-family: Consolas, monospace;
  min-width: 250px;
  width: 250px;
  height: 100vh;
  overflow-y: auto;
  padding: 10px;
  background-color: #1e1e1e;
}

#content
{
  flex-grow: 1;
  padding: 24px;
  overflow-y: auto;
}
.content
{
  display: none;
  margin-left: 24px;
  margin-bottom: 8px;
  white-space: nowrap;
}

.toggle
{
  cursor: pointer;
  color: #79a4ff;
}
.toggle:first-child
{
  margin-top: 0px;
}
.toggle:hover
{
  color: #4d7ee7;
}

.item
{
  cursor: pointer;
  color: #dbdbdb;
  margin: 5px 0;
  margin-top: 0px;
  margin-bottom: 0px;
}
.item.selected
{
  color: #d9a1eb;
  font-weight: bold;
}
.item:hover
{
  color: #d074ec;
}

.item.selected:hover
{
  color: #ba3de0;
}

iframe
{
  background-color: #181818;
}

h1, h2, h3, h4, h5, h6
{
  margin-top: 32px;
  margin-bottom: 0px;
}
h1:first-child
{
  margin-top: 0px;
  font-variant: small-caps;
}

table, th, td
{
  min-width: 150px;

  margin-top: 8px;
  margin-bottom: 20px;

  border: 1px solid rgb(68, 68, 68);
  border-collapse: collapse;
  padding: 8px;

  text-align: left;
}
th:not(:first-child)
{
  width: 300px;
}
th
{
  font-size: 20px;
  background-color: #1e1e1e;
}

i
{
  font-weight: bold;
  font-style: italic;
  color: #555;
  font-variant: small-caps;
  padding-right: 1px;
  font-size: 12px;
}

mark
{
  border-radius: 4px;
  background-color: rgb(53, 53, 53);
  color: rgb(184, 184, 184);
  padding: 2px;
}

pre
{
  margin-top: 8px;
}
.hljs
{
  border-radius: 8px;
}

img
{
  max-height: 400px;
  margin: 8px;
  margin-left: 0px;
  margin-bottom: 0px;
  border-radius: 12px;
}

.unimportant
{
  color: #888;
}

.icon:before
{
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  position: relative;
  top: 2px;
}
.icon-gml:before
{
  image-rendering: crisp-edges;
  background-image: url("assets/gml.png");
}
.icon-etc:before
{
  background-image: url("assets/etc.png");
}

a
{
  color: #d9a1eb;
  text-decoration: none;
}
a:hover
{
  color: #b148d4;
}