/* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */

:root {
	--background: hsl(0, 84%, 98%);
	--default: rgb(55, 65, 81);
	--cardBackground: #ffffff;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #251f1f;
		--default: #ffffff;
		--cardBackground: #121212;
	}
}

html {
	box-sizing: border-box;
	height: 100%;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	@include fluid-type(font-size, $minScreen, $maxScreen, $minFont, $maxFont);
	scrollbar-gutter: stable both-edges;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
body {
	line-height: $baseline;
	padding: $baseline 0;
	margin: 0 auto;
	max-width: 22rem;
	font-family: $fontFamily;
	color: var(--default);
	background: var(--background);
}
p {
	line-height: $baseline;
	margin-bottom: $baseline;
}
h1,
h2,
h3,
h4,
h5 {
	font-weight: 700;
	margin-bottom: $baseline;
}
h1 {
	font-size: $h1;
	line-height: $h1;
	margin-top: calc((#{$baseline} - #{$h1}) + #{$baseline});
}
h2 {
	font-size: $h2;
	line-height: $h2;
	margin-top: calc((#{$baseline} - #{$h2}) + #{$baseline}* 2);
}
h3 {
	font-size: $h3;
	line-height: $h3;
	margin-top: calc((#{$baseline} - #{$h3}) + #{$baseline}* 2);
}
h4 {
	font-size: $h4;
	line-height: $h4;
	margin-top: calc((#{$baseline} - #{$h4}) + #{$baseline}* 2);
}
h5 {
	font-size: $h5;
	line-height: $h5;
	margin-top: calc((#{$baseline} - #{$h5}) + #{$baseline}* 2);
}

a {
	color: var(--default);
	filter: brightness(95%);
	&:hover {
		color: transparent;
		filter: $dropShadow;
		-webkit-background-clip: text;
		background-clip: text;
		background-image: $gradient;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-delay: 0ms !important;
		animation-duration: 1ms !important;
	}
}
