body {
	color: var(--base-ultra-dark);
}
body,
button {
	font-family: Space Grotesk !important;
}

.snackbar {
	display: none !important;
}

@view-transition {
	navigation: auto;
}
header,
main,
body {
	animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

:root {
	--desktop-contained: 768px;
	--filter-plus: brightness(0) saturate(100%);
	--filter-base-ultra-dark: invert(0%) sepia(12%) saturate(1454%) hue-rotate(320deg) brightness(93%) contrast(84%);
	--filter-white: invert(100%) sepia(35%) saturate(2%) hue-rotate(119deg) brightness(112%) contrast(100%);

	--accent: #e13f2e;
	--accent-dark: #a6534a;

	--base: #f19a36;
	--base-light: #fed170;
	--base-ultra-light: white;
	--base-ultra-dark: #141414;

	--primary: #a2b79e;
	--primary-dark: #3c433a;
	--primary-dark-trans: #eaf5ee;
	--primary-light: #b9dcc5;

	--secondary-dark: #417b83;

	--radius-m: 4px;
	--radius-l: 6px;
	--gutter: 25px;

	--border-color: rgba(60, 67, 58, 0.2);
	--border-m: 1px solid var(--border-color);

	--bold: 600;
}
.gutter {
	padding-inline: var(--gutter);
}
.bold {
	font-weight: 600;
}

/* Fonts */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: Space Grotesk;
	font-style: normal;
	font-weight: 400;
	src: url("../../media/fonts/space-grotesk-v22-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: Space Grotesk;
	font-style: normal;
	font-weight: 500;
	src: url("../../media/fonts/space-grotesk-v22-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Normal */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: Space Grotesk;
	font-style: normal;
	font-weight: 700;
	src: url("../../media/fonts/space-grotesk-v22-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.heading-font {
	font-family: var(--heading-font);
}

ul li::marker {
	color: var(--primary);
}

/* ===== Scrollbar CSS ===== */
/* Firefox */

* {
	scrollbar-width: auto;
	scrollbar-color: var(--base-trans-90) white;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 10px;
}

*::-webkit-scrollbar-track {
	background: var(--base-trans-60);
	margin: 0.5em;
}

*::-webkit-scrollbar-thumb {
	background-color: #0000009e;
	border-radius: 10px;
	outline: 1px solid #ffffff0f;
	outline-offset: -3px;
	border: 1px solid #ffffff5e;
}

/******

DEFAULTS 

******/

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: pretty;
}
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
	font-style: normal;
}

.menu-socials a img {
	transition: filter 0s;
}
@media screen and (min-width: 1026px) {
	.menu-socials a:hover img {
		filter: brightness(0) invert(1);
	}
}