/* ================== */
/* ===   Root Variables    === */
/* ================== */
:root {
  --mobile-breakpoint: 768px;
  /* I am writing it here, but the variable was never reused as that requires postcss */

  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);

  --red: oklch(63.681% 0.20784 25.315);
  --yellow: oklch(79.524% 0.1616 86.05);
  --green: oklch(72.276% 0.19199 149.6);
  --blue: oklch(65.832% 0.1756 254.828);
  --gray: oklch(71.068% 0.0352 256.828);

  --destructive: var(--red);

  --border: oklch(1 0 0 / 10%);
  --border-active: oklch(1 0 0 / 50%);

  --input: oklch(1 0 0 / 15%);
  --input-foreground: oklch(0.985 0 0);
  --input-border: oklch(1 0 0 / 30%);
  --input-border-radius: 0.25em;

  --card: oklch(20.463% 0.00002 271.152 / 0.7);
  --card-foreground: oklch(0.985 0 0);

  --animation-time: 1s;

  /* === Helper === */
  --resize-handle: 0.5em;

  /* === Taskbar === */
  --taskbar-height: 3em;

  --taskbar-icon-open: oklch(66.002% 0.00734 53.036);
  --taskbar-icon-focused: oklch(71.061% 0.11284 246.478);

  /* === Window === */
  --window-header-height: 2em;
  --window-header-background: oklch(0.205 0 0 / 50%);

  --window-radius: 0.5em;
}

/* ================== */
/* ===      Base Styles      === */
/* ================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-size: cover;
  width: 100dvw;
  height: 100dvh;
}

input{
  border: 0;
}

iframe{
  width: 100%;
  height: 100%;
  border: 0;
}