base.scss

@use "mixins" as *;
@use "colors" as *;

*,
::before,
::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--main-font: "Raleway", sans-serif;
	--title-font: "Montserrat", serif;
	--monospace-font: "Iosevka", "Ubuntu Mono", monospace;

	--bg-color: var(--primary);
	--bg-color-b: var(--bg-b);

	&:not(.light):not(.dark) {
		@include light-mode;

		@include dark {
			@include dark-mode;
		}
	}

	&.light {
		@include light-mode;
	}

	&.dark {
		@include dark-mode;
	}
}

header,
aside {
	--bg-color: var(--primary);
	--bg-color-b: var(--bg-b);
}

main {
	--bg-color: var(--bg-b);
	--bg-color-b: var(--bg);
}

footer {
	--bg-color: var(--bg);
	--bg-color-b: var(--bg-b);
}

html {
	text-rendering: optimizeLegibility;
	line-height: 1.5;
	font: 400 var(--font-size, 16px) var(--main-font);
}

[title] {
	cursor: help;
}

button,
input[type="submit"],
a {
	touch-action: manipulation;
}