:root {
	--color-background: #2a3135;
	--color-text: #eeeeee;

	--color-orange: #e28511;
	--color-teal: #52849c;
	--color-blue:  #3da8db;
	--color-brown: #866f52;
	--color-grey: #48555c;

	--color-primary: var(--color-orange);
	--color-primary-alt: #e25311;

	--color-black: var(--color-background-light);

	--color-separator: var(--color-background-light);

	--color-background-light: #866f52;
  --color-background-lighter: #301b64;
  --color-background-dark: #1b1627;
  --color-background-darker: #171320;

	--font-stack-common: "Segoe UI", Helvetica, Roboto, Arial, sans-serif;;
	--font-stack-heading: Toreks, var(--font-stack-common);

	--transition-xfast: .2s;
	--transition-fast: .25s;
	--transition-normal: .3s;
	--transition-slow: .5s;
	--transition-xslow: .75s;

	--ease-back-out: cubic-bezier(.295, 1.750, .690, .900);

	@media (prefers-reduced-motion: reduce) {
		--transition-xfast: 0;
		--transition-fast: 0;
		--transition-normal: 0;
		--transition-slow: 0;
		--transition-xslow: 0;
	}

	scrollbar-gutter: stable;
}

::selection {
	background: var(--color-blue);
	color: var(--color-text);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}

	:focus {
		transition: outline-offset var(--transition-fast) ease;
		outline-offset: 5px;
	}
}

@font-face {
	font-family: 'Toreks';
	src: url('../fonts/toreks/Toreks.woff2') format('woff2'), url('../fonts/toreks/Toreks.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Toreks';
	src: url('../fonts/toreks/Toreks-italic.woff2') format('woff2'), url('../fonts/toreks/Toreks-italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}



*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font: 400 18px/1.35 var(--font-stack-common);
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
	width: clamp(240px, 50%, 480px);
	margin: 4rem auto;
	border: 0;
	border-bottom: 1px solid currentColor;
	opacity: 	.35;
}

a {
	background-color: transparent;
	color: var(--color-primary);
	text-decoration: none;
	transition: .25s ease-in-out;
}

a:is(:hover, :focus) {
	color: var(--color-primary-alt);
	outline: none;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
}

i[lang] {
	font-style: normal;
}

img,
svg {
	max-width: 100%;
	vertical-align: top;
}

h1, h2, h3, h4 {
	font-family: var(--font-stack-heading);
	margin: 2em 0 .75em;
}

h1 {
	color: var(--color-orange);
}

:where(button, [type=button], [type=reset], [type=submit]):not(:disabled) {
	cursor: pointer;
}

.site {
	min-height: 100dvh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"Header"
		"Main"
		"Footer";
}

.container {
	margin-inline: auto;
	padding-inline: 1rem;
	max-width: 1200px;
}

.site-header {
	padding-block: 1rem;
	grid-area: Header;
	background: var(--color-background);
	color: var(--color-text);
}

.site-main {
	grid-area: Main;
}

.site-footer {
	grid-area: Footer;
}

.site-footer-content {
	padding-block: 1rem;
	background: var(--color-grey);
	color: var(--color-text);
	text-align: center;
}

.site-footer-nav {
	display: flex;
	justify-content: center;
	margin-block: 2rem 1rem;
	gap: 2rem;

	a {
		font-size: 3rem;
		display: inline-flex;
		color: var(--color-white);

		&:is(:hover, :focus-visible) {
			color: var(--color-orange);

			svg {
				transform: scale(1.1);
			}
		}

		svg {
			width: 1em;
			fill: currentColor;
			transition: transform var(--transition-normal) var(--ease-back-out);
		}
	}
}

.site-footer-bottom {
	padding: 1rem 2rem;
	text-align: center;
	background: var(--color-background);
	color: var(--color-text);
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	color: inherit;
	font: 1.5rem var(--font-stack-heading);

	img {
		transition: transform var(--transition-normal) var(--ease-back-out);
	}

	&:is(:hover, :focus-visible) {
		color: var(--color-primary);

		img {
			transform: scale(1.1);
		}
	}
}

.hero {
	background: url(../images/background-hero.jpg) no-repeat center center / cover;
	height: 100%;
	padding-block: 4rem;
	color: var(--color-);
	position: relative;

	h1 {
		color: var(--color-orange);
		text-shadow: 1px 1px 0 var(--color-background-darker);
	}

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		backdrop-filter: blur(5px);
	}
}

.hero-content {
	position: relative;
	padding: 2rem;
	background: rgba(255, 255, 255, .5);
	backdrop-filter: blur(20px) contrast(90%);
	border-radius: 10px;
}

.btn {
	color: var(--color-text);
	background: var(--color-orange);
	padding: .625em 2em;
	font-weight: 600;
	transition: var(--transition-slow) var(--ease-back-out);

	&:is(:hover, :focus-visible) {
		color: inherit;
		background-color: var(--color-teal);
	}
}

.align-center {
	text-align: center;
}