body {
  max-width: 64em;
  margin: 0 auto;
  font-family: "IBM Plex Sans Arabic", sans-serif;
}

input {
  width: 100%;
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 1em;
}

a { color: blue; }


html { background-color: #222; color: #ddd; }
a { color: #99f; }



  
.specialKey,
.specialKey rect,
.specialKey path {
fill: #e4e4e4;
}
text {
fill: #333;
font: normal 20px sans-serif;
text-align: center;
}
#Backspace text {
font-size: 12px;
}


#Escape { display: none; }

#row_AE { transform: translate(4px, 4px); }
#row_AD { transform: translate(4px, 64px); }
#row_AC { transform: translate(4px, 124px); }
#row_AB { transform: translate(4px, 184px); }
#row_AA { transform: translate(4px, 244px); }

/* Backslash + Enter */
#Enter path.alt,
#Enter     .iso,
#Backslash .iso,
.alt #Enter rect.ansi,
.iso #Enter rect.ansi,
.iso #Enter text.ansi,
.alt #Backslash .ansi,
.iso #Backslash .ansi { display: none; }
#Enter text.ansi,
.alt #Enter     .alt,
.iso #Enter     .iso,
.iso #Backslash .iso { display: block; }
.iso #Backslash { transform: translate(765px, 60px); }
.alt #Backslash { transform: translate(780px, -60px); }

/* Backspace + IntlYen */
#IntlYen, #Backspace .alt,
.intlYen  #Backspace .ansi { display: none; }
.intlYen  #Backspace .alt,
.intlYen  #IntlYen { display: block; }

/* ShiftLeft + IntlBackslash */
#IntlBackslash, #ShiftLeft .iso,
.intlBackslash  #ShiftLeft .ansi { display: none; }
.intlBackslash  #ShiftLeft .iso,
.intlBackslash  #IntlBackslash { display: block; }

/* ShiftRight + IntlRo */
#IntlRo, #ShiftRight .abnt,
.intlRo  #ShiftRight .ansi { display: none; }
.intlRo  #ShiftRight .abnt,
.intlRo  #IntlRo { display: block; }


.specialKey   .ergo,
.specialKey   .ol60,
.specialKey   .ol50,
.specialKey   .ol40,
#Space        .ol60,
#Space        .ol50,
#Space        .ol40,
#Backquote    .ol60,
#BracketRight .ol60,
#Equal        .ol60,
.ergo #CapsLock,
.ergo #Space      rect,
.ergo #Backslash  rect,
.ergo .specialKey rect,
.ergo .specialKey text { display: none; }
.ol50 #Escape,
.ol40 #Escape,
.ol60 #Space        .ol60,
.ol50 #Space        .ol50,
.ol40 #Space        .ol40,
.ol60 #Backquote    .ol60,
.ol60 #BracketRight .ol60,
.ol60 #Backslash    .ol60,
.ol60 #Equal        .ol60,
.ol60 .specialKey   .ol60,
.ol50 .specialKey   .ol50,
.ol40 .specialKey   .ol40,
.ergo .specialKey   .ergo { display: block; }

.ol50 .pinkyKey, .ol50 #ContextMenu,
.ol40 .pinkyKey, .ol40 #ContextMenu,
.ol40 #row_AE .numberKey { display: none; }

.ergo #row_AE       { transform: translate(94px, 4px); }
.ergo #row_AD       { transform: translate(64px, 64px); }
.ergo #row_AC       { transform: translate(49px, 124px); }
.ergo #row_AB       { transform: translate(19px, 184px); }

.ergo #Tab          { transform: translate(15px, 0px); }
.ergo #ShiftLeft    { transform: translate(60px, 0px); }
.ergo #ControlLeft  { transform: translate(75px, 0px); }
.ergo #MetaLeft     { transform: translate(150px, 0px); }
.ergo #AltLeft      { transform: translate(240px, 0px); }
.ergo #Space        { transform: translate(315px, 0px); }
.ergo #AltRight     { transform: translate(540px, 0px); }
.ergo #MetaRight    { transform: translate(630px, 0px); }
.ergo #ControlRight { transform: translate(750px, 0px); }

.ergo .left         { transform: translate(-15px, 0px); }
.ergo .right        { transform: translate(15px, 0px); }

.ol60 .left         { transform: translate(-75px, 0px); }
.ol60 #ControlRight { transform: translate(810px, 0px); }
.ol60 #Backquote    { transform: translate(-15px, 0px); }
.ol60 #ShiftRight   { transform: translate(795px, 0px); }
.ol60 #ContextMenu  { transform: translate(750px, 0px); }
.ol60 #Backslash    { transform: translate(690px, 120px); }
.ol60 #Backspace    { transform: translate(277.5px, 60px); }
.ol60 #Enter        { transform: translate(322.5px, 60px); }

.ol50 #Escape       { transform: translate(-15px, 0px); }
.ol50 #Backspace    { transform: translate(660px, 0px); }
.ol50 #Enter        { transform: translate(705px, -60px); }

.ol40 #Escape       { transform: translate(-15px, 120px); }
.ol40 #Backspace    { transform: translate(660px, 60px); }
.ol40 #Enter        { transform: translate(705px, 0px); }

[platform="gnu"].ergo .specialKey .win,
[platform="gnu"].ergo .specialKey .mac,
[platform="win"].ergo .specialKey .gnu,
[platform="win"].ergo .specialKey .mac { display: none; }
.ergo .specialKey .mac,
[platform="gnu"].ergo .specialKey .gnu,
[platform="win"].ergo .specialKey .win { display: block; }

/* swap Alt/Meta for MacOSX */
[platform="gnu"].ergo #MetaLeft,
[platform="win"].ergo #MetaLeft,
              .ergo #AltLeft   { transform: translate(150px, 0px); }
[platform="gnu"].ergo #AltLeft,
[platform="win"].ergo #AltLeft,
              .ergo #MetaLeft  { transform: translate(240px, 0px); }
[platform="gnu"].ergo #AltRight,
[platform="win"].ergo #AltRight,
              .ergo #MetaRight { transform: translate(570px, 0px); }
[platform="gnu"].ergo #MetaRight,
[platform="win"].ergo #MetaRight,
              .ergo #AltRight  { transform: translate(660px, 0px); }


#NonConvert, #Convert, #KanaMode,
#Lang1, #Lang2,
#Space .jis,
#Space .ks,
.ks  #Space .ansi,
.ks  #Space .jis,
.jis #Space .ansi,
.jis #Space .ks { display: none; }
.ks  #Space .ks,
.jis #NonConvert, .jis #Convert, .jis #KanaMode,
.ks #Lang1, .ks #Lang2,
.jis #Space .jis { display: block; }

#Backquote .jis,
#CapsLock  .jis,
.jis #Backquote .ansi,
.jis #CapsLock  .ansi { display: none; }
.jis #Backquote .jis,
.jis #CapsLock .jis { display: block; }

#Lang1 text,
#Lang2 text,
#Convert text,
#NonConvert text,
.jis #CapsLock text { font-size: 14px; }
#KanaMode text,
.jis #Backquote text { font-size: 10px; }


.specialKey .win,
.specialKey .gnu {
display: none;
font-size: 14px;
}

/* display MacOSX by default */
[platform="gnu"] .specialKey .win,
[platform="gnu"] .specialKey .mac,
[platform="win"] .specialKey .gnu,
[platform="win"] .specialKey .mac { display: none; }
[platform="mac"] .specialKey .mac,
[platform="gnu"] .specialKey .gnu,
[platform="win"] .specialKey .win { display: block; }

/* swap Alt/Meta for MacOSX */
[platform="gnu"] #MetaLeft,
[platform="win"] #MetaLeft,  #AltLeft   { transform: translate(75px, 0px); }
[platform="gnu"] #AltLeft,
[platform="win"] #AltLeft,   #MetaLeft  { transform: translate(150px, 0px); }
[platform="gnu"] #AltRight,
[platform="win"] #AltRight,  #MetaRight { transform: translate(600px, 0px); }
[platform="gnu"] #MetaRight,
[platform="win"] #MetaRight, #AltRight  { transform: translate(675px, 0px); }


g:target rect, .press rect,
g:target path, .press path {
fill: #aad;
}

[theme="reach"] .pinkyKey  rect { fill: hsl(  0, 100%, 90%); }
[theme="reach"] .numberKey rect { fill: hsl( 42, 100%, 90%); }
[theme="reach"] .letterKey rect { fill: hsl(122, 100%, 90%); }
[theme="reach"] .homeKey   rect { fill: hsl(122, 100%, 75%); }
[theme="reach"] .press     rect { fill: #aaf; }

[theme="hints"] [finger="m1"] rect { fill: hsl(  0, 100%, 95%); }
[theme="hints"] [finger="l2"] rect { fill: hsl( 42, 100%, 85%); }
[theme="hints"] [finger="r2"] rect { fill: hsl( 61, 100%, 85%); }
[theme="hints"] [finger="l3"] rect,
[theme="hints"] [finger="r3"] rect { fill: hsl(136, 100%, 85%); }
[theme="hints"] [finger="l4"] rect,
[theme="hints"] [finger="r4"] rect { fill: hsl(200, 100%, 85%); }
[theme="hints"] [finger="l5"] rect,
[theme="hints"] [finger="r5"] rect { fill: hsl(230, 100%, 85%); }
[theme="hints"] .specialKey   rect,
[theme="hints"] .specialKey   path { fill: #e4e4e4; }
[theme="hints"] .hint         rect { fill: #a33; }
[theme="hints"] .press        rect { fill: #335; }
[theme="hints"] .press        text { fill: #fff; }
[theme="hints"] .hint text {
font-weight: bold;
fill: white;
}

/* dimmed AltGr + bold dead keys */
.level3, .level4 { fill: blue; opacity: .5; }
.level5, .level6 { fill: green; }
.deadKey {
fill: red;
font-size: 14px;
}
.diacritic  {
font-size: 20px;
font-weight: bolder;
}

/* hide Level4 (Shift+AltGr) unless AltGr is pressed */
.level4        { display: none; }
.altgr .level4 { display: block; }

/* highlight AltGr + Dead Keys */
.dk .level1, .altgr .level1,
.dk .level2, .altgr .level2 { opacity: 0.25; }
.dk .level5, .altgr .level3,
.dk .level6, .altgr .level4 { opacity: 1; }
.dk .level3,
.dk .level4 { display: none; }

rect, path { stroke: #777; fill: #444; }
.specialKey, .specialKey rect, .specialKey path { fill: #333; }
g:target rect, .press rect, g:target path, .press path { fill: #558; }
text { fill: #bbb; }
.level3, .level4 { fill: #99f; }
.level5, .level6 { fill: #6d6; }
.deadKey { fill: #f44; }

[theme="reach"] .pinkyKey  rect { fill: hsl(  0, 20%, 30%); }
[theme="reach"] .numberKey rect { fill: hsl( 35, 25%, 30%); }
[theme="reach"] .letterKey rect { fill: hsl( 61, 30%, 30%); }
[theme="reach"] .homeKey   rect { fill: hsl(136, 30%, 30%); }
[theme="reach"] .press     rect { fill: #449; }

[theme="hints"] [finger="m1"] rect { fill: hsl(  0, 25%, 30%); }
[theme="hints"] [finger="l2"] rect { fill: hsl( 31, 30%, 30%); }
[theme="hints"] [finger="r2"] rect { fill: hsl( 61, 30%, 30%); }
[theme="hints"] [finger="l3"] rect,
[theme="hints"] [finger="r3"] rect { fill: hsl(136, 30%, 30%); }
[theme="hints"] [finger="l4"] rect,
[theme="hints"] [finger="r4"] rect { fill: hsl(200, 30%, 30%); }
[theme="hints"] [finger="l5"] rect,
[theme="hints"] [finger="r5"] rect { fill: hsl(230, 30%, 30%); }
[theme="hints"] .specialKey   rect,
[theme="hints"] .specialKey   path { fill: #333; }
[theme="hints"] .hint         rect { fill: #a33; }
[theme="hints"] .press        rect { fill: #335; }
[theme="hints"] .press        text { fill: #fff; }
[theme="hints"] .hint text {
  font-weight: bold;
  fill: white;
}


h4
{
    margin-bottom: 0.3em;
}

h4 + p,
h4 + .image-wrap + p
{
    margin-top: 0;
}

kbd
{
  padding: 0.1em 0.6em;
  border: 1px solid #CCC;
  font-size: 0.9em;
  background-color: #F7F7F7;
  font-family: monospace,serif;
  color: #333;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px #FFF inset;
  border-radius: 3px;
  display: inline-block;
  margin: 0px 0.1em;
  text-shadow: 0px 1px 0px #FFF;
  line-height: 1.4;
  white-space: nowrap;
}


.explanations .image-wrap,
.explanations .image-wrap.left:nth-of-type(even)
{
   float: left; /* Floats the image to the left, text wraps on the right */
    margin-right: 15px; /* Adds space between the image and the text */
    margin-bottom: 15px; /* Adds space below the image */
    max-width: 150px; /* Optional: set a specific width */
    margin-top: 0.5em;
}

.explanations .image-wrap.right,
.explanations .image-wrap:nth-of-type(even)
{
   float: right; /* Floats the image to the left, text wraps on the right */
    margin-right: 0px; /* Adds space between the image and the text */
    margin-left: 15px; /* Adds space between the image and the text */

}


.installations {
    margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.installation
{
    color: white;
    border-radius: 4px;
    border: 1px solid #777;
    background-color: #444;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
}

.installation:hover {
  background-color: #ddd;
  color: black;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.os-logs
{
    height: 30px;
}

.simple
{
    color: #007edf;
}

.varient
{
    color: #d7005f;
}

.derivate
{
    color: #87ff00;
}

.primitiv
{
    color: #919191;
}

.phonetic
{
    color: #fb660a;
}

#footer
{
    display: inline-block;
    width: 100%;
}

@media only screen and (max-width: 768px) {
    #spelltest
    {
        display: none;
    }
}


thead {
      position: relative;
  }

thead th {
    border-top: 2px solid white;
    border-bottom: 1px solid white;
}

table th,
table td
{
        padding: 4px;
}

table thead + tbody tr:last-of-type  td
{
    border-bottom: 1px solid white;
}

.central-illustraton
{
    text-align: center;
}

.central-illustraton > table
{
    display: inline-block;
}

html[dir="ltr"] .central-illustraton > table
{
    text-align: left;
}

html[dir="rtl"] .central-illustraton > table
{
    text-align: right;
}

#language-selector
{
    position: fixed;
  top: 20px;
}

.todo
{
    list-style: none;
}

.todo
{
    padding-left: 0;
    margin-left: 0;
}