@charset "UTF-8";

/* ====== COLOR VARIABLES - Pastel Purple Theme ====== */
:root {
  --pastel-purple: #d4b5ff;
  --dark-purple: #b28fd8;
  --soft-pink: #ffd1e6;
  --hot-pink: #ff6b8b;
  --nav-highlight: #e8c6ff;
  --light-purple: #f0e6ff;
  --medium-purple: #c9a8ff;
  
  /* Windows 95 UI mapping */
  --bg-desktop: #f0e6ff;
  --bg-window: #f0e6ff;
  --text-color : #8a7faf;
  --shadow-dark: #b28fd8;
  --shadow-light: #f5edff;
  --shadow-outer-dark: #9a7ac0;
  --shadow-outer-light: #e8d6ff;
  --nav-bg: #b28fd8;
  --nav-active: #d4b5ff;
  --nav-text: #ffffff;
  --hover-bg: #d4b5ff;
  --hover-text: #2d1b4e;
  --disabled-text: #9a8aaf;
  --selected-bg: #ff6b8b;
  --selected-text: #ffffff;
  --separator: #b28fd8;
  --input-bg: #ffffff;
  --menu-sidebar: #c0a0e0;
  --tab-outline: #a0d4a0;
  --white-highlight: #ffffff;
  --button-highlight: #ffffff;
}

/* ====== FONTS ====== */
@font-face {
  font-family: "MS Sans Serif";
  src: url("https://assets.codepen.io/345377/ms-sans-serif.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "MS Sans Serif";
  src: url("https://assets.codepen.io/345377/ms-sans-serif-bold.woff2") format("woff2");
  font-weight: bold;
  font-display: swap;
}

/* ====== RESET & BASE ====== */
*, *:before, *:after {
  cursor: default;
  box-sizing: border-box;
  image-rendering: pixelated;
  font-family: "MS Sans Serif", Tahoma, Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 1px;
}
*:not(textarea, input) {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
*:focus { outline: none; }
::selection { background: none; }

body, html { height: 100%; }

body {
  margin: 0;
  background-color: var(--bg-desktop);
  background-image: url("https://64.media.tumblr.com/162cc3dfa5cef6c882aba5453445f0fb/tumblr_mx3y1yYFad1qcm0eto1_1280.pnj");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-color);
  line-height: 1;
  overflow: hidden;
}

main {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

/* ====== TEXTAREA ====== */
textarea {
  display: block;
  border: 0;
  padding: 3px;
  width: 100%;
  height: 100%;
  resize: none;
  overflow: scroll;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  background: var(--input-bg);
  color: var(--text-color);
}
textarea::selection {
  background-color: var(--nav-active);
  color: var(--text-color);
}
.textarea-container {
  box-shadow: inset -1.5px -1.5px 0 0 var(--shadow-light), 
              inset 1.5px 1.5px 0 0 var(--shadow-dark),
              inset -3px -3px 0 0 var(--bg-window), 
              inset 3px 3px 0 0 var(--text-color);
  padding: 3px;
}

/* ====== HIDDEN UTILITY ====== */
[hidden] {
  appearance: none;
  visibility: hidden;
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
}

/* ====== LISTS ====== */
menu, ul:not(.information ul), ol {
  margin: 0; padding: 0;
  list-style: none;
}

/* ====== UNDERLINE HELPER ====== */
.underline > li > a:not(.no-line):first-letter,
.underline > li > label:not(.no-line):first-letter {
  text-decoration: underline;
}
.underline .line { display: inline-block; }

/* ====== LABEL BASE ====== */
label:before, label:after, a:before, a:after {
  content: "";
  background-position: center;
  background-size: contain;
}
label[tabindex] span { padding: 1px 2px; }
label[tabindex] span span { padding: 0; }

/* ====== FOCUS PATTERN OVERLAY ====== */
[class*=label]:not(.folders label):not(.label-nested):after {
  background: transparent;
  background-image: linear-gradient(45deg, var(--selected-bg) 25%, transparent 25%, transparent 75%, var(--selected-bg) 75%),
                    linear-gradient(45deg, var(--selected-bg) 25%, transparent 25%, transparent 75%, var(--selected-bg) 75%);
  background-size: 3px 3px;
  background-position: 0 0, 1.5px 1.5px;
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  mask-position: center;
  mask-size: cover;
}
[class*=label]:not(.folders label):not(.label-nested)[tabindex]:active:after,
[class*=label]:not(.folders label):not(.label-nested)[tabindex]:focus:after {
  opacity: 1;
}

/* ====== NESTED LABEL ARROW ====== */
.label-nested:after {
  position: absolute;
  right: 6px;
  width: 16px; height: 16px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVQokWP8//8/AymAiSTVDAwMLOgCasYW/xkYGBhh/FtnTxBlA053Ymjg/vcTryYMDV+Z2PHahNPTUJsY0cVxavjKxI6hGJ8GrIoZGBgYGGkecSRrAABJOBMT7b9GFQAAAABJRU5ErkJggg==") center/16px no-repeat;
  filter: brightness(0) saturate(100%) invert(15%) sepia(20%) saturate(1500%) hue-rotate(240deg) brightness(40%);
}
.label-nested:hover:after,
li:hover > .label-nested:after {
  filter: invert(1);
}

/* ====== ICON GENERATOR ====== */
[class*=label]:before {
  background-image: var(--icon);
  background-repeat: no-repeat;
}
[class*=label]:not(.folders label):not(.label-nested):after {
  mask-image: var(--icon);
}

/* Individual icon definitions */
.label-folder-programs, .label-folder-programs-small { --icon: url("https://assets.codepen.io/345377/folder-programs.png"); }
.label-folder-documents, .label-folder-documents-small { --icon: url("https://assets.codepen.io/345377/folder-documents.png"); }
.label-settings, .label-settings-small { --icon: url("https://assets.codepen.io/345377/settings.png"); }
.label-find, .label-find-small { --icon: url("https://assets.codepen.io/345377/find.png"); }
.label-help, .label-help-small { --icon: url("https://assets.codepen.io/345377/help.png"); }
.label-run, .label-run-small { --icon: url("https://assets.codepen.io/345377/run.png"); }
.label-shut-down, .label-shut-down-small { --icon: url("https://assets.codepen.io/345377/shut-down.png"); }
.label-notepad, .label-notepad-small { --icon: url("https://assets.codepen.io/345377/notepad.png"); }
.label-folder-explorer, .label-folder-explorer-small { --icon: url("https://assets.codepen.io/345377/folder-explorer.png"); }
.label-document-text, .label-document-text-small { --icon: url("https://assets.codepen.io/345377/document-text.png"); }
.label-control-panel, .label-control-panel-small { --icon: url("https://assets.codepen.io/345377/control-panel.png"); }
.label-folder-printers, .label-folder-printers-small { --icon: url("https://assets.codepen.io/345377/folder-printers.png"); }
.label-desktop, .label-desktop-small { --icon: url("https://assets.codepen.io/345377/desktop.png"); }
.label-computer, .label-computer-small { --icon: url("https://assets.codepen.io/345377/computer.png"); }
.label-disk, .label-disk-small { --icon: url("https://assets.codepen.io/345377/disk.png"); }
.label-diskette, .label-diskette-small { --icon: url("https://assets.codepen.io/345377/diskette.png"); }
.label-folder, .label-folder-small { --icon: url("https://assets.codepen.io/345377/folder.png"); }
.label-recycle-bin, .label-recycle-bin-small { --icon: url("https://assets.codepen.io/345377/recycle-bin.png"); }
.label-inbox, .label-inbox-small { --icon: url("https://assets.codepen.io/345377/inbox.png"); }
.label-program, .label-program-small { --icon: url("https://assets.codepen.io/345377/program.png"); }
.label-program-config, .label-program-config-small { --icon: url("https://assets.codepen.io/345377/program-config.png"); }
.label-document-windows, .label-document-windows-small { --icon: url("https://assets.codepen.io/345377/document-windows.png"); }
.label-hardware, .label-hardware-small { --icon: url("https://assets.codepen.io/345377/hardware.png"); }
.label-add-programs, .label-add-programs-small { --icon: url("https://assets.codepen.io/345377/add-programs.png"); }
.label-date-time, .label-date-time-small { --icon: url("https://assets.codepen.io/345377/date-time.png"); }
.label-document-misc, .label-document-misc-small { --icon: url("https://assets.codepen.io/345377/document-misc.png"); }
.label-document-config, .label-document-config-small { --icon: url("https://assets.codepen.io/345377/document-config.png"); }
.label-document-font, .label-document-font-small { --icon: url("https://assets.codepen.io/345377/document-font.png"); }
.label-grpconv, .label-grpconv-small { --icon: url("https://assets.codepen.io/345377/grpconv.png"); }
.label-folder-fonts-link, .label-folder-fonts-link-small { --icon: url("https://assets.codepen.io/345377/folder-fonts-link.png"); }
.label-computer-display, .label-computer-display-small { --icon: url("https://assets.codepen.io/345377/computer-display.png"); }
.label-modems, .label-modems-small { --icon: url("https://assets.codepen.io/345377/modems.png"); }
.label-keyboard, .label-keyboard-small { --icon: url("https://assets.codepen.io/345377/keyboard.png"); }
.label-internet, .label-internet-small { --icon: url("https://assets.codepen.io/345377/internet.png"); }
.label-joystick, .label-joystick-small { --icon: url("https://assets.codepen.io/345377/joystick.png"); }
.label-mouse, .label-mouse-small { --icon: url("https://assets.codepen.io/345377/mouse.png"); }
.label-multimedia, .label-multimedia-small { --icon: url("https://assets.codepen.io/345377/multimedia.png"); }
.label-network, .label-network-small { --icon: url("https://assets.codepen.io/345377/network.png"); }
.label-passwords, .label-passwords-small { --icon: url("https://assets.codepen.io/345377/passwords.png"); }
.label-battery, .label-battery-small { --icon: url("https://assets.codepen.io/345377/battery.png"); }
.label-regional, .label-regional-small { --icon: url("https://assets.codepen.io/345377/regional.png"); }
.label-folder-printers-link, .label-folder-printers-link-small { --icon: url("https://assets.codepen.io/345377/folder-printers-link.png"); }
.label-computer-sounds, .label-computer-sounds-small { --icon: url("https://assets.codepen.io/345377/computer-sounds.png"); }
.label-computer-mouse, .label-computer-mouse-small { --icon: url("https://assets.codepen.io/345377/computer-mouse.png"); }
.label-document-printer, .label-document-printer-small { --icon: url("https://assets.codepen.io/345377/document-printer.png"); }
.label-printer, .label-printer-small { --icon: url("https://assets.codepen.io/345377/printer.png"); }
.label-volume, .label-volume-small { --icon: url("https://assets.codepen.io/345377/volume.png"); }
.label-wordpad, .label-wordpad-small { --icon: url("https://assets.codepen.io/345377/wordpad.png"); }

/* Special icons */
.label-taskbar:before { background-image: url("https://assets.codepen.io/345377/taskbar.png"); }
.label-customize-start-menu:before { background-image: url("https://assets.codepen.io/345377/customize-start-menu.png"); }
.label-recycle-bin-folder:before { background-image: url("https://assets.codepen.io/345377/recycle-bin-folder.png"); }

/* ====== BUTTON ====== */
.button {
  box-shadow: inset -1.5px -1.5px 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--white-highlight),
              inset -3px -3px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--bg-window);
  padding: 0 6px 1.5px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  background: var(--bg-window);
  appearance: none;
  border: 0;
  width: 120px;
  height: 36px;
  text-align: center;
  color: var(--text-color);
}
.button.underline span:first-letter { text-decoration: underline; }
.button + .button { margin-left: 10px; }
.button > span {
  display: block;
  width: 100%;
  line-height: 22px;
  border: 1px dotted transparent;
  padding: 0 !important;
}
@media (min-width: 500px) { .button > span { border-width: 1.5px; } }
.button[disabled] { color: var(--disabled-text); pointer-events: none; }
.button:not([disabled]):focus {
  box-shadow: inset -3px -3px 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--text-color),
              inset -4.5px -4.5px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--white-highlight);
}
.button:not([disabled]):active {
  box-shadow: inset -1.5px -1.5px 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--text-color),
              inset -3px -3px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--shadow-dark);
}
.button:not([disabled]):focus span,
.button:not([disabled]):active span {
  border-color: var(--text-color);
  color: var(--text-color);
  background: none;
}

/* ====== DESKTOP & ICONS ====== */
#desktop {
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: calc(100vh - 44px);
  background: transparent;
}
#icons {
  position: relative;
  z-index: 1;
  padding-top: 3px;
  height: 100%;
}
.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 116px;
}
.desktop-icon:before { 
  pointer-events: none;
  width: 48px; height: 48px; 
}
.desktop-icon:after { width: 48px; height: 48px; }
.desktop-icon:before { margin-bottom: 6px; }
.desktop-icon:after { left: 36px; }
.desktop-icon span { 
  padding: 1px; 
  border: 1.5px solid transparent; 
  color: var(--text-color);
  text-shadow: 0 0 2px rgba(255,255,255,0.5);
}
.desktop-icon:not(:first-child) { margin-top: 40px; }
.desktop-icon[tabindex]:active span,
.desktop-icon[tabindex]:focus span {
  background: var(--selected-bg);
  color: var(--selected-text);
  border: 1px dotted var(--soft-pink);
}
@media (min-width: 500px) {
  .desktop-icon[tabindex]:active span,
  .desktop-icon[tabindex]:focus span { border-width: 1.5px; }
}

/* ====== WINDOWS & ALERTS CONTAINER ====== */
#windows, #alerts {
  display: grid;
  place-items: center;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: calc(100% + 44px);
  padding-bottom: 44px;
}

/* ====== WINDOW & ALERT BASE ====== */
.window, .alert {
  box-shadow: inset -1.5px -1.5px 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--shadow-outer-light),
              inset -3px -3px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--white-highlight);
  padding: 6px;
  z-index: 4;
  background: var(--bg-window);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: -1;
}
.window-inside, .alert-inside {
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 44px - 12px);
  min-width: 300px;
  min-height: 200px;
  overflow: hidden;
  resize: both;
}
.window-inside::-webkit-resizer,
.alert-inside::-webkit-resizer { display: none; }

/* ====== WINDOW NAV ====== */
.window-nav { background-color: var(--nav-bg); }
.alert-nav { background-color: var(--nav-bg); }

.window-nav, .alert-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 3px;
  color: var(--nav-text);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}
.window-nav:before, .window-nav:after,
.alert-nav:before, .alert-nav:after { content: unset; }

.window-nav h3, .alert-nav h3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 69px);
  margin: 0;
  line-height: 28px;
}
.window-nav h3[class*=label]:before,
.alert-nav h3[class*=label]:before {
  content: "";
  display: block;
  width: 24px; height: 24px;
  margin-right: 6px;
  background-size: contain;
}
.window-nav h3[class*=label] span:only-child,
.alert-nav h3[class*=label] span:only-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 30px);
}
.window-nav h3:not([class*=label]),
.alert-nav h3:not([class*=label]) { padding: 0 3px; }

/* Nav buttons */
.window-nav .buttons, .alert-nav .buttons { display: flex; }
.window-nav .buttons label, .alert-nav .buttons label {
  box-shadow: inset -1.5px -1.5px 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--white-highlight),
              inset -3px -3px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--bg-window);
  padding-bottom: 1.5px;
  padding-right: 1.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  background: var(--bg-window);
  position: relative;
  width: 22px; height: 20px;
}
.window-nav .buttons label[disabled],
.alert-nav .buttons label[disabled] { pointer-events: none; }
.window-nav .buttons label[disabled]:after,
.alert-nav .buttons label[disabled]:after { opacity: 0.4; }
.window-nav .buttons label:last-child,
.alert-nav .buttons label:last-child { margin-left: 3px; }

/* Button icons */
.window-nav .buttons label.minimize:after,
.alert-nav .buttons label.minimize:after {
  display: block;
  position: absolute;
  bottom: 4.5px; left: 5px;
  width: 10px; height: 3px;
  background: var(--text-color);
}
.window-nav .buttons label.maximize:before,
.window-nav .buttons label.maximize:after,
.alert-nav .buttons label.maximize:before,
.alert-nav .buttons label.maximize:after {
  content: "";
  display: block;
  position: absolute;
  width: 12px; height: 12px;
  border: 1.5px solid var(--text-color);
  border-top-width: 3px;
  background-color: var(--bg-window);
}
.window-nav .buttons label.maximize:before,
.alert-nav .buttons label.maximize:before { visibility: hidden; }

.window-nav .buttons label.close:after,
.alert-nav .buttons label.close:after {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjdweCIgdmlld0JveD0iMCAwIDggNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgPHBvbHlnb24gc3Ryb2tlPSJub25lIiBmaWxsPSIjMmQxYjRlIiBwb2ludHM9IjMgMyAyIDMgMiAyIDEgMiAxIDEgMCAxIDAgMCAyIDAgMiAxIDMgMSAzIDIgNSAyIDUgMSA2IDEgNiAwIDggMCA4IDEgNyAxIDcgMiA2IDIgNiAzIDUgMyA1IDQgNiA0IDYgNSA3IDUgNyA2IDggNiA4IDcgNiA3IDYgNiA1IDYgNSA1IDMgNSAzIDYgMiA2IDIgNyAwIDcgMCA2IDEgNiAxIDUgMiA1IDIgNCAzIDQiPjwvcG9seWdvbj4KPC9zdmc+");
  width: 12px; height: 10px;
}
.window-nav .buttons label.question:after,
.alert-nav .buttons label.question:after {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjlweCIgdmlld0JveD0iMCAwIDYgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KPGcgZmlsbD0iIzJkMWI0ZSI+Cjxwb2x5Z29uIHBvaW50cz0iMyA0IDMgMyA0IDMgNCAxIDIgMSAyIDMgMCAzIDAgMSAxIDEgMSAwIDUgMCA1IDEgNiAxIDYgMyA1IDMgNSA0IDQgNCA0IDYgMiA2IDIgNCI+PC9wb2x5Z29uPgo8cmVjdCB4PSIyIiB5PSI3IiB3aWR0aD0iMiIgaGVpZ2h0PSIyIj48L3JlY3Q+CjwvZz4KPC9zdmc+");
  width: 9px; height: 14px;
}

.window-nav .buttons label:not([disabled]):active,
.alert-nav .buttons label:not([disabled]):active {
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--text-color),
              inset -3px -3px 0 0 var(--bg-window), 
              inset 3px 3px 0 0 var(--shadow-dark);
}

/* ====== WINDOW MENU ====== */
.window-menu {
  display: flex;
  position: relative;
  line-height: 25px;
  padding: 1.5px 0;
}
.window-menu li { position: relative; }
.window-menu > li:has(> .sub-menu:hover) > a {
  background-color: var(--hover-bg);
  color: var(--hover-text);
}
.window-menu > li > a {
  display: block;
  padding: 0 10px;
  text-decoration: none;
  color: var(--text-color);
}
.window-menu > li > a:before,
.window-menu > li > a:after { content: unset; }
.window-menu > li > a:hover {
  background-color: var(--hover-bg);
  color: var(--hover-text);
}
.window-menu > li > a:hover + menu {
  visibility: visible;
  opacity: 1;
  z-index: 3;
}

.window-menu .sub-menu {
  box-shadow: inset -1.5px -1.5px 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--shadow-outer-light),
              inset -3px -3px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--white-highlight);
  padding: 6px;
  z-index: 4;
  background: var(--bg-window);
  position: absolute;
  width: 190px;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
}
.window-menu .sub-menu:hover {
  visibility: visible;
  opacity: 1;
  z-index: 3;
}
.window-menu .sub-menu .sub-menu {
  top: -6px;
  left: calc(100% - 6px);
}
.window-menu .sub-menu li:hover > label,
.window-menu .sub-menu li:hover > a {
  background-color: var(--hover-bg);
  color: var(--hover-text);
}
.window-menu .sub-menu li label:not(.label-check) { display: block; }
.window-menu .sub-menu li label:not(.label-check):before,
.window-menu .sub-menu li label:not(.label-check):after { content: unset; }
.window-menu .sub-menu li > a { display: flex; align-items: center; align-content: center; }
.window-menu .sub-menu li > a,
.window-menu .sub-menu li > label { padding-left: 32px; line-height: 28px; }
.window-menu .sub-menu li > a:hover,
.window-menu .sub-menu li > label:hover { background-color: var(--hover-bg); }
.window-menu .sub-menu li > a:not(.label-disabled):hover,
.window-menu .sub-menu li > label:not(.label-disabled):hover { color: var(--hover-text); }
.window-menu .sub-menu li > a.label-disabled,
.window-menu .sub-menu li > label.label-disabled { color: var(--disabled-text); }
.window-menu .sub-menu li a:hover ~ .sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 4;
}
.window-menu .sub-menu li .label-check {
  display: flex;
  padding-left: 0;
}
.window-menu .sub-menu li .label-check:before {
  visibility: hidden;
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  width: 32px; height: 28px;
}
.window-menu .sub-menu li .label-check:hover:before {
  filter: invert(1);
}
.window-menu .sub-menu hr {
  margin: 4px 0;
  border: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(to bottom, var(--shadow-dark) 0%, var(--shadow-dark) 50%, var(--white-highlight) 50%);
}

/* Menu icon utilities */
.window-menu .label-status-bar:before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iN3B4IiBoZWlnaHQ9IjdweCIgdmlld0JveD0iMCAwIDcgNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwb2x5Z29uIHN0cm9rZT0ibm9uZSIgZmlsbD0iIzJkMWI0ZSIgcG9pbnRzPSI0IDYgMyA2IDMgNyAyIDcgMiA2IDEgNiAxIDUgMCA1IDAgMiAxIDIgMSAzIDIgMyAyIDQgMyA0IDMgMyA0IDMgNCAyIDUgMiA1IDEgNiAxIDYgMCA3IDAgNyAzIDYgMyA2IDQgNSA0IDUgNSA0IDUiPjwvcG9seWdvbj4KPC9zdmc+");
  background-size: 10px 10px;
}
.window-menu .label-icon-size:before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwb2x5Z29uIHN0cm9rZT0ibm9uZSIgZmlsbD0iIzJkMWI0ZSIgcG9pbnRzPSI1IDAgNSAxIDYgMSA2IDUgNSA1IDUgNiAxIDYgMSA1IDAgNSAwIDEgMSAxIDEgMCI+PC9wb2x5Z29uPgo8L3N2Zz4=");
  background-size: 8px 8px;
}

.toggle-menu-label {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  width: 100%; height: 100%;
}
.toggle-menu:not(:checked) ~ .window-inside .window-menu > li > a:hover {
  background-color: unset;
  color: var(--text-color);
}
.toggle-menu:not(:checked) ~ .window-inside .window-menu > li > a:hover + .sub-menu {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}
.toggle-menu:checked ~ .window-inside .toggle-menu-label { z-index: -1; }

/* ====== WINDOW CONTENT ====== */
.window-content .window-footer {
  display: none;
  width: 100%;
  height: 26px;
  margin-top: 3px;
}
.window-content .window-footer ul {
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--shadow-dark);
  position: relative;
  height: 26px;
  line-height: 26px;
}
.window-content .window-footer ul li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  position: absolute;
  padding: 0 4px;
  color: var(--text-color);
}
.window-content .window-footer ul li:not(.show) { visibility: hidden; }
.window-content .window-footer .number { width: 30%; }
.window-content .window-footer .number:only-child { width: 100%; }
.window-content .window-footer .space {
  margin-left: 3px;
  width: calc(70% - 3px);
}

.window-default .window-inside { width: 750px; height: 470px; }

.window-content { height: calc(100% - 56px); }
.window-content > .list-container { margin-top: 0; }

/* ====== LIST & ICON VIEWS ====== */
.list-container {
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--shadow-dark),
              inset -3px -3px 0 0 var(--bg-window), 
              inset 3px 3px 0 0 var(--text-color);
  padding: 3px;
  background: var(--input-bg);
  height: calc(100% - 28px - 2px);
  margin-top: 2px;
}
.list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  height: 100%;
  overflow: auto;
}
.list li { position: relative; }
.list label:not(.label-toggle) {
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: 3px;
  white-space: nowrap;
  color: var(--text-color);
}
.list label:not(.label-toggle):not(.folders label):after {
  width: 24px; height: 24px;
  z-index: 2;
}
.list label:not(.label-toggle):before {
  display: block;
  position: relative;
  z-index: 2;
  width: 24px; height: 24px;
  margin-right: 6px;
}
.list label:not(.label-toggle):active span,
.list label:not(.label-toggle):focus span {
  background: var(--selected-bg);
  color: var(--selected-text);
  border: 1px dotted var(--soft-pink);
}
@media (min-width: 500px) {
  .list label:not(.label-toggle):active span,
  .list label:not(.label-toggle):focus span { border-width: 1.5px; }
}

/* Tree toggle */
.list .label-toggle {
  display: block;
  position: absolute;
  top: 6px; left: -22px;
  width: 12.5px; height: 12.5px;
  box-shadow: inset -1.5px -1.5px 0 0 var(--shadow-dark), 
              inset 1.5px 1.5px 0 0 var(--shadow-dark);
  background-color: var(--input-bg);
}
.list .label-toggle:before,
.list .label-toggle:after {
  display: block;
  position: absolute;
  background-color: var(--text-color);
}
.list .label-toggle:before { left: 3px; top: 5.5px; width: 6.5px; height: 1.5px; }
.list .label-toggle:after { left: 5.5px; top: 3px; width: 1.5px; height: 6.5px; }
.list .label-toggle ~ menu { display: none; }
.list menu {
  position: relative;
  padding-left: 26px;
}
.list menu:before {
  content: "";
  display: block;
  position: absolute;
  top: -3px; left: 9px;
  height: calc(100% - 12px);
  border-left: 1px dotted var(--shadow-dark);
}
@media (min-width: 500px) {
  .list menu:before { height: calc(100% - 11px); border-left-width: 1.5px; }
}

.above-footer { height: 100%; }

/* ====== ALERTS ====== */
#alerts { z-index: -1; }

@keyframes blink {
  from { opacity: 1; }
  to { opacity: 0; }
}

#alert-blue-screen {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background-color: var(--dark-purple);
  color: var(--selected-text);
}
#alert-blue-screen .content { max-width: 610px; padding: 20px; }
#alert-blue-screen h3,
#alert-blue-screen p { font-weight: bold; font-size: 18px; line-height: 1.4; }
#alert-blue-screen h3,
#alert-blue-screen p:last-child { text-align: center; }
#alert-blue-screen h3 span {
  display: inline-block;
  padding: 2px 3px;
  background-color: var(--disabled-text);
  color: var(--dark-purple);
}
#alert-blue-screen .blink {
  display: inline-block;
  animation: blink 1s cubic-bezier(1, 0, 0, 1) infinite forwards;
}

.alert-inside {
  min-width: unset;
  min-height: unset;
  width: 320px; height: 180px;
  resize: none;
}
.alert-content { padding: 0 24px; height: calc(100% - 28px - 52px); }
.alert-content p { padding: 16px 0 0; margin: 0; color: var(--text-color); }
.alert-footer { display: flex; padding: 0 24px 16px; }

/* ====== WELCOME WINDOW ====== */
#window-welcome .window-inside {
  width: 750px;
  height: 470px;
}
#window-welcome textarea[readonly] {
  background: var(--input-bg);
  cursor: default;
  color: var(--text-color);
}

/* ====== TASKBAR WINDOW ====== */
#window-taskbar { left: 3px; bottom: 48px; }
#window-taskbar > .window-inside { resize: none; width: 510px; height: 600px; }
#window-taskbar > .window-inside > .window-content { padding: 12px 9px 10px; height: calc(100% - 28px - 3px - 36px - 9px); }
#window-taskbar .window-footer { display: flex; justify-content: flex-end; width: 100%; padding: 0 9px; }
#window-taskbar .tab-container { height: 100%; }
#window-taskbar .tab-group { display: flex; }
#window-taskbar .tab {
  display: block;
  position: relative;
  z-index: 0;
  margin-top: 3px;
  line-height: 32px;
  padding: 0 12px;
  background-color: var(--bg-window);
  color: var(--text-color);
}
#window-taskbar .tab:first-child { transform: translateX(3px); }
#window-taskbar .tab:not(:first-child) { margin-left: -3px; transform: translateX(-3px); }
#window-taskbar .tab:before, #window-taskbar .tab:after,
#window-taskbar .tab span:before, #window-taskbar .tab span:after {
  content: "";
  display: block;
  position: absolute;
}
#window-taskbar .tab:before {
  width: calc(100% - 6px); height: 100%;
  top: 0; left: 3px;
  border-top: 1.5px solid var(--white-highlight);
}
#window-taskbar .tab:after {
  width: 100%; height: calc(100% - 3px);
  bottom: 0; left: 0;
  border-left: 1.5px solid var(--white-highlight);
  border-right: 1.5px solid var(--text-color);
  box-shadow: inset -1.5px 0 0 0 var(--shadow-dark);
}
#window-taskbar .tab span:before, #window-taskbar .tab span:after {
  top: 1.5px; width: 1.5px; height: 1.5px;
}
#window-taskbar .tab span:before { left: 1.5px; background-color: var(--white-highlight); }
#window-taskbar .tab span:after { right: 1.5px; background-color: var(--text-color); }

/* Active tab state */
#window-taskbar #taskbar-options:checked ~ .window-inside .tab-taskbar-options,
#window-taskbar #start-menu-programs:checked ~ .window-inside .tab-start-menu-programs {
  z-index: 12; margin-top: 0; transform: none;
}
#window-taskbar #taskbar-options:checked ~ .window-inside .tabpanel.taskbar-options,
#window-taskbar #start-menu-programs:checked ~ .window-inside .tabpanel.start-menu-programs {
  z-index: 12;
}

#window-taskbar .tabpanel-group {
  position: relative;
  z-index: 0;
  margin-top: -1.5px;
  height: calc(100% - 32px + 1.5px);
}
#window-taskbar .tabpanel {
  box-shadow: inset -1.5px -1.5px 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--white-highlight),
              inset -3px -3px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--bg-window);
  padding-bottom: 1.5px;
  padding-right: 1.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  overflow: hidden;
  width: 100%; height: 100%;
  background-color: var(--bg-window);
}
#window-taskbar .taskbar-options { padding: 32px; }

/* Preview */
#window-taskbar .preview-container {
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--shadow-dark);
  display: grid;
  place-items: center;
  width: 100%; height: 200px;
  background: var(--bg-desktop);
}
#window-taskbar .preview {
  position: relative;
  overflow: hidden;
  width: calc(100% - 3px); height: calc(100% - 3px);
}
#window-taskbar .preview * { pointer-events: none; }
#window-taskbar .preview .window {
  opacity: 1; visibility: visible;
  z-index: 2;
  bottom: 22px;
  left: calc(100% - 96px);
}
#window-taskbar .preview .window-inside { width: 300px; height: 200px; }
#window-taskbar .preview .window-content { height: 100%; }
#window-taskbar .preview .list-container { height: 100%; }
#window-taskbar .preview .list { display: block; }
#window-taskbar .preview .list label {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 116px; height: 98px;
  white-space: unset;
  text-align: center;
  line-height: 1.3;
}
#window-taskbar .preview .list label:before {
  margin-bottom: 6px; margin-right: 0;
  width: 48px; height: 48px;
}
#window-taskbar .preview .start-menu,
#window-taskbar .preview .start-menu-outline {
  bottom: 1px; left: 4px;
  width: calc(100% - 8px);
}
#window-taskbar .preview .start-menu-outline {
  visibility: hidden;
  position: absolute;
  height: 44px;
  border: 1.5px dotted var(--tab-outline);
  border-bottom: 0;
  z-index: 10;
}
#window-taskbar .preview .start-menu {
  box-shadow: inset -1.5px -1.5px 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--white-highlight),
              inset -3px -3px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--shadow-outer-light);
  padding: 0 2px 0 1px;
  justify-content: space-between;
}
#window-taskbar .preview .start-menu .label-start {
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--text-color),
              inset -3px -3px 0 0 var(--bg-window), 
              inset 3px 3px 0 0 var(--shadow-dark);
  padding-bottom: 1.5px;
  padding-right: 1.5px;
}
#window-taskbar .preview .start-menu .menu-container {
  visibility: visible;
  z-index: 2;
  left: 0;
  bottom: 44px;
}
#window-taskbar .preview .start-menu .time {
  display: flex; align-items: center;
  width: auto; padding: 0 10px;
}
#window-taskbar .preview .start-menu .time:before {
  content: "";
  width: 24px; height: 24px;
  margin-right: 8px;
  background-size: contain;
}

/* Options */
#window-taskbar .options { width: 100%; }
#window-taskbar .options label {
  display: flex; align-items: center;
  margin-top: 32px;
  position: relative;
  color: var(--text-color);
}
#window-taskbar .options label:before,
#window-taskbar .options label:after { display: block; width: 20px; height: 20px; }
#window-taskbar .options label:before {
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--shadow-dark),
              inset -3px -3px 0 0 var(--bg-window), 
              inset 3px 3px 0 0 var(--text-color);
  padding: 3px;
  margin-right: 8px;
  background-color: var(--input-bg);
}
#window-taskbar .options label:after {
  position: absolute;
  left: 0;
  visibility: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iN3B4IiBoZWlnaHQ9IjdweCIgdmlld0JveD0iMCAwIDcgNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwb2x5Z29uIHN0cm9rZT0ibm9uZSIgZmlsbD0iIzJkMWI0ZSIgcG9pbnRzPSI0IDYgMyA2IDMgNyAyIDcgMiA2IDEgNiAxIDUgMCA1IDAgMiAxIDIgMSAzIDIgMyAyIDQgMyA0IDMgMyA0IDMgNCAyIDUgMiA1IDEgNiAxIDYgMCA3IDAgNyAzIDYgMyA2IDQgNSA0IDUgNSA0IDUiPjwvcG9seWdvbj4KPC9zdmc+");
  background-size: 10px 10px;
}
#window-taskbar .options label > span {
  border: 1.5px dotted transparent;
  line-height: 1;
  height: 20px;
}
#window-taskbar .options label:focus > span { border: 1.5px dotted; }

/* Start menu programs tab */
#window-taskbar .start-menu-programs { padding: 0 20px 20px; }
#window-taskbar .start-menu-programs form { display: block; width: 100%; }
#window-taskbar .start-menu-programs fieldset {
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--shadow-dark),
              inset -3px -3px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--white-highlight);
  display: block;
  width: 100%;
  margin-top: 20px;
  border: 0;
  padding: 32px 32px 20px;
  color: var(--text-color);
}
#window-taskbar .start-menu-programs legend {
  background-color: var(--bg-window);
  margin-left: -22px;
  transform: translateY(2px);
  padding: 0 5px;
}
#window-taskbar .start-menu-programs p {
  display: flex;
  align-items: flex-start;
  width: calc(100% - 20px);
  margin: 0;
  line-height: 1.3;
}
#window-taskbar .start-menu-programs p:before {
  content: "";
  display: block;
  min-width: 48px; width: 48px; height: 48px;
  background-size: contain;
  margin-right: 24px;
}
#window-taskbar .start-menu-programs .menu-options {
  display: flex;
  justify-content: flex-end;
}
#window-taskbar .start-menu-programs .menu-options li:not(:first-child) { margin-left: 10px; }
#window-taskbar .start-menu-programs .customize-start-menu .menu-options { margin-top: 48px; }
#window-taskbar .start-menu-programs .documents-menu .menu-options { margin-top: 20px; }

/* Option checked states */
#option-always-on-top:checked ~ .window-inside label[for=option-always-on-top]:after,
#option-auto-hide:checked ~ .window-inside label[for=option-auto-hide]:after,
#option-show-small-icons:checked ~ .window-inside label[for=option-show-small-icons]:after,
#option-show-clock:checked ~ .window-inside label[for=option-show-clock]:after {
  visibility: visible;
}

#option-always-on-top:not(:checked) ~ .window-inside .preview .window { z-index: 11; }

/* ====== GLOBAL OPTIONS ====== */
#global-option-always-on-top:not(:checked) ~ main #start-menu { z-index: unset; }
#global-option-always-on-top:not(:checked) ~ main #start-menu .menu-container { z-index: 1000000; }
#start:checked ~ #global-option-always-on-top:not(:checked) ~ main #start-menu { z-index: 1000000; }
#start:checked ~ #global-option-always-on-top:not(:checked) ~ main #start-menu .menu-container { z-index: unset; }

#option-auto-hide:checked ~ .window-inside .preview .start-menu-outline { visibility: visible; }
#option-auto-hide:checked ~ .window-inside .preview .start-menu {
  box-shadow: inset -1.5px 0 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--white-highlight),
              inset -3px 0 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--shadow-outer-light);
  height: 10px;
}
#option-auto-hide:checked ~ .window-inside .preview .start-menu > * { visibility: hidden; }

#global-option-auto-hide:checked ~ main:not(#start:checked ~ main) .start-menu { transform: translateY(100%); }
#global-option-auto-hide:checked ~ main:not(#start:checked ~ main) .start-menu:hover { transform: none; }
#global-option-auto-hide:checked ~ main:not(#start:checked ~ main) #start-menu-outline { visibility: visible; }
#global-option-auto-hide:checked ~ main:not(#start:checked ~ main) #start-menu-outline:hover + .start-menu { transform: none; }

/* Small icons option */
#option-show-small-icons:checked ~ .window-inside .preview .menu-container:before,
#global-option-show-small-icons:checked ~ main #start-menu .menu-container:before { display: none; }
#option-show-small-icons:checked ~ .window-inside .preview .main-menu > li:last-child,
#global-option-show-small-icons:checked ~ main #start-menu .main-menu > li:last-child { padding-top: 8px; }
#option-show-small-icons:checked ~ .window-inside .preview .main-menu > li > a,
#option-show-small-icons:checked ~ .window-inside .preview .main-menu > li > label,
#global-option-show-small-icons:checked ~ main #start-menu .main-menu > li > a,
#global-option-show-small-icons:checked ~ main #start-menu .main-menu > li > label {
  height: 34px; width: 175px;
}
#option-show-small-icons:checked ~ .window-inside .preview .main-menu > li > a:before,
#option-show-small-icons:checked ~ .window-inside .preview .main-menu > li > label:before,
#global-option-show-small-icons:checked ~ main #start-menu .main-menu > li > a:before,
#global-option-show-small-icons:checked ~ main #start-menu .main-menu > li > label:before {
  width: 24px; height: 24px; margin-right: 8px;
}

/* Clock toggle */
#option-show-clock:not(:checked) ~ .window-inside .preview .time:before { margin-right: 0; }
#option-show-clock:not(:checked) ~ .window-inside .preview time { display: none; }
#global-option-show-clock:not(:checked) ~ main #start-menu .time { display: none; }

/* ====== SPECIFIC WINDOW SIZES ====== */
#window-printers .window-inside { width: 480px; height: 390px; }
#window-control-panel .window-inside { width: 520px; height: 480px; }

/* ====== EXPLORER WINDOW ====== */
#window-explorer .window-nav h3 > span { position: relative; height: 28px; }
#window-explorer .window-nav h3 > span span { visibility: hidden; top: 0; position: absolute; }
#window-explorer .window-content { display: flex; flex-wrap: wrap; }
#window-explorer .window-content h4, #window-explorer .window-content h5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--shadow-dark);
  margin: 0;
  padding: 0 6px;
  font-weight: normal;
  line-height: 28px;
  color: var(--text-color);
}
#window-explorer .window-content .folders { width: 250px; }
#window-explorer .window-content .folders .long { min-width: 180px; }
#window-explorer .window-content .folders label:not(.label-toggle):after {
  display: block;
  position: absolute;
  z-index: 1;
  left: -17px;
  width: 17px;
  border-top: 1px dotted var(--shadow-dark);
}
@media (min-width: 500px) {
  #window-explorer .window-content .folders label:not(.label-toggle):after {
    left: -14px;
    width: 14px;
    border-top-width: 1.5px;
  }
}
#window-explorer .window-content .folders-content {
  position: relative;
  margin-left: 4px;
  width: calc(100% - 254px);
}
#window-explorer .window-content .content {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: -1;
  width: 100%; height: 100%;
}
#window-explorer .window-content .content .list li { min-width: 210px; }

/* ====== WINDOW ACTIVATION SYSTEM ====== */
#welcome:checked ~ main #window-welcome,
#taskbar:checked ~ main #window-taskbar,
#printers:checked ~ main #window-printers,
#control-panel:checked ~ main #window-control-panel,
#computer:checked ~ main #window-computer,
#notepad:checked ~ main #window-notepad,
#explorer:checked ~ main #window-explorer {
  will-change: transform;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

#welcome:checked ~ main .tab-welcome,
#taskbar:checked ~ main .tab-taskbar,
#printers:checked ~ main .tab-printers,
#control-panel:checked ~ main .tab-control-panel,
#computer:checked ~ main .tab-computer,
#notepad:checked ~ main .tab-notepad,
#explorer:checked ~ main .tab-explorer {
  display: flex;
}

#welcome:checked ~ main .menu .label-welcome,
#taskbar:checked ~ main .menu .label-taskbar,
#printers:checked ~ main .menu .label-printers,
#control-panel:checked ~ main .menu .label-control-panel,
#computer:checked ~ main .menu .label-computer,
#notepad:checked ~ main .menu .label-notepad,
#explorer:checked ~ main .menu .label-explorer {
  pointer-events: none;
}

/* Active window states */
#welcome.active ~ #welcome-minimize:not(:checked) ~ main #window-welcome,
#taskbar.active ~ #taskbar-minimize:not(:checked) ~ main #window-taskbar,
#printers.active ~ #printers-minimize:not(:checked) ~ main #window-printers,
#control-panel.active ~ #control-panel-minimize:not(:checked) ~ main #window-control-panel,
#computer.active ~ #computer-minimize:not(:checked) ~ main #window-computer,
#notepad.active ~ #notepad-minimize:not(:checked) ~ main #window-notepad,
#explorer.active ~ #explorer-minimize:not(:checked) ~ main #window-explorer,
#welcome.active.no-tab ~ main #window-welcome,
#taskbar.active.no-tab ~ main #window-taskbar,
#printers.active.no-tab ~ main #window-printers,
#control-panel.active.no-tab ~ main #window-control-panel,
#computer.active.no-tab ~ main #window-computer,
#notepad.active.no-tab ~ main #window-notepad,
#explorer.active.no-tab ~ main #window-explorer {
  z-index: 10;
}

/* Active window nav backgrounds */
#welcome.active ~ #welcome-minimize:not(:checked) ~ main #window-welcome .window-nav,
#taskbar.active ~ #taskbar-minimize:not(:checked) ~ main #window-taskbar .window-nav,
#printers.active ~ #printers-minimize:not(:checked) ~ main #window-printers .window-nav,
#control-panel.active ~ #control-panel-minimize:not(:checked) ~ main #window-control-panel .window-nav,
#computer.active ~ #computer-minimize:not(:checked) ~ main #window-computer .window-nav,
#notepad.active ~ #notepad-minimize:not(:checked) ~ main #window-notepad .window-nav,
#explorer.active ~ #explorer-minimize:not(:checked) ~ main #window-explorer .window-nav,
#welcome.active.no-tab ~ main #window-welcome .window-nav,
#taskbar.active.no-tab ~ main #window-taskbar .window-nav,
#printers.active.no-tab ~ main #window-printers .window-nav,
#control-panel.active.no-tab ~ main #window-control-panel .window-nav,
#computer.active.no-tab ~ main #window-computer .window-nav,
#notepad.active.no-tab ~ main #window-notepad .window-nav,
#explorer.active.no-tab ~ main #window-explorer .window-nav {
  background-color: var(--nav-active);
}

/* Inactive windows z-index */
#welcome.active ~ #welcome-minimize:not(:checked) ~ main .window[data-window]:not(#window-welcome),
#taskbar.active ~ #taskbar-minimize:not(:checked) ~ main .window[data-window]:not(#window-taskbar),
#printers.active ~ #printers-minimize:not(:checked) ~ main .window[data-window]:not(#window-printers),
#control-panel.active ~ #control-panel-minimize:not(:checked) ~ main .window[data-window]:not(#window-control-panel),
#computer.active ~ #computer-minimize:not(:checked) ~ main .window[data-window]:not(#window-computer),
#notepad.active ~ #notepad-minimize:not(:checked) ~ main .window[data-window]:not(#window-notepad),
#explorer.active ~ #explorer-minimize:not(:checked) ~ main .window[data-window]:not(#window-explorer),
#welcome.active.no-tab ~ main .window[data-window]:not(#window-welcome),
#taskbar.active.no-tab ~ main .window[data-window]:not(#window-taskbar),
#printers.active.no-tab ~ main .window[data-window]:not(#window-printers),
#control-panel.active.no-tab ~ main .window[data-window]:not(#window-control-panel),
#computer.active.no-tab ~ main .window[data-window]:not(#window-computer),
#notepad.active.no-tab ~ main .window[data-window]:not(#window-notepad),
#explorer.active.no-tab ~ main .window[data-window]:not(#window-explorer) {
  z-index: 2;
}

/* Active tab label pattern */
#welcome.active ~ #welcome-minimize:not(:checked) ~ main .tab-welcome label,
#taskbar.active ~ #taskbar-minimize:not(:checked) ~ main .tab-taskbar label,
#printers.active ~ #printers-minimize:not(:checked) ~ main .tab-printers label,
#control-panel.active ~ #control-panel-minimize:not(:checked) ~ main .tab-control-panel label,
#computer.active ~ #computer-minimize:not(:checked) ~ main .tab-computer label,
#notepad.active ~ #notepad-minimize:not(:checked) ~ main .tab-notepad label,
#explorer.active ~ #explorer-minimize:not(:checked) ~ main .tab-explorer label,
#welcome.active.no-tab ~ main .tab-welcome label,
#taskbar.active.no-tab ~ main .tab-taskbar label,
#printers.active.no-tab ~ main .tab-printers label,
#control-panel.active.no-tab ~ main .tab-control-panel label,
#computer.active.no-tab ~ main .tab-computer label,
#notepad.active.no-tab ~ main .tab-notepad label,
#explorer.active.no-tab ~ main .tab-explorer label {
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--text-color),
              inset -3px -3px 0 0 var(--bg-window), 
              inset 3px 3px 0 0 var(--shadow-dark);
  padding-bottom: 1.5px;
  padding-right: 1.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  background: var(--bg-window);
  background-color: transparent;
  background-image: linear-gradient(45deg, var(--white-highlight) 25%, transparent 25%, transparent 75%, var(--white-highlight) 75%),
                    linear-gradient(45deg, var(--white-highlight) 25%, transparent 25%, transparent 75%, var(--white-highlight) 75%);
  background-size: 3px 3px;
  background-position: 0 0, 1.5px 1.5px;
  justify-content: flex-start;
}

/* Z-index adjustments */
#welcome.active ~ #welcome-minimize:not(:checked) ~ main .activate:not(.tab-welcome .activate),
#taskbar.active ~ #taskbar-minimize:not(:checked) ~ main .activate:not(.tab-taskbar .activate),
#printers.active ~ #printers-minimize:not(:checked) ~ main .activate:not(.tab-printers .activate),
#control-panel.active ~ #control-panel-minimize:not(:checked) ~ main .activate:not(.tab-control-panel .activate),
#computer.active ~ #computer-minimize:not(:checked) ~ main .activate:not(.tab-computer .activate),
#notepad.active ~ #notepad-minimize:not(:checked) ~ main .activate:not(.tab-notepad .activate),
#explorer.active ~ #explorer-minimize:not(:checked) ~ main .activate:not(.tab-explorer .activate),
#welcome.active.no-tab ~ main .activate:not(.tab-welcome .activate),
#taskbar.active.no-tab ~ main .activate:not(.tab-taskbar .activate),
#printers.active.no-tab ~ main .activate:not(.tab-printers .activate),
#control-panel.active.no-tab ~ main .activate:not(.tab-control-panel .activate),
#computer.active.no-tab ~ main .activate:not(.tab-computer .activate),
#notepad.active.no-tab ~ main .activate:not(.tab-notepad .activate),
#explorer.active.no-tab ~ main .activate:not(.tab-explorer .activate) {
  z-index: 1;
}

#welcome.active ~ #welcome-minimize:not(:checked) ~ main .tab label:not(.tab-welcome label),
#taskbar.active ~ #taskbar-minimize:not(:checked) ~ main .tab label:not(.tab-taskbar label),
#printers.active ~ #printers-minimize:not(:checked) ~ main .tab label:not(.tab-printers label),
#control-panel.active ~ #control-panel-minimize:not(:checked) ~ main .tab label:not(.tab-control-panel label),
#computer.active ~ #computer-minimize:not(:checked) ~ main .tab label:not(.tab-computer label),
#notepad.active ~ #notepad-minimize:not(:checked) ~ main .tab label:not(.tab-notepad label),
#explorer.active ~ #explorer-minimize:not(:checked) ~ main .tab label:not(.tab-explorer label),
#welcome.active.no-tab ~ main .tab label:not(.tab-welcome label),
#taskbar.active.no-tab ~ main .tab label:not(.tab-taskbar label),
#printers.active.no-tab ~ main .tab label:not(.tab-printers label),
#control-panel.active.no-tab ~ main .tab label:not(.tab-control-panel label),
#computer.active.no-tab ~ main .tab label:not(.tab-computer label),
#notepad.active.no-tab ~ main .tab label:not(.tab-notepad label),
#explorer.active.no-tab ~ main .tab label:not(.tab-explorer label) {
  z-index: 0;
}

/* ====== MINIMIZE/MAXIMIZE ====== */
#welcome-minimize:active ~ main #window-welcome .window-inside .minimize,
#taskbar-minimize:active ~ main #window-taskbar .window-inside .minimize,
#printers-minimize:active ~ main #window-printers .window-inside .minimize,
#control-panel-minimize:active ~ main #window-control-panel .window-inside .minimize,
#computer-minimize:active ~ main #window-computer .window-inside .minimize,
#notepad-minimize:active ~ main #window-notepad .window-inside .minimize,
#explorer-minimize:active ~ main #window-explorer .window-inside .minimize {
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--text-color),
              inset -3px -3px 0 0 var(--bg-window), 
              inset 3px 3px 0 0 var(--shadow-dark);
  padding-bottom: 1.5px;
  padding-right: 1.5px;
}

#welcome-minimize:checked ~ main #window-welcome,
#taskbar-minimize:checked ~ main #window-taskbar,
#printers-minimize:checked ~ main #window-printers,
#control-panel-minimize:checked ~ main #window-control-panel,
#computer-minimize:checked ~ main #window-computer,
#notepad-minimize:checked ~ main #window-notepad,
#explorer-minimize:checked ~ main #window-explorer {
  transform: scale(0);
}

#welcome-maximize:active ~ main #window-welcome .window-inside .maximize,
#taskbar-maximize:active ~ main #window-taskbar .window-inside .maximize,
#printers-maximize:active ~ main #window-printers .window-inside .maximize,
#control-panel-maximize:active ~ main #window-control-panel .window-inside .maximize,
#computer-maximize:active ~ main #window-computer .window-inside .maximize,
#notepad-maximize:active ~ main #window-notepad .window-inside .maximize,
#explorer-maximize:active ~ main #window-explorer .window-inside .maximize {
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--text-color),
              inset -3px -3px 0 0 var(--bg-window), 
              inset 3px 3px 0 0 var(--shadow-dark);
  padding-bottom: 1.5px;
  padding-right: 1.5px;
}

#welcome-maximize:checked ~ main #window-welcome,
#taskbar-maximize:checked ~ main #window-taskbar,
#printers-maximize:checked ~ main #window-printers,
#control-panel-maximize:checked ~ main #window-control-panel,
#computer-maximize:checked ~ main #window-computer,
#notepad-maximize:checked ~ main #window-notepad,
#explorer-maximize:checked ~ main #window-explorer {
  left: unset !important;
  top: 0 !important;
}

#welcome-maximize:checked ~ main #window-welcome .window-inside,
#taskbar-maximize:checked ~ main #window-taskbar .window-inside,
#printers-maximize:checked ~ main #window-printers .window-inside,
#control-panel-maximize:checked ~ main #window-control-panel .window-inside,
#computer-maximize:checked ~ main #window-computer .window-inside,
#notepad-maximize:checked ~ main #window-notepad .window-inside,
#explorer-maximize:checked ~ main #window-explorer .window-inside {
  max-width: calc(100vw - 12px);
  width: calc(100vw - 12px) !important;
  height: calc(100vh - 44px - 12px) !important;
}

#welcome-maximize:checked ~ main #window-welcome .window-inside .maximize:before,
#welcome-maximize:checked ~ main #window-welcome .window-inside .maximize:after,
#taskbar-maximize:checked ~ main #window-taskbar .window-inside .maximize:before,
#taskbar-maximize:checked ~ main #window-taskbar .window-inside .maximize:after,
#printers-maximize:checked ~ main #window-printers .window-inside .maximize:before,
#printers-maximize:checked ~ main #window-printers .window-inside .maximize:after,
#control-panel-maximize:checked ~ main #window-control-panel .window-inside .maximize:before,
#control-panel-maximize:checked ~ main #window-control-panel .window-inside .maximize:after,
#computer-maximize:checked ~ main #window-computer .window-inside .maximize:before,
#computer-maximize:checked ~ main #window-computer .window-inside .maximize:after,
#notepad-maximize:checked ~ main #window-notepad .window-inside .maximize:before,
#notepad-maximize:checked ~ main #window-notepad .window-inside .maximize:after,
#explorer-maximize:checked ~ main #window-explorer .window-inside .maximize:before,
#explorer-maximize:checked ~ main #window-explorer .window-inside .maximize:after {
  width: 9px; height: 9px;
}

#welcome-maximize:checked ~ main #window-welcome .window-inside .maximize:before,
#taskbar-maximize:checked ~ main #window-taskbar .window-inside .maximize:before,
#printers-maximize:checked ~ main #window-printers .window-inside .maximize:before,
#control-panel-maximize:checked ~ main #window-control-panel .window-inside .maximize:before,
#computer-maximize:checked ~ main #window-computer .window-inside .maximize:before,
#notepad-maximize:checked ~ main #window-notepad .window-inside .maximize:before,
#explorer-maximize:checked ~ main #window-explorer .window-inside .maximize:before {
  visibility: visible;
  top: 3px; right: 6px;
}

#welcome-maximize:checked ~ main #window-welcome .window-inside .maximize:after,
#taskbar-maximize:checked ~ main #window-taskbar .window-inside .maximize:after,
#printers-maximize:checked ~ main #window-printers .window-inside .maximize:after,
#control-panel-maximize:checked ~ main #window-control-panel .window-inside .maximize:after,
#computer-maximize:checked ~ main #window-computer .window-inside .maximize:after,
#notepad-maximize:checked ~ main #window-notepad .window-inside .maximize:after,
#explorer-maximize:checked ~ main #window-explorer .window-inside .maximize:after {
  bottom: 4px; left: 4px;
}

/* ====== MENU STATES ====== */
.menu-status-bar:checked ~ .window-inside .label-check.label-status-bar:before { visibility: visible; }
.menu-status-bar:checked ~ .window-inside .window-footer { display: flex; }
.menu-status-bar:checked ~ .window-inside .above-footer { height: calc(100% - 26px - 3px); }

/* ====== VIEW MODES ====== */
.menu-large-icons:checked ~ .window-inside .label-check.label-large-icons:before,
.menu-small-icons:checked ~ .window-inside .label-check.label-small-icons:before,
.menu-list-icons:checked ~ .window-inside .label-check.label-list-icons:before {
  visibility: visible;
}

.menu-large-icons:checked ~ .window-inside .window-content .list:not(.folders .list) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 120px);
  row-gap: 24px;
  padding: 9px 0;
}
.menu-large-icons:checked ~ .window-inside .window-content .list:not(.folders .list) li label {
  white-space: unset;
  text-align: center;
  line-height: 1.3;
  height: 98px;
}
.menu-large-icons:checked ~ .window-inside .window-content .list:not(.folders .list) li label:before {
  margin-bottom: 6px; margin-right: 0;
}
.menu-large-icons:checked ~ .window-inside .window-content .list:not(.folders .list) li label:active span,
.menu-large-icons:checked ~ .window-inside .window-content .list:not(.folders .list) li label:focus span {
  background: var(--selected-bg);
  color: var(--selected-text);
  border: 1px dotted var(--soft-pink);
}
@media (min-width: 500px) {
  .menu-large-icons:checked ~ .window-inside .window-content .list:not(.folders .list) li label:active span,
  .menu-large-icons:checked ~ .window-inside .window-content .list:not(.folders .list) li label:focus span {
    border-width: 1.5px;
  }
}

.menu-large-icons:checked ~ .window-inside .window-content [class*="-small"]:not(.folders label) {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 116px;
}
.menu-large-icons:checked ~ .window-inside .window-content [class*="-small"]:not(.folders label):before,
.menu-large-icons:checked ~ .window-inside .window-content [class*="-small"]:not(.folders label):after {
  width: 48px; height: 48px;
}
.menu-large-icons:checked ~ .window-inside .window-content [class*="-small"]:not(.folders label):before {
  margin-bottom: 6px;
}
.menu-large-icons:checked ~ .window-inside .window-content [class*="-small"]:not(.folders label):after {
  left: 36px;
}
.menu-large-icons:checked ~ .window-inside .window-content [class*="-small"]:not(.folders label) span {
  padding: 1px;
  border: 1.5px solid transparent;
}

.menu-small-icons:checked ~ .window-inside .window-content .list:not(.folders .list) {
  flex-direction: row;
}
.menu-small-icons:checked ~ .window-inside .window-content .list:not(.folders .list) label {
  width: 210px;
}

.menu-list-icons:checked ~ .window-inside .window-content .list:not(.folders list) {
  flex-direction: column;
}

/* ====== ERROR ALERTS ====== */
input[id*=error-]:checked ~ main #alerts { z-index: 1000001; }

#error-blue-screen:checked ~ main #alert-blue-screen,
#error-diskette-a:checked ~ main #alert-diskette-a,
#error-diskette-b:checked ~ main #alert-diskette-b {
  will-change: transform;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* ====== EXPLORER FOLDER TOGGLES ====== */
#toggle-computer:checked ~ main #window-explorer .toggle-computer:after,
#toggle-disk:checked ~ main #window-explorer .toggle-disk:after,
#toggle-program-files:checked ~ main #window-explorer .toggle-program-files:after,
#toggle-windows:checked ~ main #window-explorer .toggle-windows:after {
  visibility: hidden;
}
#toggle-computer:checked ~ main #window-explorer .toggle-computer ~ menu,
#toggle-disk:checked ~ main #window-explorer .toggle-disk ~ menu,
#toggle-program-files:checked ~ main #window-explorer .toggle-program-files ~ menu,
#toggle-windows:checked ~ main #window-explorer .toggle-windows ~ menu {
  display: block;
}

/* Explorer content visibility */
#explorer-desktop:checked ~ main #window-explorer .title-explorer-desktop,
#explorer-desktop:checked ~ main #window-explorer .content-explorer-desktop,
#explorer-desktop:checked ~ main #window-explorer .explorer-number-desktop,
#explorer-desktop:checked ~ main #window-explorer .explorer-space-desktop,
#explorer-computer:checked ~ main #window-explorer .title-explorer-computer,
#explorer-computer:checked ~ main #window-explorer .content-explorer-computer,
#explorer-computer:checked ~ main #window-explorer .explorer-number-computer,
#explorer-computer:checked ~ main #window-explorer .explorer-space-computer,
#explorer-disk:checked ~ main #window-explorer .title-explorer-disk,
#explorer-disk:checked ~ main #window-explorer .content-explorer-disk,
#explorer-disk:checked ~ main #window-explorer .explorer-number-disk,
#explorer-disk:checked ~ main #window-explorer .explorer-space-disk,
#explorer-dos:checked ~ main #window-explorer .title-explorer-dos,
#explorer-dos:checked ~ main #window-explorer .content-explorer-dos,
#explorer-dos:checked ~ main #window-explorer .explorer-number-dos,
#explorer-dos:checked ~ main #window-explorer .explorer-space-dos,
#explorer-program-files:checked ~ main #window-explorer .title-explorer-program-files,
#explorer-program-files:checked ~ main #window-explorer .content-explorer-program-files,
#explorer-program-files:checked ~ main #window-explorer .explorer-number-program-files,
#explorer-program-files:checked ~ main #window-explorer .explorer-space-program-files,
#explorer-windows:checked ~ main #window-explorer .title-explorer-windows,
#explorer-windows:checked ~ main #window-explorer .content-explorer-windows,
#explorer-windows:checked ~ main #window-explorer .explorer-number-windows,
#explorer-windows:checked ~ main #window-explorer .explorer-space-windows,
#explorer-control-panel:checked ~ main #window-explorer .title-explorer-control-panel,
#explorer-control-panel:checked ~ main #window-explorer .content-explorer-control-panel,
#explorer-control-panel:checked ~ main #window-explorer .explorer-number-control-panel,
#explorer-control-panel:checked ~ main #window-explorer .explorer-space-control-panel,
#explorer-printers:checked ~ main #window-explorer .title-explorer-printers,
#explorer-printers:checked ~ main #window-explorer .content-explorer-printers,
#explorer-printers:checked ~ main #window-explorer .explorer-number-printers,
#explorer-printers:checked ~ main #window-explorer .explorer-space-printers,
#explorer-recycle-bin:checked ~ main #window-explorer .title-explorer-recycle-bin,
#explorer-recycle-bin:checked ~ main #window-explorer .content-explorer-recycle-bin,
#explorer-recycle-bin:checked ~ main #window-explorer .explorer-number-recycle-bin,
#explorer-recycle-bin:checked ~ main #window-explorer .explorer-space-recycle-bin {
  visibility: visible;
}

#explorer-desktop:checked ~ main #window-explorer .label-folder-small[for=explorer-desktop]:before,
#explorer-computer:checked ~ main #window-explorer .label-folder-small[for=explorer-computer]:before,
#explorer-disk:checked ~ main #window-explorer .label-folder-small[for=explorer-disk]:before,
#explorer-dos:checked ~ main #window-explorer .label-folder-small[for=explorer-dos]:before,
#explorer-program-files:checked ~ main #window-explorer .label-folder-small[for=explorer-program-files]:before,
#explorer-windows:checked ~ main #window-explorer .label-folder-small[for=explorer-windows]:before,
#explorer-control-panel:checked ~ main #window-explorer .label-folder-small[for=explorer-control-panel]:before,
#explorer-printers:checked ~ main #window-explorer .label-folder-small[for=explorer-printers]:before,
#explorer-recycle-bin:checked ~ main #window-explorer .label-folder-small[for=explorer-recycle-bin]:before {
  background-image: url("https://assets.codepen.io/345377/folder-open-small.png");
}

#explorer-desktop:checked ~ main #window-explorer .content-explorer-desktop,
#explorer-computer:checked ~ main #window-explorer .content-explorer-computer,
#explorer-disk:checked ~ main #window-explorer .content-explorer-disk,
#explorer-dos:checked ~ main #window-explorer .content-explorer-dos,
#explorer-program-files:checked ~ main #window-explorer .content-explorer-program-files,
#explorer-windows:checked ~ main #window-explorer .content-explorer-windows,
#explorer-control-panel:checked ~ main #window-explorer .content-explorer-control-panel,
#explorer-printers:checked ~ main #window-explorer .content-explorer-printers,
#explorer-recycle-bin:checked ~ main #window-explorer .content-explorer-recycle-bin {
  visibility: visible;
  opacity: 1;
  z-index: unset;
}

/* ====== START MENU ====== */
#start:focus ~ main > .start-menu .label-start,
#start:active ~ main > .start-menu .label-start,
#start:checked ~ main > .start-menu .label-start {
  outline: 1px dotted var(--text-color);
  outline-offset: -6px;
}
@media (min-width: 500px) {
  #start:focus ~ main > .start-menu .label-start,
  #start:active ~ main > .start-menu .label-start,
  #start:checked ~ main > .start-menu .label-start {
    outline-width: 1.5px;
  }
}
#start:active ~ main > .start-menu .label-start,
#start:checked ~ main > .start-menu .label-start {
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--text-color),
              inset -3px -3px 0 0 var(--bg-window), 
              inset 3px 3px 0 0 var(--shadow-dark);
  padding-bottom: 1.5px;
  padding-right: 1.5px;
}
#start:checked ~ main > .start-menu .menu-container {
  visibility: visible;
  z-index: unset;
}
#start:checked ~ main > .start-menu .menu-container .sub-menu:hover {
  visibility: visible;
  z-index: 2;
}
#start:checked ~ main > .start-menu .menu-container .main-menu a:hover ~ .sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 2;
}

#start-menu-outline {
  visibility: hidden;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background-color: var(--shadow-dark);
}

.start-menu {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 10;
  bottom: 0; left: 0;
  width: 100%; height: 44px;
  background-color: var(--bg-window);
  box-shadow: inset 0 1.5px 0 0 var(--bg-window), inset 0 3px 0 0 var(--white-highlight);
  padding-top: 3px;
}
.start-menu .menu-container,
.start-menu .sub-menu {
  box-shadow: inset -1.5px -1.5px 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--white-highlight),
              inset -3px -3px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--shadow-outer-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.5px;
  z-index: 4;
  background: var(--bg-window);
  position: absolute;
  padding: 4px;
}
.start-menu .menu li { position: relative; }
.start-menu .menu li:hover > label,
.start-menu .menu li:hover > a {
  background-color: var(--hover-bg);
  color: var(--hover-text);
}
.start-menu .menu label,
.start-menu .menu a {
  display: flex;
  align-items: center;
  align-content: center;
  width: 200px;
  padding-left: 8px;
  height: 32px;
  color: var(--text-color);
}
.start-menu .menu label:before,
.start-menu .menu a:before {
  width: 24px; height: 24px;
  margin-right: 8px;
}
.start-menu .menu label:hover,
.start-menu .menu a:hover {
  background-color: var(--hover-bg);
  color: var(--hover-text);
}
.start-menu .menu label.label-empty,
.start-menu .menu a.label-empty {
  justify-content: center;
  padding-left: 0;
}
.start-menu .menu label.label-empty:before,
.start-menu .menu label.label-empty:after,
.start-menu .menu a.label-empty:before,
.start-menu .menu a.label-empty:after { display: none; }
.start-menu .menu label.label-disabled,
.start-menu .menu label.label-disabled:hover,
.start-menu .menu label.label-empty,
.start-menu .menu label.label-empty:hover,
.start-menu .menu a.label-disabled,
.start-menu .menu a.label-disabled:hover,
.start-menu .menu a.label-empty,
.start-menu .menu a.label-empty:hover { color: var(--disabled-text); }

.start-menu .menu-container {
  visibility: hidden;
  display: flex;
  align-items: stretch;
  z-index: -1;
  bottom: 38px;
  left: 4px;
}
.start-menu .menu-container:before {
  content: "";
  display: block;
  background-color: var(--menu-sidebar);
  width: 32px;
}
.start-menu .menu-container .sub-menu {
  visibility: hidden;
  z-index: -1;
  display: block;
  top: -4px;
  left: calc(100% - 4px);
  margin: 0;
}
.start-menu .menu-container .main-menu > li:nth-last-child(2) { border-bottom: 1.5px solid var(--shadow-dark); }
.start-menu .menu-container .main-menu > li:last-child { border-top: 1.5px solid var(--white-highlight); }
.start-menu .menu-container .main-menu > li > label,
.start-menu .menu-container .main-menu > li > a { height: 50px; }
.start-menu .menu-container .main-menu > li > label:before,
.start-menu .menu-container .main-menu > li > a:before { width: 48px; height: 48px; margin-right: 10px; }

.start-menu .label-start {
  font-weight: bold;
  margin-left: 4px;
  color: var(--text-color);
}
.start-menu .label-start:before {
  width: 24px; height: 21px;
  margin-right: 5px;
  background-image: url("https://assets.codepen.io/345377/start.png");
  background-size: 24px 21px;
}
.start-menu .label-start,
.start-menu .tabs label {
  box-shadow: inset -1.5px -1.5px 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--white-highlight),
              inset -3px -3px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--bg-window);
  padding-bottom: 1.5px;
  padding-right: 1.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  background: var(--bg-window);
  height: 34px;
  padding: 0 6px !important;
  background-color: var(--bg-window);
}
.start-menu .tabs {
  display: flex;
  width: calc(100% - 79px - 100px - 6px);
}
.start-menu .tabs .tab {
  flex-basis: 200px;
  display: none;
  position: relative;
  overflow: hidden;
  margin-left: 4px;
}
.start-menu .tabs .activate {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
.start-menu .tabs label {
  position: relative;
  z-index: 1;
  width: 100%;
  justify-content: flex-start;
  color: var(--text-color);
}
.start-menu .tabs label span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.start-menu .tabs label:before {
  width: 24px; min-width: 24px;
  height: 24px;
  margin-right: 3px;
}
.start-menu .tabs label:active {
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--text-color),
              inset -3px -3px 0 0 var(--bg-window), 
              inset 3px 3px 0 0 var(--shadow-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  background: var(--bg-window);
  background-color: transparent;
  background-image: linear-gradient(45deg, var(--white-highlight) 25%, transparent 25%, transparent 75%, var(--white-highlight) 75%),
                    linear-gradient(45deg, var(--white-highlight) 25%, transparent 25%, transparent 75%, var(--white-highlight) 75%);
  background-size: 3px 3px;
  background-position: 0 0, 1.5px 1.5px;
  justify-content: flex-start;
  padding-bottom: 1.5px;
  padding-right: 1.5px;
}
.start-menu .time {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset -1.5px -1.5px 0 0 var(--white-highlight), 
              inset 1.5px 1.5px 0 0 var(--shadow-dark);
  display: grid;
  place-items: center;
  height: 34px;
  width: 100px;
  margin: 0 3px;
  color: var(--text-color);
}

#start-menu { z-index: 1000000; }

/* ====== SCROLLBARS ====== */
::-webkit-scrollbar { width: 24px; height: 24px; }
::-webkit-scrollbar-track {
  background-color: var(--white-highlight);
  background-image: linear-gradient(45deg, var(--bg-desktop) 25%, transparent 25%, transparent 75%, var(--bg-desktop) 75%),
                    linear-gradient(45deg, var(--bg-desktop) 25%, transparent 25%, transparent 75%, var(--bg-desktop) 75%);
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;
}
::-webkit-scrollbar-thumb {
  box-shadow: inset -1.5px -1.5px 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--white-highlight),
              inset -3px -3px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--shadow-outer-light);
  width: 24px; height: 24px;
  background-color: var(--bg-window);
  z-index: 1;
}
::-webkit-scrollbar-corner { background-color: var(--bg-window); }
::-webkit-resizer {
  width: 24px; height: 24px;
  background-color: var(--bg-window);
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
  background-position: bottom right;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
::-webkit-scrollbar-button {
  box-shadow: inset -1.5px -1.5px 0 0 var(--text-color), 
              inset 1.5px 1.5px 0 0 var(--white-highlight),
              inset -3px -3px 0 0 var(--shadow-dark), 
              inset 3px 3px 0 0 var(--shadow-outer-light);
  display: block;
  width: 24px; height: 24px;
  background-color: var(--bg-window);
  image-rendering: pixelated;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center center;
}
::-webkit-scrollbar-button:active { background-position: 2px 2px; }
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAPUlEQVQokWP8//8/AymAiSTVhDSoGVtgWI9TAzbFODXgUoxVAz7FWDXcOnuCkSQNhDTh9DQuTYwDG3HYAACS4BOhZHfptgAAAABJRU5ErkJggg==");
}
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVQokWP8//8/AymAiSTVDAwMLOgCasYW/xkYGBhh/FtnTxBlA053Ymjg/vcTryYMDV+Z2PHahNPTUJsY0cVxavjKxI6hGJ8GrIoZGBgYGGkecSRrAABJOBMT7b9GFQAAAABJRU5ErkJggg==");
}
::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMElEQVQokWP8//8/AymAiSTVA6dBzdgCp8cwNMAU49LEhE0xPpuY8EliE2ccBvEAAGLfEQE9MAhjAAAAAElFTkSuQmCC");
}
::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAOklEQVQokWP8//8/AymAiSTVdNHAAmOoGVvg9MytsycYsdnAiEUthji6k9A1YRiCzQ+MaDSq5DCIBwDz6goZAxDEewAAAABJRU5ErkJggg==");
}
::-webkit-scrollbar-button:horizontal:increment:start,
::-webkit-scrollbar-button:horizontal:decrement:end,
::-webkit-scrollbar-button:vertical:increment:start,
::-webkit-scrollbar-button:vertical:decrement:end { display: none; }
::-webkit-scrollbar-button:active {
  border: 1.5px solid var(--shadow-dark);
  box-shadow: none;
}

/* Welcome Document Window */
#window-welcome-doc .window-inside {
  width: 600px;
  height: 450px;
}
#window-welcome-doc textarea[readonly] {
  background: var(--input-bg);
  cursor: default;
  color: var(--text-color);
}

/* To-Do List Window */
#window-todo .window-inside {
  width: 450px;
  height: 400px;
}
#window-todo textarea[readonly] {
  background: var(--input-bg);
  cursor: default;
  color: var(--text-color);
}