body {
  font-family: 'MetropolitanoRegular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: normal;
  font-style: normal;

}
.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}

#sidebar {
  min-width: 210px;
  max-width: 210px;
  min-height: 100vh;
  position: fixed;
  transition: all 0.3s;

  background: rgba(37,37,37,1);
  color: rgb(196, 215, 255)
}
#sidebar .sidebar-header {
  padding: 30px;
}
#sidebar i {
  color:azure;

}
#sidebar ul.components {
  border-bottom: 1px solid #5a5a5a;
}
#sidebar ul {
  padding: 0px;
  list-style: none;
}
#sidebar ul p {
  text-align: center;
  font-weight: bolder;
  font: 0.9rem;
  padding: 10px 0px 10px 0px;
}
#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}
#sidebar ul li a {
  color: rgb(239, 240, 255);
  background-color:rgb(54, 54, 54);
  text-shadow: 0 0 5px #000000;
}
#sidebar ul li a:hover {
  color: rgb(239, 240, 255);
  background: rgb(97, 97, 112);
  text-shadow: 0 0 5px #50546d;
  text-decoration: underline;
}
#sidebar.active {
  margin-left: -210px;
}
#content {
  min-height: 100vh;
  margin-left: 210px;

  background: rgb(37,37,37);
  background: linear-gradient(0deg, rgba(37,37,37,1) 0%, rgba(40,40,61,1) 58%, rgba(44,56,91,1) 99%);
  color: rgba(233, 233, 233, 0.89);
}
#content.shift {
  margin: 0;
}
/* inverses classes to show nav menu to work 
for smaller screens */
@media (max-width: 768px) {
  #sidebar {
    margin-left: -210px;
  }
  #content {
    margin-left: 0;
  }
  #sidebar.active {
    margin-left: 0;
  }
  #content.shift {
    margin-left: 210px;
  }
} 
#content h1 {
  text-shadow: 0 0 2px #C8C8C8;
  font-family: Inconsolata, monospace;
}
#content h2 {
   font-family: 'NaturalMonoAltRegular';
   font-weight: bolder;
   font-style: normal;

   padding-bottom: 7px;
}
#content button {
  color: rgb(239, 240, 255);
  background-color:rgb(54, 54, 54);
  text-shadow: 0 0 5px #000000;
}
#content button:hover {
  color: rgb(239, 240, 255);
  background: rgb(97, 97, 112);
  text-shadow: 0 0 5px #50546d;
}

.icon-lg {
  font-size: 5em;
}

.terminal-header {
  color: rgb(236, 236, 236);
  text-shadow: 0 0 2px rgb(206, 206, 206);
  font: 15px Inconsolata, monospace;
}

.terminal-style {
  background-color: black;

  color: white;
  text-shadow: 0 0 2px #C8C8C8;
  font: 0.9rem Inconsolata, monospace;

  min-height: 100vh;
  overflow-y: scroll;
}