.callout {
    border-style: dashed;
    border-color: black;
    border-radius: 1rem;
    border-width: var(--border-width);
    padding: calc(var(--spacing) * 5) /* 1.25rem = 20px */;
    margin: calc(var(--spacing) * 2) /* 0.5rem = 8px */;
    margin-bottom: calc(var(--spacing) * 5);
    background-image: url(/assets/img/noise.webp);
}


.callout-title {
    font-size: var(--font-size-bigish);
    line-height: var(--line-height-title);
    font-weight: bold;
}


.callout-title-icon {
    display: inline-block;
    place-self: end;
    margin: calc(var(--spacing) * 1);
    margin-right: calc(var(--spacing) * 2);
    vertical-align: middle;

}


.callout-title-inner {
    display: inline-block;
    vertical-align: middle;
}


.lucide {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
}


.callout[data-callout="warning"] {
    color: var(--color-callout-warning) ;
    background-color: var(--color-callout-background-warning);

    @media (prefers-color-scheme: dark) {
        color: var(--color-callout-warning) ;
        background-color: var(--color-callout-background-warning);
    }
}


.callout[data-callout="danger"] {
    color: var(--color-callout-danger) ;
    background-color: var(--color-callout-background-danger);
    @media (prefers-color-scheme : dark) {
        color: var(--color-callout-warning) ;
        background-color: var(--color-callout-background-danger);
    }
}


.callout[data-callout="info"] {
    color: var(--color-callout-info);
    background-color: var(--color-callout-background-info);
    @media (prefers-color-scheme : dark) {
        color: var(--color-callout-info) ;
        background-color: var(--color-callout-background-info);
    }

}


.callout a {
    color: inherit;
    &:hover {
        @media (hover: hover) {
            color: var(--color-link-hover);
        }
    }
}


.content {
    margin-block: calc(var(--spacing) * 10);
    margin-inline: calc(var(--spacing) * 5);
}


article img {
    border-radius: var(--radius-box);
    max-width: 90%;
    margin-inline: auto;
    display: block;
    justify-self: center;
    height: auto;
    object-fit: contain;
    max-height: 100%;

}


.thumbnail {
    aspect-ratio: 16/9;
    border-radius: var(--radius-box);
    max-block-size: 20rem;
    max-inline-size: 35rem;
    inline-size: 100%;
    block-size: 100%;

}


#title {
    font-size: var(--text-size-title);
    text-align: center;
    font-weight: bolder;
}


#subtitle {
    text-align: center;
}


.content a:not(.callout a){
    color: var(--color-link);
    &:hover {
        @media (hover: hover) {
        color: var(--color-link-hover);
        text-decoration-line: underline;
        text-decoration-style: var(--hover-decoration) ;
        }
   }
@media (prefers-color-scheme: dark) {
    color: var(--color-link);
    &:hover {
        @media (hover: hover) {
        color: var(--color-link-hover);
            }
        }
   }


}


.switcher {
    container-type: inline-size;
}


#table-of-contents  {
    flex-shrink: 1;
    flex-grow: 0.5;
    flex-basis: 20rem;
    max-height: 55rem;
    overflow-y: auto;
    background-color: var(--color-secondary-background);
    padding: calc(var(--spacing)*2);
    height: fit-content;
    order: 0;



}


@container (width >= 61.7rem) {
    #table-of-contents {
        position: sticky;
        top: calc(var(--spacing) * 5);
        order: 9;
    }
}


.switcher > #table-of-contents {
    --treshold: 50rem;

}


#table-of-contents summary{

    &:hover {
        cursor: pointer;
    }
}


.content article {
    margin-top: calc(var(--spacing) * 10);
    max-width: 70rem;
    overflow-wrap: break-word;
    width: 100%;

}


article > div {
    display: grid;
    justify-content: center;
    max-inline-size: 120ch;
 /*   grid-template-columns: 100%;
    @media (width >= 50rem) {
        grid-template-columns: 60% 25%;
        gap: calc(var(--spacing) * 5);
    }
*/
}


#post {

    flex-grow: 5;
    width: 100%;
    max-inline-size: 65ch;
    flex-basis: 70ch;
    @media (width >= 50rem /* 1024px */) {
        grid-column: 1;
        grid-row: 1;
    }
}