:root {
	--color-background:#080808;
	--color-text:#f4f1e9;
	--color-muted:#c8c1b4;
	--color-roberts-red: #b00707;
	--color-gold:#c69b35;
	--color-gold2:#e0b84e;

	--color-gold25: color-mix(in srgb, var(--color-gold) 25%, transparent);
	--color-gold50: color-mix(in srgb, var(--color-gold) 50%, transparent);
	--color-gold75: color-mix(in srgb, var(--color-gold) 75%, transparent);

	--color-bg1: rgba(255, 255, 255, 0.025);
	--color-bg2: rgba(255, 255, 255, 0.05);

	--max-width: 1700px;
}

@property --color-fill {
	syntax: '<color>';
	inherits: true;
	initial-value: transparent;
}

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


html {
	scroll-behavior: smooth;
	font-size: 10px;
}

body {
	background: var(--color-background);
	color: var(--color-text);
	font-family: "Libertinus Serif", Georgia, "Times New Roman", serif;
	background-image: url('../img/bg-pattern-dark.png');
	background-repeat: repeat;
	background-blend-mode: screen;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
	text-transform: uppercase;
	color: var(--color-gold);
	font-weight: 400;
}

a {
	text-decoration: none;
	transition: 0.3s ease-out;
	color: var(--color-gold);
}

a:hover {
	text-decoration: underline;
}

p {
	font-size: 1.6em;
}

hr {
	height: 1px;
	border: 0;
	border-top: 1px solid var(--color-gold);
	margin: 0 0 22px;
}

main {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 2rem;
	flex: 1;
}

.ornament{
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 25px 0;
}

.ornament:before,
.ornament:after {
	content: "";
	height: 1px;
	background: var(--color-gold50);
	flex: 1
}

button, .link-button {
	display: inline-block;
	margin-top: 8px;
	border: 1px solid var(--color-gold);
	padding: 13px 26px;
	color: var(--color-gold2);
	background-color: var(--color-bg1);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: 0.3s all ease-out;
}

button:hover, .link-button:hover {
	text-decoration: none;
	background: var(--color-gold);
	color: var(--color-background);
}

.link-button:hover .button-icon {
	--color-fill: var(--color-background);
}

button:disabled {
	opacity: 0.75;
	cursor: default;
	background: var(--color-gold);
	color: var(--color-background);
}

button:disabled:hover {
	background: var(--color-gold);
	color: var(--color-background);
	cursor: default;
}

.button-icon {
	display: inline-block;
	margin-right: 1rem;
	transform: translateY(2px);
	width: 13px;
	height: 13px;
	--color-fill: var(--color-gold);
	transition: all 0.3s ease-out;
}


input,
textarea {
	display: block;
	width: 100%;
	margin: 1rem 0;
	background-color: var(--color-background);
	border: 1px solid var(--color-gold25);
	color: var(--color-text);
	padding: 1.5rem;
	font-family: "Libertinus Serif", Georgia, "Times New Roman", serif;
	font-size: 2rem;
}

textarea {
	min-height: 120px;
}

input:focus,
textarea:focus {
	outline: 3px solid var(--color-gold);
	box-shadow: 0 0 2rem var(--color-gold25);
}

input[data-valid="none"],
textarea[data-valid="none"] {
	outline: none;
}

input[data-valid="false"],
textarea[data-valid="false"] {
	outline: 3px solid var(--color-roberts-red);
}

input:disabled,
textarea:disabled {
	opacity: 0.3;
}

label {
	font-size: 1.3rem;
	line-height: 120%;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--color-gold);
	letter-spacing: .08em;
	text-transform: uppercase;
}