@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Kaisei+Decol&display=swap");

:root {
	--primary: #000;
	--primary-alt: #fff;
	--bg: #fff;
	--secondary: #000;
	--text: #8e8e8e;
	--text-alt: #fff;
	--border: #ececec;
	--border-dark: hsl(from var(--border) h s l / 0.1);
	--text-light: #888;
	--border-radius: 8px;
	--font: "Figtree", sans-serif;
	--font-heading: "Kaisei Decol", serif;
	--container-width: 1300px;
	--gradient1: linear-gradient(137.33deg, #131313 23.98%, #323232 101.79%);
}

* {
	box-sizing: border-box;
}

a {
	color: var(--secondary);
}

body {
	font-family: var(--font);
	color: var(--text);
}

.content {
	max-width: var(--container-width);
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

.default-button {
	background: var(--primary);
	color: var(--text-alt);
	padding: 15px 20px;
	text-decoration: none;
	display: inline-flex;
	text-transform: uppercase;
	align-items: center;
	outline: 0px solid transparent;
	transition: outline 0.3s ease-in-out;

	&:after {
		content: var(--icon-arrow-right);
		font-family: "icons";
		font-size: 1.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		transition: text-indent 0.2s ease-in-out;
	}

	&:hover {
		transition: outline 0.3s ease-in-out;
		outline: 8px solid hsl(from var(--primary) h s l / 0.3);

		&:after {
			text-indent: 8px;
		}
	}
}

@property --featuredBlocksColor1 {
	syntax: "<color>";
	initial-value: rgba(0, 0, 0, 0.6);
	inherits: false;
}

@property --featuredBlocksColor2 {
	syntax: "<color>";
	initial-value: rgba(0, 0, 0, 0);
	inherits: false;
}