@import "reset.css";
@import "font.css";
@import "button.css";
@import "header.css";
@import "footer.css";
/***************************************************************************
    VARIABLES & THEMES
***************************************************************************/
/*
TO-DO: create a final color palette
*/
:root {
  /* Rem & em 1.0 = 10px */
  font-size: 62.5%;
  /* Hero image for darkmode*/
  --hero: url(../images/hero-image.png);
  /* Change color of calendar icon */
  --calendar-icon-invert: 1;
  /* Darkmode theme colors */
  --bg-dark: oklch(0.12 0.015 245);
  --bg: oklch(0.17 0.02 245);
  --bg-light: oklch(0.22 0.02 245);
  --text: oklch(0.98 0.005 245);
  --text-muted: oklch(0.82 0.01 245);
  --highlight: oklch(0.5 0.02 245);
  --border: oklch(0.32 0.03 245);
  --border-muted: oklch(0.25 0.02 245);
  --primary: oklch(0.70 0.16 245);
  --danger: oklch(0.65 0.18 25);
  --warning: oklch(0.7 0.05 100);
  --success: oklch(0.72 0.14 150);
  --info: oklch(0.7 0.05 260);
  --gradient: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
  --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));
  --border-card: solid 1px var(--border);
  --shadow: 0px 2px 2px var(--bg), 0px 4px 4px var(--bg);
}

.lightmode {
  /* Hero image for lightmode */
  --hero: url(../images/den1.jpg);
  /* Change color of calendar icon */
  --calendar-icon-invert: 0;
  /* Lightmode theme colors  */
  --bg-dark: oklch(0.94 0.01 245);
  --bg: oklch(0.98 0.004 245);
  --bg-light: oklch(1 0 0);
  --text: oklch(0.25 0.02 245);
  --text-muted: oklch(0.50 0.015 245);
  --highlight: oklch(0.94 0.02 245);
  --border: oklch(0.88 0.015 245);
  --border-muted: oklch(0.94 0.005 245);
  --primary: oklch(0.58 0.15 245);
  --danger: oklch(0.65 0.18 25);
  --warning: oklch(0.7 0.05 100);
  --success: oklch(0.72 0.14 150);
  --info: oklch(0.7 0.05 260);
  --gradient: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
  --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));
  --border-card: solid 1px var(--border);
  --shadow: 0px 4px 12px oklch(0 0 0 / 0.08);
}

/* Fallback colors for older browser */
@supports not (color: oklch(0% 0 0deg)) {
  :root {
    /* Darkmode theme colors */
    --bg-dark: hsl(233 16% 8%);
    --bg: hsl(233 16% 13%);
    --bg-light: hsl(233 14% 18%);
    --text: hsl(233 11% 97%);
    --text-muted: hsl(233 6% 79%);
    --highlight: hsl(233 10% 45);
    --border: hsl(233 15% 26%);
    --border-muted: hsl(233 15% 20%);
    --primary: hsl(225 75% 68%);
    --danger: hsl(18 72% 57%);
    --warning: hsl(77 21% 65%);
    --success: hsl(148 48% 66%);
    --info: hsl(215 22% 66%);
  }
  .lightmode {
    /* Lightmode theme colors  */
    --bg-dark: hsl(208 22% 90%);
    --bg: hsl(208 46% 95%);
    --bg-light: hsl(208 100% 100%);
    --text: hsl(210 60% 5%);
    --text-muted: hsl(208 13% 28%);
    --highlight: hsl(208 100% 100%);
    --border: hsl(208 8% 51%);
    --border-muted: hsl(208 11% 63%);
    --primary: hsl(203 98% 24%);
    --danger: hsl(9 21% 41%);
    --warning: hsl(52 23% 34%);
    --success: hsl(147 19% 36%);
    --info: hsl(217 22% 41%);
  }
}
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-muted);
  transition: background-color 200ms, color 200ms;
  font-family: "Barlow", sans-serif;
  line-height: 1.5;
}

/* Images that load in the background */
body:after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url(../images/den1.jpg) url(../images/tma2.jpg);
}

/* Offset for fixed navigation bar to prevent overlapping content */
[id] {
  scroll-margin-top: 150px;
}

.max-width {
  max-width: 1100px;
  width: 90%;
  margin: 0 auto;
}/*# sourceMappingURL=main.css.map */