:root {
	--bg: #282626;
	--bg2: #1F1D1C;
	--text-color: #FFF6EE;
	--text-color2: #D0C5BA;
	--primary-color: #1A1817;
	--secondary-color: #C69070;
	--margin-cols: 2;
	--link-color: rgb(0, 204, 255);
	--color-filter: invert(88%) sepia(14%) saturate(345%) hue-rotate(322deg) brightness(109%) contrast(101%);
}

html {
	font-size: 62.5%;
	color: var(--text-color);
}

body {
	margin: 0;
	font-family: 'Source Sans 3', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: var(--bg);
	/* background: radial-gradient();*/
	/* background: radial-gradient(ellipse at bottom, color-mix(in srgb, var(--bg) 90%, rgb(10,0,0)) 20%,var(--bg) 50%, var(--bg) 100%);  */
	background-attachment: fixed;
	font-size: 1.4rem;
}

.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 30px;
}

button, .btn {
	outline: none;
	border: none;
	border-radius: 13px;
	font-weight: bold;
	padding: 0.8em 2em;
	font-size: 1.8rem;
	box-sizing: content-box;
	cursor: pointer;
	text-decoration: none;
}

.btn-primary {
	background-color: var(--primary-color);
	color: white;
	font-family: 'metropolis';
}
.btn-primary:focus {
	/* background-color: color-mix(in srgb, var(--primary-color) 80%, var(--text-color)); */
	background-color: var(--secondary-color);
	color: var(--bg);
}
.btn-primary:hover {
	/* background-color: color-mix(in srgb, var(--primary-color) 80%, var(--text-color)); */
	background-color: var(--secondary-color);
	color: var(--bg);
}

.btn-secondary {
	background-color: rgba(0, 0, 0, 0);
	color: var(--text-color);
	/* border: 2px solid var(--text-color); */
	box-shadow: inset 0px 0px 0px 2px var(--text-color);
}

.btn-secondary:hover {
	/* background-color: color-mix(in srgb, var(--bg) 90%, var(--text-color)); */
	background-color: var(--secondary-color);
}

.btn-details {
	border-radius: 50px;
	box-shadow: inset 0px 0px 0px 1px var(--text-color);
	color: var(--text-color);
	padding: 0.4em 2em;
	font-weight: normal;
}



h1{
	font-size: 5.4rem;
	font-family: 'metropolis';
	font-weight: 900;
}

a, a:visited {
	color: var(--link-color);
}

/* @media (prefers-color-scheme: dark) {
	:root {
		--bg: #1c1d1f;
		--text-color: #f0f0f0;
		--primary-color: #375F65;
		--margin-cols: 2;
	}
	body {
		background: var(--bg);
	}
} */

@media screen and (min-width: 2050px) {
	:root {
		--margin-cols: 3;
	}
}