@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100;200;300;400;500;600;700;800&display=swap');
/* 
font-family: 'Archivo', sans-serif;
*/
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600&display=swap');
/* 
font-family: 'Teko', sans-serif;
*/

html {
    display: block;
    font-size: 10px;
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Archivo', sans-serif;
}

body {
    background-color: var(--body-color);
    position: relative;
}

a {
    text-decoration: none;
    color: black;
}

hr {
    margin-top: 2rem;
    opacity: .4;
}

ul li {
  list-style: none;
}

/*  */


/*  */

:root {
    --primary-color: #46BC9F;
    --secondary-color: #585357;
    --light-color: white;
    --nav-light: rgba(255, 255, 255, 0.946);
    --dark-color: rgb(68, 68, 68);
    --special-color: #0f8515;
    --title-color: #494949;
    --font-color: #282828;
    --btn-color: #494949;
    --a-color: #494949;
    --input-bg: #e8e8e8;
    --alert-color: rgba(190, 69, 69, 0.115);
    --succsess-color: rgba(31, 174, 31, 0.47);
    --body-color: #f3f3f3;
    --road-map: white;
    --dark-white: white;
    --nav-color: #3D3B40;
    --progress-color: #e5e5e5;
    --footer-title: #212121;
    --footer-text: #646464;
    --list-border: rgb(183, 183, 183);
    --list-selector-bg: rgb(245, 245, 245);
    --inspect-container-border: rgb(170, 170, 170);
    --low-opacity-primary: #46bc9e46;
    --low-opacity-primary-nav: #46bc9eed;
    --alert-color: rgb(227, 65, 65);
}

.dark-theme {
  --body-color: black;
  --secondary-color: rgb(44, 44, 44);
  --light-color: rgb(23, 23, 23) !important;
  --font-color: rgb(209, 209, 209) !important;
  --title-color: white;
  --nav-color: rgb(255, 255, 255);
  --input-bg:rgb(44,44,44);
  --progress-color: rgb(44,44,44);
}

/*  */


::-webkit-scrollbar {
    width: 10px;
  }

/* Track */
::-webkit-scrollbar-track {
  background: #f3f3f3;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color);
}
