:root { /*these colours will be used by default...*/
--bg: hsl(0 0% 96.1%);
--primary: hsl(190 100% 42.5%);
--highlight: hsl(0 0% 100%);
--text: hsl(0 0% 0%);
--onhover: hsl(0 0% 80.4%);
--popupbg: hsla(0, 0%, 0%, 0.33);
--alternate: hsl(48.54, 83.18%, 79.02%)
}

/*unless dark mode is toggled, then these become the root
and are used instead*/
.dark-mode {
--bg: hsl(0 0% 12.5%);
--primary: hsl(190 100% 27.6%);
--highlight: hsl(0 0% 20.8%);
--text: hsl(0 0% 100%);
--onhover: hsl(0 0% 32.9%);
--popupbg: hsla(0, 0%, 0%, 0.33);
--alternate: hsl(48.54, 83.18%, 29.02%)
}


body {
    background-color: var(--bg);
    font-family: 'Manrope';
}

.text {
    font-family: 'Manrope';
    color: var(--text);
}