@font-face {
  font-family: JBMono;
  src: url("../fonts/JetBrainsMono-Regular.woff2");
}
@font-face {
  font-family: JBMonoBold;
  src: url("../fonts/JetBrainsMono-Bold.woff2");
}

body {
  background-color: #262626;
  color: white;
  font-family: JBMono;
  overflow-x: hidden;
  margin: 0;
}
.banner {
  background: linear-gradient(
    90deg,
    #ea392fa8 0% 9.091%,
    #f28917a8 9.091% 18.182%,
    #eecb12a8 18.182% 27.273%,
    #78b82aa8 27.273% 36.364%,
    #4375caa8 36.364% 45.455%,
    #c346e3a8 45.455% 54.545%,
    #7bcce5a8 54.545% 63.636%,
    #eaeaeaa8 63.636% 72.727%,
    #f4aec8a8 72.727% 81.818%,
    #000000a8 81.818% 90.909%,
    #945516a8 90.909% 100%
  );
  backdrop-filter: contrast(0.6) brightness(1.4);
  height: 2px;
  position: relative;
  z-index: 3;
}

.topbar {
  background-color: #1a1a1a;
  overflow: hidden;
  border-bottom: 2px solid #141414;
  position: sticky;
  width: 100%;
  padding: 12px;
  font-family: JBMonoBold;
  top: 0;
  z-index: 3;
}
.title {
  vertical-align: middle;

  padding-left: 5px;
  color: #7386ff;
}

.desc {
  font-family: JBMono;
  vertical-align: middle;
  color: gray;
}

.content {
  padding-top: 25px;
  margin-left: 278px;
  padding: 20px;
  font-family: JBMono;
}

.content h2 {
  color: #7d7bed;
  font-family: JBMonoBold;
}

.content h3 {
  color: #5b599c;
  font-family: JBMonoBold;
}

.sidebar {
  font-family: JBMono;
  height: 100%;
  width: 250px;
  position: fixed;

  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;

  border-right: 2px solid #1f1f1f;
  padding-top: 60px;
  padding-right: 20px;
  z-index: 2;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.nav-mobile {
  background-color: #1f1f1f;
  padding-top: 25px;
  padding-right: 120px;
  padding-bottom: 25px;
  padding-left: 25px;

  text-align: left;

  display: none;
}

ul li {
  font-family: JBMono;
  color: white;
  list-style-type: none;
}

ul li:before {
  content: "";
}

.mobile-nav-show {
  display: none;
}

pre {
  overflow: auto;
  padding: 16px;
  background-color: #1a1a1a;
  color: #a5a5a5;
  border-radius: 10px;
  border: 2px solid rgb(32, 32, 32);
  line-height: 1.45;
}

a {
  color: gray;
  text-decoration: none;
  font-weight: bold;
}

@media screen and (max-width: 600px) {
  .sidebar {
    display: none;
  }

  .mobile-nav-show {
    display: block;
  }

  .content {
    margin-left: 10px;
  }
}