/* FONT FAMILIES */
@font-face {
  font-family: "Supreme-Extrabold";
  src: url("./font-Supreme/Supreme-Extrabold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Supreme-Bold";
  src: url("./font-Supreme/Supreme-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Supreme-Medium";
  src: url("./font-Supreme/Supreme-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Supreme-Regular";
  src: url("./font-Supreme/Supreme-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Supreme-Light";
  src: url("./font-Supreme/Supreme-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ROOT CLASSES */
:root {
  /* -- dark mode - Colors -- */
  /* -- color - colors -- */
  --color-xDark: hsl(0, 0%, 10%);
  --color-Dark: hsl(0, 0%, 15%);
  --color-Neutral: hsl(0, 0%, 20%);
  --color-Light: hsl(0, 0%, 25%);
  --color-xLight: hsl(0, 0%, 88%);
  /* -- text - colors -- */
  --text-light: hsl(0, 0%, 90%);
  --text-muted: hsl(0, 0%, 50%);
  /* -- border - colors -- */
  --border: hsl(0, 0%, 50%);
  --border-d: hsl(0, 0%, 90%);
  /* -- gradient - colors -- */
  --gradient: linear-gradient(0deg, var(--color), var(--color-light));
  /* -- highlighted - colors -- */
  --highlight: hsl(0, 0%, 98%);
  /* -- border - card -- */
  --border-card: 0.5px solid var(--border);
  --border-card-d: 1.2px solid var(--border-d);
  /* -- shadow - color -- */
  --shadow:
    0px 2px 2px hsla(0, 0%, 100%, 0.07), 0px 4px 4px hsla(0, 0%, 100%, 0.15);
  --brand-shadow:
    0px 1.5px 1.5px hsl(105, 95%, 78%), 0px 3.5px 3.5px hsl(146, 50%, 60%);
  --text-shadow: 0px 8px 8px var(--brand-secondary);
  /* -- brand - colors -- */
  --brand-primary: chocolate;
  --brand-secondary: rgb(143, 60, 0);

  /* FONT FAMILY */
  --font-Extrabold: "Supreme-Extrabold";
  --font-Bold: "Supreme-Bold";
  --font-Medium: "Supreme-Medium";
  --font-Regular: "Supreme-Regular";
  --font-Light: "Supreme-Light";

  /* FONT SIZES */
  --text-sm: 1.2rem;
  --text-base: 1.6rem;
  --text-paragraph: 1.6rem;
  --text-h5: 2.5rem;
  --text-h4: 3rem;
  --text-h3: 4rem;
  --text-h2: 5rem;
  --text-h1: 6rem;

  /* HEADING COLORS */
  --heading-color: var(--black);
  --text-color: var(--black);

  /* PADDING - VARIABLES */
  --nav-padding: 1.5rem 0rem;
  --section-padding: 1.5rem 3rem;
  --padding-s: 0.5rem;
  --padding-m: 1rem;
  --padding-l: 1.5rem;
  --padding-xl: 2rem;
  --padding-xxl: 3rem;

  /* SPACING - VARIABLES */
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;

  /* -- Border - Color -- */
  --border-color: rgb(181, 181, 181);

  /* -- Border - Radius -- */
  --border-radius-s: 0.1rem;
  --border-radius-m: 0.5rem;
  --border-radius-l: 1rem;
  --border-radius-xl: 2rem;
  --border-radius-xxl: 3rem;

  /* -- nav - Height -- */
  --nav-height: 8.5rem;

  /* -- Z - indexes -- */
  --z-10: 10;
  --z-100: 100;
}

html {
  font-size: 62.5%;
  font-family:
    var(--font-Regular), var(--font-Light), Arial, Helvetica, sans-serif;
}

body {
  color: var(--text-light);
  background-color: var(--color-xDark);
  /* text-align: center; */
}

.container {
  max-width: 1500px;
  width: 100%;
  height: max-content;
  margin: 0 auto;
}

h1 {
  font-size: var(--text-h1);
  font-family: var(--font-Extrabold);
  line-height: 1;
}
h2 {
  font-size: var(--text-h2);
  line-height: 1;
  font-family: var(--font-Extrabold);
}
h3 {
  font-size: var(--text-h3);
  /* line-height: 1; */
  font-family: var(--font-Bold);
}
h4 {
  font-size: var(--text-h4);
  /* line-height: 1; */
  font-family: var(--font-Bold);
}
h5 {
  font-size: var(--text-h5);
  font-family: var(--font-Medium);
}
p {
  font-family: var(--font-Medium);
  font-size: var(--text-paragraph);
}
a {
  text-decoration: none;
  font-size: var(--text-base);
  display: inline-block;
  transition: all 0.3s ease-in-out;
  color: var(--text-light);
  cursor: pointer;
}
a:hover,
a:active {
  color: var(--brand-primary);
  text-shadow: var(--text-shadow);
}
ul {
  list-style: none;
}
span {
  display: inline-block;
}
.small-text {
  font-size: var(--text-sm);
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ----------------------- COMPONENTS --------------------- */
.highlight {
  color: var(--brand-primary);
}

.light {
  font-family: var(--font-Light);
}

.muted {
  color: var(--text-muted);
}

.btn__icon {
  font-size: var(--text-h5);
}

.btn {
  background-color: var(--color-xLight);
  color: var(--color-Neutral);
  padding: var(--padding-m) var(--padding-l);
  border-radius: var(--border-radius-m);
  border: none;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  box-shadow: 3px 3px 3px var(--brand-secondary);
}

.btn:hover {
  box-shadow: 3.5px 3.5px 4px var(--brand-primary);
  scale: 1.01;
}

/* ---------------- navbar ------------------- */
.navbar {
  height: var(--nav-height);
  padding: var(--nav-padding);
  display: flex;
  justify-content: space-between;
}

.logo {
  text-shadow: 2px 2px 2px var(--brand-primary);
  cursor: pointer;
}

/* ---------------- boards ------------------- */
.board_containers {
  display: flex;
  justify-content: space-between;
}

/* ---------------- brd - 1 ------------------- */
.board_container {
  height: calc(100vh - 10rem);
  width: 30%;
  background-color: var(--color-Dark);
  padding: var(--padding-s) var(--padding-m);
  border-radius: var(--border-radius-m);
}
.container_column {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-s);
}
.container_head,
.container_count {
  color: var(--text-muted);
}
.task_box_container {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.task_box {
  background-color: var(--color-Light);
  padding: var(--padding-m);
  border-radius: var(--border-radius-m);
  cursor: grab;
}

.task_btn {
  padding: var(--padding-s);
  font-size: var(--text-sm);
  background-color: var(--brand-primary);
  color: var(--text-color);
  display: flex;
  justify-self: flex-end;
  box-shadow: 0px 0px 0px;
  border-radius: var(--border-radius-m);
}
.task_btn:hover {
  box-shadow: 1px 1px 1.5px var(--color-xLight);
  scale: 1.01;
}