visual-demonstration { display: block; background-color: rgb(255, 255, 255); position: relative; margin-top: 50px; padding-block: 0px 20px; margin-bottom: 30px; }
visual-demonstration::before { position: absolute; top: -40px; font-style: italic; text-transform: capitalize; text-decoration-line: underline; text-decoration-thickness: 3px; font-weight: normal; font-size: 20px; text-shadow: rgb(136, 136, 136) 1px 1px 1px; }
[lang="en"] visual-demonstration::before { content: "visual demonstration"; left: 1px; }
[lang="he"] visual-demonstration::before { content: "הדגמה חזותית"; right: 1px; }
demo-view { display: flex; margin-top: 15px; scroll-margin-top: 20px; row-gap: 5px; background-color: rgb(255, 255, 255); }
[lang="en"] demo-view { flex-direction: column; align-items: flex-start; }
[lang="he"] demo-view { flex-direction: column; align-items: flex-end; direction: ltr; }
demo-panel { display: flex; flex-direction: column; border: 2px solid rgb(186, 186, 186); border-radius: 4px; width: fit-content; padding: 26px 5px 7px; background-color: rgb(240, 240, 240); white-space: nowrap; position: relative; }
demo-panel::before { content: "Control Panel"; left: 1px; position: absolute; top: 1px; font-size: 16px; }
demo-tag { display: inline; position: relative; }
demo-tag::before { content: "Demo:"; font-size: 18px; left: 5px; position: absolute; top: 3px; }
demo-syntax { display: flex; margin: 30px 0px 10px; padding: 5px; border: 2px inset rgb(224, 224, 224); position: relative; white-space: pre-wrap; width: fit-content; background-color: rgb(255, 255, 255); }
demo-syntax::before { content: "Syntax:"; position: absolute; left: 1px; top: -28px; font-size: 18px; text-decoration-color: rgb(10, 10, 10); text-decoration-style: double; text-decoration-line: underline; font-style: italic; }
demo-wrapper { display: inline-block; position: relative; max-width: fit-content; width: fit-content; margin: 1px 0px; }
demo-wrapper::after { content: attr(title); position: absolute; left: 0px; top: -24px; display: inline-block; overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: pre-wrap; font-size: 16px; text-decoration-color: rgb(10, 10, 10); text-decoration-style: double; text-decoration-line: underline; max-width: fit-content; overflow-wrap: anywhere; height: 21px; font-style: italic; }
flex-flex { display: flex; }
inline-flex { display: inline-flex; }
block-block { display: block; }
inline-block { display: inline-block; }
inline-inline { display: inline; }
demo-view button { width: fit-content; }
code-button { display: block; width: fit-content; height: fit-content; background-color: rgb(71, 108, 255); box-shadow: rgb(173, 173, 173) 1px 1px 1px 1px; color: rgb(255, 255, 255); border-radius: 4px; padding: 3px 10px 0px; font-size: 18px; }
code-button:hover { color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); cursor: pointer; }
code-syntax { display: block; position: relative; white-space: pre; margin: 35px 0px 10px; width: fit-content; padding: 5px; border: 2px inset rgb(224, 224, 224); font-size: 14px; }
code-syntax::before { content: attr(title); position: absolute; left: 1px; top: -30px; display: inline-block; font-size: 18px; text-decoration-color: rgb(10, 10, 10); text-decoration-style: double; text-decoration-line: underline; font-style: italic; }
@media screen and (max-width: 360px) {
}