*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

/* Column layout: desktop fills the space above the fixed-height taskbar. */
/* XP cursors from user32.dll. Each image is 32x32 with its hotspot at
   (10, 10), as stored in the original resources. The keyword after each url
   is the fallback if the image cannot load. XP shows the arrow on buttons;
   the hand is only for hyperlinks. */
html {
  cursor: url("../assets/cursors/arrow.png") 10 10, default;
}

html.is-busy,
html.is-busy * {
  cursor: url("../assets/cursors/busy.png") 10 10, progress;
}

/* Browsers give buttons "cursor: default" (the system arrow); inherit the XP one. */
button {
  cursor: inherit;
}

a[href] {
  cursor: url("../assets/cursors/hand.png") 10 10, pointer;
}

body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: var(--font-size-ui);
  user-select: none;
}

/* Windows are positioned absolutely inside the desktop and clipped at its
   edges, so they can never cover the taskbar. */
.desktop {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* Layers: the full wallpaper on top of the tiny placeholder on top of the color. */
  background:
    var(--desktop-wallpaper) center / cover no-repeat,
    var(--desktop-wallpaper-placeholder) center / cover no-repeat,
    var(--desktop-bg);
}