*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  font-family: "Poppins", sans-serif;
  padding-top: 165px;
  background-color: var(--bg-color);
  transition: color .5s ease-in-out, background-color .5s ease-in-out;
}

.light-theme {
  --bg-color: rgb(245,245,245);

  --title-color: rgb(245,245,245);
  --text-color: rgb(12,12,12);

  --box-shadow-primary-color: rgb(1, 172, 1);
  --box-shadow-secondary-color: rgb(6, 184, 6);
  
  /* Header */
  
  --page-nav-color: rgb(3, 104, 20);
  --scan-name-color:rgb(1, 80, 1);
  --header-sub-bg: rgb(201, 247, 196);
  --search-header-input-bg: white;

  /* Project */
  --project-author-color: rgb(85, 83, 83);
  --project-divisor-color: rgb(6, 190, 6);
  --chapter-hover-color: rgb(245,245,245);
  --chapter-hover-bg: rgb(22, 94, 4);
  --chapter-active-bg: rgba(172, 7, 7, 0.726);
  --project-name-author-hover: rgb(1, 172, 1);
}

.dark-theme {
  --bg-color: rgb(12,12,12);
  --title-color: rgb(222, 224, 222);
  --text-color:rgb(211, 214, 211);
  --specific-search-color: rgb(4, 148, 28);
 
  --project-divisor-color: rgb(3, 226, 3);
  --box-shadow-primary-color: rgb(1, 172, 1);
  --box-shadow-secondary-color: darkgreen;

  /* Header */
  --header-sub-bg: rgb(21, 53, 18);
  --search-header-input-bg: rgb(27, 27, 27);
  --page-nav-color: rgb(4, 148, 28);
  --page-nav-hover: rgb(6, 189, 36);
  --scan-name-color:rgb(3, 128, 3);
  /* Project */
  --chapter-hover-color: rgb(211, 214, 211);
  --chapter-hover-bg: rgb(37, 155, 8);
  --chapter-active-bg: rgba(172, 7, 7, 0.726);
  --project-name-author-hover: rgb(1, 172, 1);
  --project-author-color: gray;

} 



@keyframes shine {
  0%{
    box-shadow: 0 0 2px 0px var(--box-shadow-secondary-color);
  }
  50%{
    box-shadow: 0 0 5px 2px var(--box-shadow-primary-color);
  }
  100%{
    box-shadow: 0 0 2px 0px var(--box-shadow-secondary-color);
  }
}

/* Light Dark Mode Configuration */

#mode-container
{
  position: fixed;
  top: 21%;
  right: 4%;

  z-index: 12;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
}

#light-dark-mode{
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 35px;
  border: none;
  background-color: rgb(152, 248, 152);
  animation: shine 2s ease infinite;

  transition: background-color .15s, box-shadow .25s ease;
  
}


#light-dark-mode:hover{
  background-color: rgb(91, 196, 91);
}

#light-dark-mode:active{
  background-color: rgb(10, 194, 10);;
}