@import url('../../node_modules/bootstrap-icons/font/bootstrap-icons.css');
:root {
    --color-body: #ffff;
    --color-filter: #ffffff9b;
    --color-body-sub: #F2F2F2;
    --color-font: #000000;
    --color-primary: #00a5ff;
    --color-primary-sub: #438cff;
    --color-nav: #000000;
    --color-border: #d7d7d7;
    --color-shadow: #dedede;
    --color-font-sub: #747474;
    --color-hover: #d4d4d4;
    
    --color-body-dark: #101421;
    --color-body-sub-dark: #191e30;
    --color-font-dark: #ffff;
    --color-nav-dark: #ffff;
    --color-border-dark: gray;
    --color-filter-dark: #0000009b;
    --color-shadow-dark: #0000008c;
    --color-font-sub-dark: #8d91a1;
    --color-hover-dark: #1f2538;
}

[data-bs-theme="dark"] {
    --color-filter: var(--color-filter-dark);
    --color-body: var(--color-body-dark);
    --color-body-sub: var(--color-body-sub-dark);
    --color-font: var(--color-font-dark);
    --color-nav: var(--color-nav-dark);
    --color-border: var(--color-border-dark);
    --color-shadow: var(--color-shadow-dark);
    --color-font-sub: var(--color-font-sub-dark);
    --color-hover: var(--color-hover-dark);
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--color-body);
  color: var(--color-font);
}
 
a {
     text-decoration: none;
     color: var(--color-primary-sub);
 }
 
a:hover{
     color: var(--color-primary);
     text-decoration: underline;
 }