main{
    width: calc(100% - var(--sidebar-width));
    height: fit-content;
    position: absolute;
    right: 0;
    top: var(--navigation-height);

    display: flex;
    align-items: center;
    justify-self: center;
    flex-direction: column;
}

main *{
  color: var(--text-secondary);
}

section{
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 10px;
}

.docs-content{
  width: calc(100% - 80px);
  text-align: left;
  align-items: start;
  padding: 0;
}

.docs-header{
    width: 100%;
    max-height: var(--docs-header-height);
}

.docs-cards{
    flex-direction: row;
}

.docs-banner{
    width: calc(100% - 20px) !important;
    height: var(--docs-header-height);
    object-fit: cover;
    border-radius: var(--ui-rounding);
}


.markdown {
  width: calc(100% - 20px);
  line-height: 1.75;
  text-align: left;
}

.markdown h2, .markdown h3 {
  margin-top: 2em;
}

.markdown .anchor {
  margin-left: 8px;
  opacity: 0;
  text-decoration: none;
}

.markdown h2:hover .anchor {
  opacity: 1;
}

.callout {
  padding: 16px;
  border-left: 4px solid;
  border-radius: 6px;
  margin: 24px 0;

  background: 000;

  position: relative;

  overflow: hidden;
}

.callout .icon{
  height: 40px;
}

.callout.info {
  border-color: #0b70f5;
  background: #2e2e2e;
}

.callout.warning {
  border-color: #f59e0b;
  background: #2e2e2e;
}

.callout.danger {
  border-color: #fc4040;
  background: #2e2e2e;
}

.callout .icon{
  position: absolute;
  right: -10px;
  bottom: 15px;
  font-size: 50px;
  opacity: 0.1;
}

.code-block{
  background: #1e1e1e;
  border-radius: var(--ui-rounding);
  padding: 10px 20px;
  position: relative;
}

.code-copy{
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  opacity: 0.6;
  background: #0e0e0e;
  border-radius: var(--ui-rounding);
  height: 100%;
  aspect-ratio: 1/1;

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