aside{
        width: min(40ch,20svw);
        height: 100%;
        overflow-y: auto;
    }

.documentation-layout .bk-page{
    
   
    
    section {
        padding: 1rem;
        max-width: 1200px;
        border: 1px solid var(--border-color);
        margin: 1rem auto;

    }

    h2 {
        margin-top:2ch;
        color: var(--accent);
        background-color: var(--bg-level-1);
        padding: 1ch;
    }

    h3 {
        color: var(--fc);
        background-color: var(--bg-level-3);
        padding: 1ch;
    }
    h4 {
        color: var(--fc);
        background-color: var(--bg-level-3);
        padding: 1ch;
    }
    h5{
        padding: 1ch;
        background-color: var(--bg-level-3);
        color: var(--fc);
    }
    p {
        padding: 1ch;
        line-height: 2rem;
    }

    ul {
       padding: 1rem 2rem;
        list-style-type: '🟣 ';
        li{
            line-height: 2rem;
        }
    }
    ul.arrows{
        list-style-type:"➡️" ;
    }
    
    ul.info{
        list-style-type: "ℹ️";
    }
    ul.attention{
        list-style-type: "⚠️";
    }
    ul.check{
        list-style-type: "☑️";
    }
    ul.none{
        list-style-type: none;
    }

    strong {
        color: var(--warning);
    }

    em {
        color: hotpink;
    }

    pre {
        background-color: light-dark(#333,black);
        color: light-dark(white,white)!important;
        padding: 1ch;
        width: 100%;
        overflow-x: auto;
        font-size: 0.8rem;
    }
    
    code{
        padding: 0.3ch 1ch;
        border-radius: 1ch;
        width: 100%;
        overflow-x: auto;
        line-height: 1;
        font-size: 0.8rem;
    }
    p>code,li>code{
        background-color: var(--info);
        color:var(--info-text);
    }
   .get-started {
       background-color: green;
       color: white;
   }

    .Program p:nth-child(-n+4),
    .Program p:nth-last-child(-n+2) {
        display: none;
        color: red;
    }
}



.code-sample{
    background-color: #262626;
    overflow-x: auto;
    max-width: 1000px;
    margin: 1rem auto;
    width: 100%;
    color:white;
    padding: 1rem 3rem;
    span {
        white-space: nowrap;
    }
   
    p{
        padding: 0!important;
        margin: 0;
        text-wrap: nowrap;
        width: 100%;
    }
    p:has(.comment){
        padding: 1rem 0 0 0 !important;
    }
    .keyword{
        color:white;
    }
    .keyword:is(.NewKeyword,.ReturnKeyword,.InterfaceKeyword,.PublicKeyword,.StructKeyword,.ReadOnlyKeyword,.RecordKeyword,.ClassKeyword, .PartialKeyword, .StaticKeyword, .VoidKeyword, .AsyncKeyword)
    {
        color:dodgerblue;
        padding-right: 1ch;
    }
    .keyword:is(.StringKeyword, .IntKeyword, .DoubleKeyword, .BoolKeyword, .ObjectKeyword){
        color:dodgerblue;
    }
    .text:is(.ColonToken,.SemicolonToken, .CommaToken, .OpenBraceToken, .CloseBraceToken){
        padding-right: 1ch;
    }
    .identifier:is(.IdentifierToken){
        color: oklch(0.847 0.179 299.137);
    }
    .identifier:is(.class-name, .method-name, .property-name, .namespace-name){
        color: oklch(0.774 0.199 297.739);
    }
    .identifier:is(.parameter-name,.parameter){
        color:white;
        padding-left: 1ch ;
    }
    .text:is(.InterpolatedStringStartToken,.InterpolatedStringEndToken,.OpenBraceToken,.CloseBraceToken,.NumericLiteralToken),
    .string-literal{
        color:var(--warning);
    }
    .identifier:is(.identifier.member){
        color: deepskyblue;
    }

    .comment{
        color: lightgreen;
        display: block;
        padding-left: 8rem;
    }
    .property-name,.namespace-name{
        padding-left: 1ch;
        padding-right: 1ch;
        font-weight: bold;
    }
    .method-name{
        padding-left: 1ch;
        font-weight: bold;
    }
    .var, .AwaitKeyword,.IsKeyword ,.GetKeyword,.SetKeyword  ,.AbstractKeyword , .OutKeyword,.PrivateKeyword,.EnumKeyword,.UsingKeyword{
        color:dodgerblue!important;
        padding-right: 1ch;
    }
    .IsKeyword{
        padding-left: 1ch;
    }
    .NullKeyword,.ThisKeyword,.ObjectKeyword{
        color:dodgerblue!important;
    }
    .cancellationToken{
        color:white!important;
    }
    span.GreaterThanToken {
        display: inline-block;
        font-size: inherit;
        line-height: 1;
    }

   .Exception{
       padding-right: 1ch;
         color: deepskyblue!important;
   }

   

}

.html-code-sample{
    color: white!important;
    pre {
        font-size: 14px;
        background-color: #1e1e1e;
        color: #d4d4d4;
        padding: 1rem;
        border-radius: 6px;
        white-space: pre-wrap;

        .keyword {
            color: #c586c0;
        }

        .razor-expression {
            color: #9cdcfe;
        }

        .tag {
            color: #569cd6;
        }

        .sign {
            color: #d4d4d4;
        }

        .attr-name {
            color: #9cdcfe;
        }

        .attr-value {
            color: #ce9178;
        }
    }
}