@font-face {
	font-family: 'ACaslonPro';
	src: url('fonts/ACaslonPro-Regular.otf') format("opentype");
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
}

	@font-face {
	font-family: 'ACaslonPro';
	src: url('fonts/ACaslonPro-Italic.otf') format("opentype");
	font-weight: 400;
	font-style: italic;
	font-stretch: normal;
}

	@font-face {
	font-family: 'ACaslonPro';
	src: url('fonts/ACaslonPro-Semibold.otf') format("opentype");
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
}

*, *::before, *::after {
    box-sizing: border-box; /* Includes padding and border in width/height */
}

html, body {
	margin:0;
	font-family: "ACaslonPro";
	color: #ffffff;
	-webkit-text-size-adjust: 100%;
	/* this turns on kerning and ligatures */
	-moz-font-feature-settings: "liga", "kern";
	-moz-font-feature-settings: "liga=1, kern=1";
	-ms-font-feature-settings: "liga", "kern";
	-o-font-feature-settings: "liga", "kern";
	-webkit-font-feature-settings: "liga", "kern";
	font-feature-settings: "liga", "kern";
}

.swash {
	-moz-font-feature-settings: "swsh";
	-webkit-font-feature-settings: "swsh";
	font-feature-settings: "swsh";
}

h1 {
	font-weight: 400;
	font-style: italic;
	-moz-font-feature-settings: "swsh";
	-webkit-font-feature-settings: "swsh";
	font-feature-settings: "swsh";
	letter-spacing: -0.02em;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1em 1em 0 1em;
	background: #6D0100;
}

main {
	display: flex;
	flex-direction: column;
	width: 100%;
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 1em 0;
}

.glow {
	-webkit-filter: drop-shadow( 0px 0px 20px rgba(0, 0, 0, .2));
	filter: drop-shadow( 0px 0px 20px rgba(0, 0, 0, .2));
}

a {
	color: white;
}

.content {
	max-width: 40em;
	padding: 2em;
	background-color: white;
	color: black;
	border-radius: 0.5em;
}

.content a {
	color: blue;
}

a.button {
	margin: 0 0 1em 0;
	display: block;
	cursor: pointer;
	text-align: center;
}

section.content {
	width: 100%;
    max-width: 40em;
    margin: 2em auto;
    padding: 1em;
    background-color: white;
	color: black;
    border-radius: 0.5em; /* Container border-radius */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.support-form {
	width: 100%;
    max-width: 40em;
    margin: 2em auto;
    padding: 1em;
    background: #f9f9f9;
    border-radius: 0.5em; /* Container border-radius */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.support-form form {
    display: flex;
    flex-direction: column; /* Stack form elements vertically */
    gap: 0.5em; /* Space between elements */
    align-items: stretch; /* Stretch children to fill container width */
}

.support-form h2 {
	color: #A70301;
    text-align: center;
    font-size: 1.5em;
    margin: 0;
}

.support-form label {
	color: #A70301;
    font-weight: bold;
    font-size: 1em;
	margin: 1em 0 0 0;
}

.support-form input,
.support-form textarea {
	display: block;
    padding: 0.75em 0.75em 0.6em 0.75em;
    border: 1px solid #ccc;
    background: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 0.25em; /* Inputs border-radius */
	font-family: "ACaslonPro";
    font-size: 1em;
    /* resize: none;  Prevent textarea resizing */
    outline: none;
}

.support-form input:focus,
.support-form textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.25); /* Subtle glow on focus */
}

.support-form button {
	margin-top: 0.5em;
    padding: 1em 0.75em 0.8em 0.75em;
    background: #A70301;
    color: white;
	font-family: "ACaslonPro";
    font-size: 1em;
    border: none;
    border-radius: 0.25em; /* Button border-radius */
    cursor: pointer;
    transition: background 0.3s ease;
}

.support-form button:hover {
    background: #c00300;
}

.support-form button:active {
    background: #8e0300;
}