/* =========================
   Global Invariants
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  outline: 0.5px solid #39FF1400;
}

/* Remove default list styling only inside nav elements */
nav ul,
nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body {
  margin: 0;
  padding: 0;
  min-width: 1000px;
  background: var(--gray-2);
}

/* Root layout: window is a vertical box */
body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}

/* =========================
   Layout Primitives
   ========================= */

.hbox {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

.vbox {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* =========================
   Flex Isolation
   ========================= */

.hbox > *,
.vbox > * {
  min-width: 0;
  min-height: 0;
}

/* =========================
   Flex Ratio Modifiers (self-contained)
   ========================= */

.flex-0 { flex-grow: 0; flex-shrink: 1; flex-basis: 0; }
.flex-1 { flex-grow: 1; flex-shrink: 1; flex-basis: 0; }
.flex-2 { flex-grow: 2; flex-shrink: 1; flex-basis: 0; }
.flex-3 { flex-grow: 3; flex-shrink: 1; flex-basis: 0; }
.flex-4 { flex-grow: 4; flex-shrink: 1; flex-basis: 0; }
.flex-5 { flex-grow: 5; flex-shrink: 1; flex-basis: 0; }

/* =========================
   Alignment Modifiers
   ========================= */

/* Cross-axis alignment */
.align-start   { align-items: flex-start; }
.align-center  { align-items: center; }
.align-end     { align-items: flex-end; }
.align-stretch { align-items: stretch; }

/* Main-axis distribution */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* =========================
   Optional Utilities
   ========================= */

.scroll { overflow: auto; }