/* =========================
   xp (luna) skin layer
   ========================= */

:root.xp{
  --xp-title-grad: linear-gradient(180deg, #4d7fe8 0%, #2f63d8 55%, #2456c5 100%);
  --xp-title-inactive: linear-gradient(180deg, #9bb0d7 0%, #7d90bf 60%, #6c7fb2 100%);
  --xp-gloss: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%);
  --xp-start-grad: linear-gradient(180deg, #53d96b 0%, #2bb34a 55%, #169235 100%);
  --xp-start-border: #0b6c22;
  --xp-task-grad: linear-gradient(180deg, #f6f5ec 0%, #d9d6c7 100%);
}

:root.xp .window{
  border-radius: 8px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
  overflow: hidden; /* keeps rounded corners clean */
}

:root.xp .titlebar{
  background: var(--xp-title-grad);
  position: relative;
  padding: 6px 8px;
}

:root.xp .titlebar::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 55%;
  background: var(--xp-gloss);
  pointer-events:none;
  opacity: .55;
}

:root.xp .tb{
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #e7e3d3 100%);
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: inset 0 1px rgba(255,255,255,.7);
}

:root.xp .tb:active{
  background: linear-gradient(100deg, #d7d2c2 0%, #ffffff 100%);
}

:root.xp .content{ background:#f6f5ef; }
:root.xp .inset{ background:#fff; }

:root.xp .taskbar{
  background: linear-gradient(180deg, #4f8de0 0%, #2d6cc0 60%, #245aa8 100%);
  border-top: 1px solid rgba(255,255,255,.55);
  position:fixed;
}

:root.xp .taskbar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: rgba(255,255,255,.55);
  pointer-events:none;
}

:root.xp .start{
  color: #fff;
  font-weight:700;
  border-radius: 10px;
  border: 1px solid #0b6c22;
  background: var(--xp-start-grad);
  box-shadow:
    inset 0 1px rgba(255,255,255,.55),
    inset 0 -1px rgba(0,0,0,.15),
    1px 1px rgba(0,0,0,.25);
  text-shadow: 0 1px rgba(0,0,0,.35);
  padding: 5px 14px;
}

:root.xp .start:active{
  box-shadow:
  inset 0 2px rgba(0,0,0,.2),
  inset 0 -1px rgba(255,255,255,.25);
}

:root.xp .task{
  background: var(--xp-task-grad);
  border-radius: 6px;
  border-top: 1px solid rgba(255,255,255,.75);
  border-left: 1px solid rgba(255,255,255,.65);
  border-right: 1px solid rgba(0,0,0,.15);
  border-bottom: 1px solid rgba(0,0,0,.2);
}

/* clock */
:root.xp .clock{
  border-radius: 6px;
  background: rgba(255,255,255,.65);
}