example-frame { display: flex; flex-direction: row-reverse; align-items: flex-start; column-gap: 10px; margin-inline: auto; width: 720px; }
example-panel { display: flex; flex-direction: column; justify-content: space-around; gap: 5px; }
example-img { display: block; background-image: url("../images/e3.png"); width: 604px; min-width: 604px; height: 456px; min-height: 456px; position: relative; background-repeat: no-repeat; background-size: contain; }
[lang="en"] example-img::before { content: "Using Controls"; left: 1px; position: absolute; top: -40px; font-size: 28px; text-shadow: rgb(150, 150, 150) 1px 1px 1px; font-style: oblique; }
[lang="he"] example-img::after { content: "שימוש בלוח הפיקוד"; right: 1px; position: absolute; top: -40px; font-size: 28px; text-shadow: rgb(150, 150, 150) 1px 1px 1px; font-style: oblique; }
example-item { display: none; border: 3px solid rgb(255, 0, 0); border-radius: 50px; position: absolute; }
.save { width: 60px; height: 60px; left: 1px; top: 1px; }
.sel { width: 60px; height: 60px; left: 74px; top: 1px; }
.pro { width: 60px; height: 60px; left: 161px; top: 1px; }
.type { width: 149px; height: 42px; left: 242px; top: 7px; }
.sort { width: 119px; height: 42px; left: 392px; top: 7px; }
.def { width: 32px; height: 32px; left: 568px; top: 1px; }
.file { width: 115px; height: 15px; left: 115px; top: 77px; corner-shape: bevel square square bevel; }
.selector { width: 60px; height: 15px; left: 88px; top: 105px; corner-shape: bevel square square bevel; }
.property { width: 78px; height: 27px; left: 2px; top: 136px; }
.value { width: 260px; height: 36px; left: 91px; top: 134px; }
img.contextmenu { position: absolute; left: 6px; top: -4px; display: none; border-radius: 4px; outline: rgb(255, 0, 0) solid 3px; }
img.edit { position: absolute; left: 1px; top: 183px; display: none; border-radius: 4px; outline: rgb(255, 0, 0) solid 3px; padding-right: 69px; background-color: rgb(255, 255, 255); }
img.list { position: absolute; left: 90px; top: 133px; display: none; border-radius: 4px; outline: rgb(255, 0, 0) solid 3px; }
img.color { position: absolute; left: 0px; top: -4px; display: none; border-radius: 4px; outline: rgba(255, 0, 0, 0) solid 3px; }
label { box-shadow: rgb(173, 173, 173) 1px 1px 1px 1px; border-radius: 4px; padding: 0px 0px 0px 3px; width: 125px; white-space: pre; text-transform: capitalize; user-select: none; direction: ltr; text-align: center; }
label:hover { background-color: rgb(0, 110, 255); color: rgb(255, 255, 255); cursor: pointer; }

input[type="radio"] { display: none; }
example-frame:has([data-type="save"]:checked) .save { display: inline-block; }
example-frame:has([data-type="sel"]:checked) .sel { display: inline-block; }
example-frame:has([data-type="pro"]:checked) .pro { display: inline-block; }
example-frame:has([data-type="type"]:checked) .type { display: inline-block; }
example-frame:has([data-type="sort"]:checked) .sort { display: inline-block; }
example-frame:has([data-type="def"]:checked) .def { display: inline-block; }
example-frame:has([data-type="file"]:checked) .file { display: inline-block; }
example-frame:has([data-type="selector"]:checked) .selector { display: inline-block; }
example-frame:has([data-type="property"]:checked) .property { display: inline-block; }
example-frame:has([data-type="value"]:checked) .value { display: inline-block; }
example-frame:has([data-type="contextmenu"]:checked) .contextmenu { display: inline-block; }
example-frame:has([data-type="edit"]:checked) .edit { display: inline-block; }
example-frame:has([data-type="list"]:checked) .list { display: inline-block; }
example-frame:has([data-type="color"]:checked) .color { display: inline-block; }
label:has(input[type="radio"]:checked) { font-weight: bold; box-shadow: rgb(173, 173, 173) 1px 1px 1px 1px inset; }
label:has(input[type="radio"]:checked):hover { background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); cursor: default; }
@media screen and (max-width: 760px) {
  example-frame { display: flex; flex-direction: column; width: 310px; }
  example-panel { display: flex; flex-flow: wrap; justify-content: space-evenly; }
  example-img { height: 231px; min-height: 231px; width: 306px; min-width: 306px; }
  .save { width: 26px; height: 26px; left: 3px; top: 3px; }
  .sel { width: 39px; height: 26px; left: 35px; top: 3px; }
  .pro { width: 29px; height: 29px; left: 81px; top: 2px; }
  .type { width: 79px; height: 20px; left: 121px; top: 3px; }
  .sort { width: 66px; height: 20px; left: 197px; top: 4px; }
  .def { width: 20px; height: 20px; left: 284px; top: 0px; }
  .file { width: 60px; height: 8px; left: 60px; top: 38px; corner-shape: bevel square square bevel; }
  .selector { width: 60px; height: 9px; left: 40px; top: 52px; corner-shape: bevel square square bevel; }
  .property { width: 46px; height: 18px; left: 0px; top: 67px; }
  .value { width: 132px; height: 18px; left: 42px; top: 67px; }
  img.contextmenu { width: 170px; height: 116px; left: 2px; top: 0px; }
  img.edit { width: 111px; height: 24px; left: 0px; top: 91px; }
  img.list { width: 127px; height: 296px; left: 46px; top: 67px; }
  img.color { width: 306px; height: 248px; left: 0px; top: 0px; }
}