.callout { max-width: 700px; --callout-color: hsl(207, 14%, 62%); --callout-background: ; --callout-border: 1px solid hsl(205, 15%, 33%); --callout-radius: 8px; --callout-padding: 1.2vh; border: var(--callout-border); border-radius: var(--callout-radius); background: var(--callout-background); margin: 1vh; } .callout code, .callout pre { border: none; } .callout-content { padding: var(--callout-padding); } .callout-content:first-child, .callout-content:only-child { margin-block-start: 0; } .callout-content:last-child, .callout-content:only-child { margin-block-end: 0; } .callout-indicator { display: flex; align-items: center; padding: var(--callout-padding) var(--callout-padding) 0; } .callout-hint { margin-inline-end: calc(var(--callout-padding) / 4); color: var(--callout-color); } .callout-title { margin-inline-start: calc(var(--callout-padding) / 4); color: var(--callout-color); font-size: 0.9em; font-weight: bold; letter-spacing: 0.04em; } .callout-note { --callout-background: hsl(0, 0%, 32%, 0.05); --callout-color: hsl(0, 0%, 92%, 0.6); --callout-border: 1px solid hsl(0, 0%, 66%, 0.25); } .callout-commend { --callout-background: hsl(153, 47%, 49%, 0.05); --callout-color: hsl(153, 62%, 54%); --callout-border: 1px solid hsl(153, 47%, 49%, 0.25); } .callout-warn { --callout-background: hsl(45, 100%, 55%, 0.05); --callout-color: hsl(45, 97%, 66%); --callout-border: 1px solid hsl(45, 100%, 55%, 0.25); } .callout-deter { --callout-background: hsl(353, 83%, 58%, 0.05); --callout-color: hsl(341, 89%, 63%); --callout-border: 1px solid hsl(353, 83%, 58%, 0.25); } .callout-assert { --callout-background: rgba(47, 131, 157, 0.05); --callout-color: hsl(201, 89%, 63%); --callout-border: 1px solid hsl(195, 61%, 56%, 0.25); }