* {
	box-sizing: border-box;
	margin: 0;
}

html {
	font-feature-settings: "kern", "liga", "pnum";
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	scroll-behavior: smooth;
}

body {
	color: #262626;

	position: relative;
	min-height: 100vh;
	overflow-y: scroll;
}

::-moz-selection {
	color: theme("colors.white");
	background: theme("colors.blue.800");
	text-shadow: none;
}

::selection {
	color: theme("colors.white");
	background: theme("colors.blue.800");
	text-shadow: none;
}

svg[aria-hidden] {
	display: none;
}

.outer-container {
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}

.container {
	@apply mx-auto;
}

:root::after {
	font-size: 8px;
	position: fixed;
	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
	user-select: none;
	pointer-events: none;
	z-index: 999999;
	top: 0;
	left: 10px;
	white-space: pre-wrap;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border-radius: 0 0 2px 2px;
	font-weight: normal;
	padding: 0.5em 1em;
	letter-spacing: 0.1em;
	line-height: 1.5;
	content: "base";

	@apply bg-red-500 sm:bg-yellow-500 md:bg-yellow-300 lg:bg-green-500 xl:bg-blue-500 xxl:bg-indigo-500 xxxl:bg-purple-500;
}

:root::after {
	content: "mobile";
}

@screen sm {
	:root::after {
		content: "sm: 480px";
	}
}
@screen md {
	:root::after {
		content: "md: 768px";
	}
}
@screen lg {
	:root::after {
		content: "lg: 1024px";
	}
}
@screen xl {
	:root::after {
		content: "xl: 1280px";
	}
}
@screen xxl {
	:root::after {
		content: "xxl: 1600px";
	}
}
@screen xxxl {
	:root::after {
		content: "xxxl: 1920px";
	}
}