:root {
    --background-color: hsl(0, 0%, 100%);
    --text-color: hsl(0, 0%, 0%);
    --card-background: hsl(0, 0%, 98%);
    --header-border: hsl(225, 89%, 93%);
    --overlay-background: hsl(229, 100%, 96%); 
    --accent-subtle:hsla(223, 100%, 84%, 1);
    --accent:hsla(223, 100%, 84%, 1);
    --tint	:hsla(223, 100%, 84%, 1);

}

.dark-mode {
    --background-color: hsla(223, 28%, 15%, 1);
    --text-color: hsl(0, 0%, 100%);
    --card-background: hsl(0, 0%, 12%);
    --header-border: hsl(0, 0%, 20%);
    --overlay-background: hsl(222, 44%, 8%); 
    --tint	:hsla(223, 8%, 65%, 1);
    --accent-subtle:hsla(225, 34%, 37%, 1);
   
}


@font-face {
    font-family: 'Fira';
    src: url('../fonts/Fira_Sans/FiraSans-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Fira2';
    src: url('../fonts/Fira_Mono/FiraMono-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}