:root {
	/* Sizing & Layout */
	--corner-size: 50%;
	--content-radius: 15px;
	--header-footer-height: 3.5rem;

	--content-padding: 1rem;
	--content-margin: 1rem;

	/* Colors */
	--bg-color: rgb(28, 28, 28);
	--header-footer-bg: rgba(14, 14, 14, 1);
	--content-pane-bg: rgba(0, 0, 0, 0);
	--corner-bg: rgba(14, 14, 14, 1);
	--corner-hover-bg: rgba(39, 39, 39, 1);
	--form-bg: rgba(51, 51, 51, 1);
	--form-border: rgb(170, 170, 170);
	--form-hover-bg: rgba(68, 68, 68, 1);

	/* Effects */
	--blur-radius: 16px;
	--angle: 0deg;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

/* SHARED HTML DEFINITIONS*/

html {
	position: relative;

	background-color: var(--bg-color);

	scrollbar-width: thin;
	scrollbar-color: var(--form-border) var(--bg-color);
}

/* SPINNING PEN BACKGROUND*/
html::before {
	content: "";

	position: fixed;
	z-index: -2;
	inset: 0;

	transform: rotate(var(--angle));

	margin: auto;
	width: 75vmin;
	height: 75vmin;

	background: url("images/full_logo.png") center/contain no-repeat;
}

html.smooth-transition::before {
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

html,
body {
	margin: 0;
	height: 100dvh;

	font-family: system-ui, -apple-system, sans-serif;
	color: white;
}

body {
	flex-direction: column;

	display: flex;
}

h1 {
	margin: 0;
	padding: 0;
}

header,
footer {
	z-index: 10;
	align-items: center;
	justify-content: center;

	display: flex;

	height: var(--header-footer-height);
	min-height: 3rem;
	padding: 1rem;

	background: var(--header-footer-bg);
	/* backdrop-filter: blur(var(--blur-radius));
    -webkit-backdrop-filter: blur(var(--blur-radius)); */

	text-align: center;
}

.header-link,
.footer-link {
	color: inherit;
	text-decoration: none;
}

main {
	position: relative;
	flex: 1;
	align-items: center;
	justify-content: center;
	container-type: size;

	display: flex;
}

.pen-graphic {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);
}

/* content pane */
.content-pane {
	overflow-y: auto;

	width: 75%;
	max-width: max(50vw, 50vh);
	height: auto;
	max-height: max(50vw, 50vh);
	padding: 2rem var(--content-padding) 2rem var(--content-padding);

	border-radius: var(--content-radius);
	background: var(--content-pane-bg);
	backdrop-filter: blur(var(--blur-radius));
	-webkit-backdrop-filter: blur(var(--blur-radius));
	-webkit-mask-image: linear-gradient(transparent, black 10%, black 90%, transparent);
	mask-image: linear-gradient(transparent, black 10%, black 90%, transparent);
}

.content-pane h2 {
	text-align: center;
	margin: 0;
}

#page-content {
	align-items: center;
	justify-content: center;

	display: flex;

	width: 100%;
	height: 100%;
}

/* END SHARED HTML DEFINITIONS*/

/* CORNER NAV */

.corner {
	position: absolute;

	display: flex;

	transition: background-color 0.3s ease;

	aspect-ratio: 1 / 1;

	background: var(--corner-bg);
	/* backdrop-filter: blur(var(--blur-radius));
    -webkit-backdrop-filter: blur(var(--blur-radius)); */

	text-decoration: none;
	color: inherit;
}

.corner:hover {
	background: var(--corner-hover-bg);
}

.corner span {
	padding: 5vw;

	font-size: clamp(0.9rem, 2vw, 1.2rem);
	font-weight: 600;
}

@container (orientation: landscape) {
	.corner {
		height: var(--corner-size);
	}
}

@container (orientation: portrait) {
	.corner {
		width: var(--corner-size);
	}
}

.top-left {
	top: 0;
	left: 0;
	align-items: start;
	justify-content: left;

	clip-path: polygon(0 0, 100% 0, 0 100%);
}

.top-right {
	top: 0;
	right: 0;
	align-items: start;
	justify-content: right;

	clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.bottom-left {
	bottom: 0;
	left: 0;
	align-items: end;
	justify-content: left;

	clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.bottom-right {
	bottom: 0;
	right: 0;
	align-items: end;
	justify-content: right;

	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* END CORNER NAV */

/* CONTACT US FORM DEFINITIONS */

.form-box {
	flex-direction: column;
	justify-content: center;

	display: flex;
}

.form-group label {
	display: block;

	margin-top: var(--content-margin);
	margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
	border: 1px solid var(--form-border);
	width: 100%;
	padding: 0.5rem;

	background: var(--form-bg);

	font: 1em system-ui;
	color: white;
}

.form-group textarea {
	height: 100px;
	min-height: 100px;
	resize: vertical;
}

.form-group button[type="submit"] {
	display: block;

	margin: 0rem auto 0;
	border: none;
	width: 80%;
	padding: var(--content-padding);

	background: var(--form-bg);
	cursor: pointer;

	font: bold 1.1em system-ui;
	color: white;
}

.form-group button[type="submit"]:hover {
	background: var(--form-hover-bg);
}

.recaptcha-wrapper {
	justify-content: center;

	display: flex;

	padding: var(--content-margin);
}

/* END CONTACT US FORM DEFINITIONS */