@font-face {
  font-family: 'kilo';
  src: url(/kilo/kilo-webfont.woff);}
@font-face {
  font-family: 'notepadfont';
  src: url(/notepadfont/notepadfont-webfont.woff);}
@font-face {
  font-family: 'distro';
  src: url(distro/distro2_bats-webfont.woff);}
@font-face{ 
  font-family: 'notepadfont'; 
  src: url('/notepadfont/notepadfont-webfont.eot'); 
  src: url('/notepadfont/notepadfont-webfont.eot?#iefix') 
  format('embedded-opentype'), url('/notepadfont/notepadfont-webfont.woff') format('woff'), url('/notepadfont/notepadfont-webfont.ttf') format('truetype'), url('/notepadfont/notepadfont-webfont.svg#webfont') format('svg'); 
} 
@font-face {
  font-family: 'holyseeregular';
  src: url('/holysee/holysee-webfont.woff') format('woff');}

html{
  /*Set some global colors here for quick re-coloring of stuff!*/
  --bg-color: lightslategray;
  --darker-color: lightsteelblue;
  --lighter-color: floralwhite;
  --accent-color: darkslategrey;
  background-color: var(--bg-color);

  width: 100%;
  min-height: 100vh;
  position: relative;
}

body {
  color: black; /*text color*/
  font-family: notepadfont, serif;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  overflow-x: hidden;
}

.sidebar {
  z-index: 1;
  width:20%;
  height: 100vh;
  background-color: var(--lighter-color);
  position: fixed;
}

.container {
  position: absolute;
  right: 10vh;
  width: 60%;
  height: 70vh;
  background-color: var(--darker-color);
  padding: 10px;
  margin-top: 20px;
  }

#navheader{
  font-size: 1.2em;
  color: var(--accent-color);
  font-family: 'kilo';
}

#navbuttons{
  height: 20px;
  background-color: var(--darker-color);
  color: var(--accent-color);
  padding: 5px;
}

#navbuttons a{
  color: floralwhite;
}

#content{
  background-color: var(--lighter-color);
  overflow-y: scroll;
  height: 90%;
  padding-inline: 15px;
  padding-top: 10px;
  margin-top: 3%;
  
}

h4{
  margin-left:15px;
}