@import url("/Components/Alert/alert.css");
@import url("/Components/Avatar/avatar.css");
@import url("/Components/Badge/badge.css");
@import url("/Components/Button/button.css");
@import url("/Components/Card/card.css");
@import url("/Components/Image/image.css");
@import url("/Components/Input/input.css");
@import url("/Components/Text-Utility/text.css");
@import url("/Components/List/list.css");
@import url("/Components/Modal/modal.css");
@import url("/css/utility.css");
@import url("/Components/Navigation/navigation.css");
@import url("/Components/Toast/toast.css");
@import url("/Components/Grid/grid.css");
@import url("/Components/Slider/slider.css");
@import url("/Components/Rating/rating.css");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300&family=Poppins:wght@300;400&family=Ubuntu:wght@300;400&display=swap");

:root {
  --main-bg-color: #f5f7f9;

  /* alert*/
  --pm-alert-color: #91c4f5;
  --suc-alert-color: #76c893;
  --warn-alert-color: #ffe169;
  --dgr-alert-color: #ff8fab;

  /*badges*/
  --online: rgb(32, 184, 32);
  --offline: rgb(187, 179, 179);
  --dnd: rgb(233, 104, 104);
  --num-badge: rgb(63, 187, 224);

  /*button*/
  --primary: #007fff;
  --primary-light: #62adf8;
  --secondary: #0059b2;
  --disabled: #007fff75;
  --warning: red;

  --font-color: #ffffff;
  --shadow-color: #333333;

  /*card*/
  --card-bg: #fff;
  --card-title-color: rgb(255, 80, 133);
  --cross-icon-color: #6c757d;
  --card-container-bg: rgb(235, 233, 233);

  /*Text-Utility*/
  --grey-color: rgb(131, 128, 128);

  /*Modal*/
  --grey-light: rgb(209, 204, 204);

  --yellow-shade: #dabd18b2;
}

.doc-container {
  margin: 6rem 0 0 0;
  gap: 7rem;
}
.doc-content {
  width: 70%;
  gap: 2rem;
}
.content-title {
  margin: 0;
}
.content-subtitle {
  font-size: 1.4rem;
  line-height: 3rem;
}
.code-snippet {
  font-size: 1.3rem;
  z-index: -1;
}

.example-div {
  align-items: center;
  border-radius: 0.5rem;
  background-color: var(--main-bg-color);
  gap: 1.5rem;
  justify-content: center;
  padding: 2rem;
}

/* Testing*/

.navbar .drawar-container {
  display: none;
}

.backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 18;
  background-color: rgba(0, 0, 0, 0.4);
}

.drawar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 260px;
  z-index: 19;
  background-color: white;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0.6rem;
  transition: 0.5s;
  transform: translateX(-100%);
}
.drawar .left-nav {
  margin: 2rem auto;
}

@media screen and (max-width: 700px) {
  .doc-content {
    width: 100%;
  }
  .lib-title {
    display: none;
  }
  .navbar .drawar-container {
    display: block;
  }
}