@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* ---------- Put footer at bottom ------------ */
/* html 100%, body flex column min-height 100%, #main flex:1 puts the footer at the bottom of every page */
html { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100%; }
#main { flex: 1; }
/* ---------- End Put footer at bottom -------- */


body {
    font-family: "Inter", sans-serif;
}

/* Main set up */
:root {
  --clr-background: #ffffff;
  --clr-text-primary: #495057;
  --clr-border: #dee2e6;
  --clr-accent-selected: hsl(240, 100%, 50%);
  --clr-accent-today: hsl(66, 100%, 78%);
  --clr-action-hover: hsl(135, 80%, 80%);

  --ff-size-sm: 0.85rem;
  --ff-size-xs: 0.7rem;
  --ff-icon-md: 1rem;

  --transition-ease: ease;
  --transition-duration: 0.2s;
  --resize-handle-size: 15px;
  --border-radius: 0.625rem;
}

html[data-bs-theme="dark"] {
  --clr-background: #212529;
  --clr-text-primary: #dee2e6;
  --clr-border: #343a40;
  --clr-accent-selected: hsl(180, 100%, 50%);
}

@media (width <=768px) {
  :root {
    --ff-size-sm: 0.8rem;
    --ff-size-xs: 0.625rem;
    --ff-icon-md: 0.75rem;
    --resize-handle-size: 25px;
    --border-radius: 0.5rem;
  }
}

/* THEME SWITCHER */

.theme-switch-wrapper {
  display: flex;
  align-items: center;
}
.theme-switch {
  display: inline-block;
  height: 28px;
  position: relative;
  width: 60px;
}
.theme-switch input {
  display: none;
}
.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}
.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 20px;
  left: 7px;
  position: absolute;
  transition: 0.4s;
  width: 20px;
}
input:checked + .slider {
  background-color: #3a4853;
}
input:checked + .slider:before {
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
.theme-icon {
  height: 20px;
  width: 20px;
}