@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');

html {
	scroll-behavior: smooth;
	background-color: rgb(19, 16, 16);
	background-image: url('/public/coolasfuck.svg');
	background-size: 3000px;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position: -150% -100px;
}

:root {
	color: white;
	background-color: rgb(12, 6, 6);
	font-family: "Cabin", sans-serif;
	font-size: 17px;
	font-weight: 700;

	--accent: rgb(136, 10, 19);
	--accent-rgb: 183, 17, 29;
	--surface-overlay: #101010;
}

.wiki-link {
	color: inherit;
	text-decoration: none;
	border-radius: 3px;
	padding: 0 3px;
	transition: filter 0.15s ease;
}

.wiki-link:hover {
	filter: brightness(1.3);
}

body {
	width: min(90%, 1150px);
	margin: 2.5rem auto;
	display: flex;
	flex-direction: column;
	text-align: center;
	border: 2px solid var(--accent);
	background-color: rgb(46, 25, 26);
	min-height: calc(100vh - 5rem);
	padding: 1rem;
	border-radius: 5px;
	box-sizing: border-box;
}


@media (max-width: 1500px) {
	.site-header {
		min-height: unset;
		padding: 12px 16px 0;
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"brand brand"
			"search toggle"
			"nav nav";
	}
	body {
	min-width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	text-align: center;
	border: 2px solid var(--accent);
	background-color: rgb(48, 22, 22);
	min-height: 100vh;
	padding: 1rem;
	border-radius: 5px;
	box-sizing: border-box;
}}