body {
   background-color:rgb(235 235 243);
}

.navbar {
   position: sticky;
   top: 0;
   z-index: 2;
   box-shadow: 0 0 5px var(--color-neutral-dark);
}
.hero {
   text-align:center;
   font-size:2em;
}


.docs-nav {
   position:sticky;
   top:calc(var(--header-height) + 1em);
   max-height: calc(100vh - var(--header-height) - 1em);
   overflow:auto;
}
/*.docs-nav a {
   color:var(--color-main-medium);
}
.docs-nav a:hover {
   background-color:var(--color-white);
   color:var(--color-main-medium);
}*/

code.output {
    margin-left: 10px;
    width: calc(100% - 10px);
}
code.block:has(+code.output) {
   margin-bottom:0.2em;
}
code.block+code.output {
   margin-top:0.2em;
   padding-block: 0.4em;
}
code.output::after {
   content: 'output';
   position:absolute;
   top:5px;
   right:5px;
   font-size:8px;
}

.well {
   border-width:1px;
   background-color:#f6faff;
}
.well h3 {
   margin-block-start: 0;
}
.well~.well {
   margin-block-start: 0.5em;
}

.card h3 {
   padding-inline-start: 0.5em;
}
.card h3:not(:first-child) {
   padding-block-start:0.5em;
   border-block-start: 5px  solid #ebebf3;
}


.card, .card.soft {
   overflow:clip;
}
.card.body {
   transition:all 0.3s;
}
.card.body:first-of-type {
   margin-block-start:0;
}
.card.body:last-of-type {
   margin-block-end:0;
}

@media (max-width:960px) {
   .card.main {
      padding:5px;
   }
   .well,
   .card-section {
      padding:10px;
   }
}



.body.target,
.body:target {
   --shadow-spread: 5px;
   --shadow-opacity: .2;
}