@import url("https://fonts.googleapis.com/css2?family=Playfair:ital,wght@0,500;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ultra&display=swap");

:root {
  /* color-scheme: light dark; */
  --main--clr: hsla(38, 92%, 50%, 1);
  --sec--clr: hsla(180, 100%, 33%, 1);
  --opt3--clr: hsla(200, 64%, 84%, 1);
  --title--clr: #464545;
  --text--clr2: #000;
  --text--clr1: #464545;
  --text--clr3: #fff;
  --sub--text--clr1: #bdbaba;
  --font--family--playfair: "Playfair", serif;
  --font--family--ultra: "Ultra", serif;
  --bg1--clr: #fff;
  --header--bg: #fff;
  --footer--bg: #1b1b1b;
  --csh--txt1: #06030e;
  --csh--txt2: #fff;
  --card--bg: #fff;
  --header--shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.08);
  --stacks--shadow: 0 1px 10px 0px rgba(0, 0, 0, 0.1),
    0 -2px 10px 0px rgba(0, 0, 0, 0.1);
}
.dark--mode {
  --bg1--clr: hsla(258, 63%, 5%, 1);
  --header--bg: #1b1b1b;
  --text--clr1: #aca9a9;
  --title--clr: #f8f8f8;
  --opt3--clr: hsla(258, 63%, 5%, 1);
  --card--bg: #1b1b1b;
  --header--shadow: 0 1px 30px 0 rgba(255, 255, 255, 0.08);
  --stacks--shadow: 0 1px 10px 0px rgba(255, 255, 255, 0.1),
    0 -2px 10px 0px rgba(255, 255, 255, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  text-decoration: none;
  list-style-type: none;
  font-family: var(--font--family--playfair);
  outline: none;
  border: none;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  color: var(--text--clr1);
  background: var(--bg1--clr);
  transition: all 300ms linear;
}
/* @media (prefers-color-scheme: light){

} */