@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
  --main-color:#181818;
  --lighter-bg:#242424;
  --secondary-color:#f3f3f3;
  --third:#202020;
  --header-color:white;
  --crimson-color:#dc143c;
  --crimson-shadow:#dc143c88;
  --nav-bck:#0000004d;
  --nav-hover:#bcbcbc4d;
  --text:#a7a7a7; 
  --box-shadow:rgba(229, 9, 20, 0.4);
  --nav-shadow:rgba(255, 255, 255, 0.5);
  --logo-shadow:rgba(255, 255, 255, 0.6);
  --hover-shadow:rgba(255, 255, 255, 0.6);
  --footer-shadow:rgba(104, 15, 19, 0.5);
  --card-shadow: rgb(50 50 50 / 36%);
  --separator-gradient:linear-gradient(90deg, #E50914, #2e1b1b);
  --separator-clr:linear-gradient(45deg, #dc143c, #cc9200);
}

.lightmode{
  --main-color: #f9f9f9; 
  --lighter-bg: #e5e5e5; 
  --secondary-color: #181818; 
  --third: #dedede;
  --header-color: #242424; 
  --crimson-color: #dc143c; 
  --crimson-shadow: #dc143c55; 
  --nav-bck:#bcbcbc4d;
  --nav-hover:#0000004d;
  --text:#242424;
  --nav-shadow:rgba(0, 0, 0, 0.5);
  --logo-shadow:rgba(0, 0, 0, 0.2);
  --hover-shadow:rgba(26, 26, 26, 0.2);
  --footer-shadow:rgba(189, 17, 26, 0.5);
  --separator-gradient:linear-gradient(90deg, #E50914, #f59f9f);
  --separator-clr: linear-gradient(45deg, #dc143c, #7d6600);

}


body{
  font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: var(--main-color);
  transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}