.push-below {
  margin-bottom: 40px;
}

#global-wrapper {
  display: flex;
  flex-direction: row;
}

#hyperbar {
  width: 300px;
  height: auto;
  position: fixed;
  top: 71px;
  left: 0;
  bottom: 0;

  background-color: rgb(39, 39, 39);
  color: rgb(228, 228, 228);

  overflow-y: scroll;

  z-index: 1;
}

.h-page-title {
  background-color: #3a3a3a;
  border: 1px solid rgb(80, 80, 80);

  margin: 40px;
  padding: 10px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.h-list {
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin: 40px;
}

.h-item {
  background-color: rgb(58, 58, 58);
  border: 1px solid rgb(73, 73, 73);

  padding: 15px;

  cursor: pointer;
}

.h-item:not(.child-of):hover {
  background-color: rgb(68, 68, 68);
}

.h-item.child-of {
  background-color: rgb(80, 80, 80);
}

.h-item.child-of:hover {
  background-color: rgb(87, 87, 87);
}

.h-item.child-of.hidden {
  display: none;
}

.h-item.active {
  background-color: rgb(110, 110, 110);
}

.h-item.active:hover {
  background-color: rgb(119, 119, 119);
}

#hyperbar-btn {
  display: none;
  position: fixed;
  bottom: 15px;
  left: 15px;

  aspect-ratio: 1/1;
  touch-action: manipulation;
}

@media (max-width: 550px) {
  .code-block {
    padding: 30px;
    font-size: 12px;
  }
}

@media(max-width: 940px) {
  #hyperbar {
    display: none;
  }

  #global {
    margin-left: 0px !important;
  }

  #hyperbar-btn {
    display: block;
  }
}

@media(min-width: 941px) {
  #hyperbar {
    display: block;
  }
}

.parent-title:not(.no-children) {
  margin-bottom: 10px;
}

#global {
  margin-left: 300px;

  width: 100%;
}

#header {
  z-index: 2;
}

#guide-wrapper {
  background-color: rgb(199, 199, 199);

  padding: 200px 40px;
}

.user-guide h1 {
  font-size: 50px;
}

.user-guide h2 {
  font-size: 40px;
}

.user-guide {
  font-size: 28px;
  line-height: 1.6;
}

.code-block {
  padding: 50px;
  background-color: rgb(31, 31, 31);
  margin: 50px 0px;

  color: rgb(87, 87, 87);
}

.executable {
  color: #FFD600;
}
.conditional {
  color: #39ff14;
}
.formula {
  color: cyan;
}

@media (max-width: 722px) {
  .user-guide h1 {
    font-size: 30px;
  }

  .user-guide h2 {
    font-size: 20px;
  }

  .user-guide {
    font-size: 18px;
  }
}