@font-face {
  font-family: "Tahoma";
  src: url("../assets/fonts/tahoma.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "FranklinGothicMediumItalic";
  src: url("../assets/fonts/framdit.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

html,
body {
  background: #000000;
}

body {
  font-family: "Tahoma";
  cursor: default;
}

.xp-stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000000;
}

.xp-canvas {
  position: relative;
  flex: none;
  width: 800px;
  height: 600px;
  overflow: hidden;
  background: #000000;
  transform-origin: center center;
  user-select: none;
  -webkit-user-select: none;
}

.xp-canvas,
.xp-canvas * {
  image-rendering: pixelated;
}

.xp-canvas input,
.xp-canvas textarea {
  user-select: text;
  -webkit-user-select: text;
}

.xp-canvas ::selection,
.xp-ie-qmdsb-para::selection,
.xp-ie-qmdsb-para *::selection {
  color: #FFFFFF;
  background: #316AC5;
}

.xp-screen {
  position: absolute;
  inset: 0;
}

.xp-stage.is-synthetic-cursor,
.xp-stage.is-synthetic-cursor * {
  cursor: none;
}

.xp-synthetic-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transform-origin: 0 0;
  image-rendering: pixelated;
  pointer-events: none;
  visibility: hidden;
}

.xp-synthetic-cursor.is-pointer-inside-window {
  visibility: visible;
}

.xp-synthetic-cursor.is-cursor-hidden {
  visibility: hidden;
}

.xp-canvas,
.xp-canvas * {
  --xp-cursor-kind: arrow;
}

.xp-canvas input,
.xp-canvas textarea {
  --xp-cursor-kind: ibeam;
}

.xp-shutdown-overlay {
  z-index: 120;
}

.xp-window-button {
  position: absolute;
  width: 21px;
  height: 21px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.xp-window-button:hover {
  background-position: 0 -21px;
}

.xp-window-button:active {
  background-position: 0 -42px;
}

.xp-canvas .xp-ie-qmgz-button:active {
  background-image: var(--xp-qmgz-pressed-image);
  background-position: var(--xp-qmgz-pressed-position);
  background-size: var(--xp-qmgz-pressed-size);
  background-repeat: no-repeat;
}

.xp-canvas .xp-ie-qmgz-button:active .xp-ie-qmgz-help-button-glyph {
  transform: translate(1px, 1px);
}

.xp-canvas .xp-ie-qmgz-dialog-close {
  background-position: 0 0;
}

.xp-canvas .xp-ie-qmgz-dialog-close:hover {
  background-position: 0 -21px;
}

.xp-canvas .xp-ie-qmgz-dialog-close:active {
  background-position: 0 -42px;
}

.xp-canvas .xp-ie-qmgz-dialog.is-inactive .xp-ie-qmgz-dialog-close,
.xp-canvas .xp-ie-qmgz-dialog.is-inactive .xp-ie-qmgz-dialog-close:hover,
.xp-canvas .xp-ie-qmgz-dialog.is-inactive .xp-ie-qmgz-dialog-close:active {
  background-position: 0 -63px;
}

.xp-window.is-inactive .xp-window-button,
.xp-window.is-inactive .xp-window-button:hover,
.xp-window.is-inactive .xp-window-button:active {
  background-position: 0 -63px;
}

.xp-shutdown-button[data-xp-shutdown-action="cancel"]:active {
  background-image: url("../assets/shutdown/cancel-pressed.png");
}

.xp-shutdown-button.is-icon-button {
  background-repeat: no-repeat;
}

.xp-shutdown-button.is-icon-button:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
}

.xp-shutdown-button.is-icon-button:active {
  background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
}

.xp-canvas .xp-ie-go-hit:active .xp-ie-go-shade {
  border-top: 1px solid #716F64;
  border-left: 1px solid #716F64;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  background-image: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
}

.xp-canvas .xp-msn-link,
.xp-canvas .xp-viewer-page,
.xp-canvas .xp-ie-results-title,
.xp-canvas .xp-ie-facebook-attach-thumb,
.xp-canvas .xp-ie-facebook-photo,
.xp-canvas .xp-ie-facebook-attach-title,
.xp-canvas .xp-ie-qmgz-login-hit,
.xp-canvas .xp-ie-qmgz-reset-hit,
.xp-canvas .xp-ie-qmgz-help-link {
  --xp-cursor-kind: link;
}

.xp-canvas.is-busy,
.xp-canvas.is-busy * {
  --xp-cursor-kind: busy !important;
}

.xp-canvas .xp-phone-clear,
.xp-canvas .xp-phone-key,
.xp-canvas .xp-phone-call-button,
.xp-canvas .xp-phone-action {
  --xp-cursor-kind: arrow;
}

.xp-window {
  outline: none;
}

.xp-window-title,
.xp-window-title-text {
  pointer-events: none;
}

.xp-window-title-text {
  text-shadow: 1px 1px 0 #0A1883;
}

.xp-window.is-inactive .xp-window-title-text {
  color: #D8E4F8 !important;
  text-shadow: none;
}

.xp-taskbar-start:focus-visible,
.xp-taskbar-window-button:focus-visible {
  outline: 1px dotted #FFFFFF;
  outline-offset: -5px;
}

.xp-reset-dialog button:focus-visible,
.xp-shutdown-button:focus-visible {
  outline: 1px dotted #000000;
  outline-offset: -4px;
}
