@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap);
@import url(header/header.css);
@import url(sidebar/sidebar.css);
@import url(main/main.css);

:root {
  --primary-clr: #96C291;
  --secondary-clr: #FFDBAA;
  --soft-bg-clr: #F4EEEE;
  --main-clr: #fff;
  --text-clr: #212529;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--soft-bg-clr);
  display: grid;
  font-family: 'Roboto', sans-serif;
  grid-template: 180px auto / 1fr 4fr;
  position: relative;
}

body,
html {
  min-height: 100vh;
}

.icon {
  width: clamp(20px, 3%, 50px);
}

.profile-img {
  background-color: goldenrod;
  border-radius: 50%;
  height: 60px;
  width: 60px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-clr: #040D12;
    --secondary-clr: #5C8374;
    --soft-bg-clr: #93B1A6;
    --main-clr: #183D3D;
    --text-clr: #f5f5f5;
  }

  img:not(.profile-img) {
    filter: invert(100%) sepia(1%) saturate(276%) hue-rotate(167deg) brightness(115%) contrast(92%);
  }
}