:root {
    --nice-color: green;
    --repairs-color: orange;
    --upgrades-color: purple;
    --mods-color: blue;
    --zcreen-top : 50;
    --swidth-hover: 0.35px;
    --bg-color : #fff;
    --color-hover : #fff;
    --active-label: visible;
}

svg.top {
    z-index: 80;
}

#exploded {
    width:100%;
    max-height: 90vh;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
}

#screens {
    width:100%;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: 2fr 8fr;
}

#laptop {
    grid-column: 5 / 10;
    grid-row: 2 / 2;
    justify-self:center;
    align-self: start;
    object-fit: contain;
    z-index: 1;
}

img.screen {
    grid-row: 2 / 2;
    max-height:100%;
    max-width: 100%;
    align-self: start;
    justify-self:center;
    object-fit: contain;
    border:0.5px solid #253529;
    transform: perspective(650px) rotateY(-31deg) rotateX(18deg) skew(-5deg, 9deg);
    pointer-events: all;
    cursor: pointer;
    transition: transform 200ms;
}

span.sw.label {
    grid-row: 1 / 1;
    place-self: center;
    border: 1px solid;
    border-radius: 5px;
    font-family: 'IBM Plex Mono';
    font-weight: 500;
    font-style: italic;
    padding-left: 0.5em;
    padding-right: 0.5em;
    visibility: var(--show-label, hidden);
}

svg.hwlabel {
    z-index: 100;
    visibility: var(--show-label, hidden);
}

body:has(#bios:is(:hover, :focus)) {
    #bios-label {
          --show-label: var(--active-label);
        }
    #bios {
        --zscreen : var(--zcreen-top);
        transform: none;
    }
}

body:has(#void:is(:hover, :focus)) {
    #void-label {
          --show-label: var(--active-label);
        }
    #void {
        --zscreen : var(--zcreen-top);
        transform: none;
    }
}

body:has(#desktop:is(:hover, :focus)) {
    #desktop-label {
          --show-label: var(--active-label);
        }
    #desktop {
        --zscreen : var(--zcreen-top);
        transform: none;
    }
}

body:has(#apps:is(:hover, :focus)) {
    #apps-label {
          --show-label: var(--active-label);
        }
    #apps {
        --zscreen : var(--zcreen-top);
        transform: none;
    }
}

body:has(#services:is(:hover, :focus)) {
    #services-label {
          --show-label: var(--active-label);
        }
    #services {
        --zscreen : var(--zcreen-top);
        transform: none;
    }
}

body:has(#web:is(:hover, :focus)) {
    #web-label {
          --show-label: var(--active-label);
        }
    #web {
        --zscreen : var(--zcreen-top);
        transform: none;
    }
}

#bios, #bios-label {
    grid-column: 6 / 9;
    z-index: var(--zscreen, 2);
}

#void, #void-label {
    grid-column: 5 / 8;
    z-index: var(--zscreen, 3);
}

#desktop, #desktop-label {
    grid-column: 4 / 7;
    z-index: var(--zscreen, 4);
}

#apps, #apps-label {
    grid-column: 3 / 6;
    z-index: var(--zscreen, 5);
}

#services, #services-label {
    grid-column: 2 / 5;
    z-index: var(--zscreen, 6);
}

#web, #web-label {
    grid-column: 1 / 4;
    z-index: var(--zscreen, 7);
}

#exploded > svg {
    grid-column: 1 / 10;
    grid-row: 1 / 10;
    place-self:center;
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
    pointer-events: none;
    :is(path[role="button"], ellipse[role="button"]) {
        stroke: var(--color, #253529);
        stroke-width: var(--swidth, 0.25px);
        pointer-events: all;
        cursor: pointer;
  }
}

#fixed > path:not(.bg), #fixed > ellipse {
    stroke-width:.25px;
    stroke: #253529;
}

#hw-buttons {
    grid-column: 1 / 2;
    grid-row: 1 / 1;
    align-self:center;
    justify-self: center;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
}

#hw-buttons button {
    margin-top:1em;
    border: 1px solid;
    border-radius: 5px;
    font-family: 'IBM Plex Mono';
    font-weight: 500;
    font-style: italic;
    background: #fff;
    pointer-events: all;
    cursor: pointer;
}

#exploded button.mods {
    color: var(--button-text, var(--mods-color));
    background-color: var(--bg-color);
    border-color: var(--mods-color);
}
#exploded button.upgrades {
    color: var(--button-text, var(--upgrades-color));
    background-color: var(--bg-color);
    border-color: var(--upgrades-color);
}
#exploded button.repairs {
    color: var(--button-text, var(--repairs-color));
    background-color: var(--bg-color);
    border-color: var(--repairs-color);
}
#exploded button.nice {
    color: var(--button-text, var(--nice-color));
    background-color: var(--bg-color);
    border-color: var(--nice-color);
}

body:has(button.upgrades:is(:hover, :focus)) {
    svg.upgrades > path[role="button"], svg.upgrades > ellipse[role="button"] {
      --color: var(--upgrades-color);
      --swidth : var(--swidth-hover);
  }
    button.upgrades {
        --bg-color: var(--upgrades-color);
        --button-text: var(--color-hover);
    }
    svg.hwlabel.upgrades {
          --show-label: var(--active-label);
        }
}

body:has(button.mods:is(:hover, :focus)) {
    .mods > path[role="button"], .mods > ellipse[role="button"] {
      --color: var(--mods-color);
      --swidth : var(--swidth-hover);
  }
   button.mods {
        --bg-color: var(--mods-color);
        --button-text: var(--color-hover);
    }
    svg.hwlabel.mods {
          --show-label: var(--active-label);
        }
}

body:has(button.repairs:is(:hover, :focus)) {
    .repairs > path[role="button"], .repairs > ellipse[role="button"] {
      --color: var(--repairs-color);
      --swidth : var(--swidth-hover);
  }
   button.repairs {
        --bg-color: var(--repairs-color);
        --button-text: var(--color-hover);
    }
    svg.hwlabel.repairs {
          --show-label: var(--active-label);
        }
}

body:has(button.nice:is(:hover, :focus)) {
    .nice > path[role="button"], .nice > ellipse[role="button"] {
      --color: var(--nice-color);
      --swidth : var(--swidth-hover);
  }
   button.nice {
        --bg-color: var(--nice-color);
        --button-text: var(--color-hover);
    }
    svg.hwlabel.nice {
          --show-label: var(--active-label);
        }
}

body:has(#ram:is(:hover, :focus)) {
    #ram > path[role="button"] {
      --color: var(--upgrades-color);
      --swidth : var(--swidth-hover);
    }
    #ram-label {
          --show-label: var(--active-label);
    }
}

body:has(#ssd:is(:hover, :focus)) {
    #ssd > path[role="button"], #ssd > ellipse[role="button"] {
      --color: var(--upgrades-color);
      --swidth : var(--swidth-hover);
  }
    #ssd-label {
        --show-label: var(--active-label);
    }
}

body:has(#wifi:is(:hover, :focus)) {
    #wifi > path[role="button"] {
      --color: var(--upgrades-color);
      --swidth : var(--swidth-hover);
    }
    #wifi-label {
        --show-label: var(--active-label);
    }
}

body:has(#lcd:is(:hover, :focus)) {
    #lcd > path[role="button"], #lcd > ellipse[role="button"] {
      --color: var(--upgrades-color);
      --swidth : var(--swidth-hover);
  }
    #lcd-label {
        --show-label: var(--active-label);
    }
}

body:has(#charger:is(:hover, :focus)) {
    #charger > path[role="button"], #charger > ellipse[role="button"] {
      --color: var(--upgrades-color);
      --swidth : var(--swidth-hover);
  }
  #charger-label {
        --show-label: var(--active-label);
    }
}

body:has(#bluetooth:is(:hover, :focus)) {
    #bluetooth > path[role="button"] {
      --color: var(--upgrades-color);
      --swidth : var(--swidth-hover);
    }
    #bluetooth-label {
        --show-label: var(--active-label);
    }
}

body:has(#mobo:is(:hover, :focus)) {
    #mobo > path[role="button"] {
      --color: var(--upgrades-color);
      --swidth : var(--swidth-hover);
    }
    #mobo-label {
        --show-label: var(--active-label);
    }
}

body:has(#led:is(:hover, :focus)) {
    #led > path[role="button"] {
      --color: var(--mods-color);
      --swidth : var(--swidth-hover);
    }
    #led-label {
        --show-label: var(--active-label);
    }
}

body:has(#cpu:is(:hover, :focus)) {
    #cpu > path[role="button"], #cpu > ellipse[role="button"] {
      --color: var(--mods-color);
      --swidth : var(--swidth-hover);
  }
  #cpu-label {
        --show-label: var(--active-label);
    }
}

body:has(#power-connector:is(:hover, :focus)) {
    #power-connector > path[role="button"] {
      --color: var(--mods-color);
      --swidth : var(--swidth-hover);
    }
    #power-connector-label {
        --show-label: var(--active-label);
    }
}

body:has(#battery:is(:hover, :focus)) {
    #battery > path[role="button"] {
      --color: var(--repairs-color);
      --swidth : var(--swidth-hover);
    }
    #battery-label {
        --show-label: var(--active-label);
    }
}

body:has(#cmos:is(:hover, :focus)) {
    #cmos > path[role="button"] {
      --color: var(--repairs-color);
      --swidth : var(--swidth-hover);
    }
    #cmos-label {
        --show-label: var(--active-label);
    }
}

body:has(#fan:is(:hover, :focus)) {
    #fan > path[role="button"], #fan > ellipse[role="button"] {
      --color: var(--repairs-color);
      --swidth : var(--swidth-hover);
  }
  #fan-label {
        --show-label: var(--active-label);
    }
}

body:has(#ram-door:is(:hover, :focus)) {
    #ram-door > path[role="button"], #ram-door > ellipse[role="button"] {
      --color: var(--nice-color);
      --swidth : var(--swidth-hover);
  }
  #ram-door-label {
        --show-label: var(--active-label);
    }
}

body:has(#ssd-door:is(:hover, :focus)) {
    #ssd-door > path[role="button"], #ssd-door > ellipse[role="button"] {
      --color: var(--nice-color);
      --swidth : var(--swidth-hover);
    }
    #ssd-door-label {
        --show-label: var(--active-label);
    }
}

body:has(#keyboard:is(:hover, :focus)) { 
    #keyboard > path[role="button"], #keyboard > ellipse[role="button"] {
      --color: var(--nice-color);
      --swidth : var(--swidth-hover);
  }
  #keyboard-label {
        --show-label: var(--active-label);
    }
}

body:has(#thinklight:is(:hover, :focus)) {
    #thinklight > path[role="button"] {
      --color: var(--nice-color);
      --swidth : var(--swidth-hover);
    }
    #thinklight-label {
        --show-label: var(--active-label);
    }
}

body:has(#ports:is(:hover, :focus)) {
    #ports > path[role="button"], #ports > ellipse[role="button"] {
      --color: var(--nice-color);
      --swidth : var(--swidth-hover);
  }
  #ports-label {
        --show-label: var(--active-label);
    }
}

body:has(#drain-holes:is(:hover, :focus)) {
    #drain-holes > path[role="button"] {
      --color: var(--nice-color);
      --swidth : var(--swidth-hover);
    }
    #drain-holes-label {
        --show-label: var(--active-label);
    }
}

body:has(#wireless-switch:is(:hover, :focus)) {
    #wireless-switch > path[role="button"] {
      --color: var(--nice-color);
      --swidth : var(--swidth-hover);
    }
    #wireless-switch-label {
        --show-label: var(--active-label);
    }
}