#documentation-page {
  display: flex;
  max-height: 100vh;
  overflow: hidden;
  gap: 1rem;
}

#documentation-sidebar {
  padding: var(--margin-4);
  background-color: var(--secondary-color);
  max-width: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#documentation-sidebar .logo-container {
  display: flex;
  justify-content: center;
}

#documentation-sidebar img {
  max-width: 200px;
  max-height: 100px;
  margin: 0 auto;
}

#documentation-sidebar h2 {
  margin: 0;
}

#documentation-page .languages-language,
#documentation-page .languages-selected {
  text-transform: uppercase;
}

#documentation-page .versions-title,
#documentation-page .languages-title {
  padding: var(--margin-0) 0;
  font-weight: 600;
}

#documentation-page .versions-selected,
#documentation-page .languages-selected {
  color: var(--branding-color);
  font-weight: 600;
  pointer-events: none;
}

#documentation-page .versions-version,
#documentation-page .languages-language {
  color: var(--quaternary-color);
  padding: var(--margin-0) 0;
  cursor: pointer;
}

#documentation-page .sidebar-title {
  padding: var(--margin-0) 0;
  font-weight: 600;
  cursor: pointer;
}

#documentation-page .sidebar-subtitle {
  padding: var(--margin-0) 0;
  cursor: pointer;
}

#documentation-page .sidebar-title:hover,
#documentation-page .sidebar-subtitle:hover,
#documentation-page .versions-version:hover {
  color: var(--branding-color);
}

#documentation-container {
  flex: 1;
  overflow-y: auto;
}

#documentation-page pre {
  background-color: var(--quaternary-color);
  color: var(--primary-color);
  padding: var(--margin-4);
  border-radius: var(--small-round);
  margin: var(--margin-3) 0;
  font-family: "steradian";
  font-weight: 300;
}

#documentation-page pre .comment {
  color: var(--info-color);
}

#documentation-page pre.json {
  color: var(--quaternary-color);
  background-color: var(--info-color);
}

#documentation-page .warning-container {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  max-width: 1000px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: var(--margin-4) var(--margin-4) 0 var(--margin-4);
}

#documentation-page .warning-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  background-color: #fff3cd;
  padding: var(--margin-4);
  margin: 0;
  border-radius: var(--small-round);
  font-weight: 600;
  color: #856404;
  --c3d-icon-color: #856404;
}

#documentation-page .container {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  max-width: 1000px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: var(--margin-4);
}

/* .doc-block {
  margin: 5rem 0;
} */

#documentation-page .information-block {
  background-color: var(--info-color);
  padding: var(--margin-4);
  border-radius: var(--small-round);
  margin: var(--margin-3) 0;
}

/*Media queries*/
@media (max-width: 1200px) {
  #documentation-sidebar {
    max-width: 300px;
  }
}

@media (max-width: 576px) {
  #documentation-sidebar {
    display: none;
  }
}