@font-face {
  font-family: "Besley Condensed";
  src: url("fonts/BesleyCondensed-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Besley Narrow";
  src: url("fonts/BesleyNarrow-Book.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.otf") format("opentype");
  font-weight: 400;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Bold.otf") format("opentype");
  font-weight: 700;
}

:root {
	--background: FloralWhite;
	--color: #242e14;
	--hover: #d6ff00; 
/* 	--accent: #2fbb98; */
	--accent: #007557;
	--serif: Palatino, "Palatino Linotype", "Palatino LT STD", serif;
	--sans-serif: "Inter", -apple-system, sans-serif;
	--content-width: 32rem;
}

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

html {
	background: var(--background);
	color: var(--accent);
	font-family: var(--sans-serif);
	font-size: 21px;
}

body {
	font-size: 100%;
	line-height: 1.4;
	margin: 0;
	min-height: 100vh;
}

.visually-hidden {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

header,
section,
footer {
	width: 100%;
	padding-block: 1rem;
	padding-inline: 1.5rem;
}

header > *,
section > *,
footer > * {
	max-width: var(--content-width);
	margin-inline: auto;
}

header {
	padding-block: 2rem;
	background: var(--color);
	color: var(--hover);
}

header p {
	font-family: var(--sans-serif);
	margin-block-start: 2rem;
	margin-block-end: 0;
}

.opening {
	background: white;
	padding-block: 2rem 10rem;
}

.opening p:first-of-type  {
 	margin-block-start: 0;
}

.closing {
	padding-block: 4rem 4rem;
}

.closing .button {
	margin-block-start: 0;
}

footer {
/* 	font-size: .5rem; */
	margin-block-start: 4rem;
	color: rgba(142,144,148,0.7);
}

h1,h2,h3,h4 {
	font-size: inherit;
	margin-block: unset;
	font-family: var(--sans-serif);
}

h1 {
	line-height: inherit;
}

h2 {
	margin-block-start: 2rem;
	margin-block-end: 2rem;
}

h3 {
	font-family: var(--sans-serif);
	font-weight: normal;
	margin-block-start: 2rem;
	margin-block-end: .35rem;
}

footer small {
	display: block;
	font-size: .5rem;
	font-family: var(--sans-serif);
}

footer small a {
	text-decoration: none;
}

ul {
	list-style: none;
	padding-inline: 0;
}

a,
form button {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: .143em;
}

form button {
	text-decoration-line: underline;
}

@media (hover: hover) {
	/* when hover is supported */
	a:hover,
	form button:hover {
		color: var(--color);
		text-decoration-thickness: 2px;
	}
}


img {
	display: block;
	vertical-align: middle;
/* 	border-radius: .175rem; */
	margin-block-start: 2rem;
	width: 100%;
	height: auto;
}

.button,
form button {
	background: var(--accent);
	color: var(--background);
	display: inline-block;
	padding: .7rem .875rem;
	line-height: 1;
/* 	border-radius: .175rem; */
	margin-block-start: 1rem;
}

.button:hover,
form button:hover {
	background: var(--color);
	color: var(--hover);
}

form button {
	outline: 0;
	border: 0;
	cursor: pointer;
	font-size: inherit;
	margin: 0;
}

form input {
	padding: .7rem .875rem;
	border: 1px solid rgba(142,144,148,0.1);
	color: rgba(142,144,148,0.7);
	font-size: inherit;
	line-height: 1;
	display: inline-block;
}

blockquote {
	color: var(--accent);
	margin-block: 4rem 2rem;
	font-size: 1.25rem;
}

.formkit-fields {
	display: flex;
	flex-flow: row nowrap;
	gap: .25rem;
}

.formkit-field {
	flex-grow: 2; 
}
.formkit-input {
	width: 100%;
}

blockquote p {
    margin-block-end: .35rem;
	font-family: "Besley Narrow";
}

blockquote cite {
	font-size: .75rem;
    font-style: unset;
	font-weight: bold;
	display: block;
}

.closing blockquote {
	margin-block-start: 6rem;
}

.has-icon-before:before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.35em;
background-color: currentColor;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
vertical-align: middle;
}

.has-icon-after:after,
form button span:after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.5em;
background-color: currentColor;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
vertical-align: middle;
}
.button.has-icon-after {
	padding-inline: 1rem;
	padding-inline-end: .75rem;
}

.has-chat-icon-before:before,
.has-chat-icon-after:after {
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M22,22v6H6V4H16V2H6A2,2,0,0,0,4,4V28a2,2,0,0,0,2,2H22a2,2,0,0,0,2-2V22Z"/><path fill="currentColor" d="M29.54,5.76l-3.3-3.3a1.6,1.6,0,0,0-2.24,0l-14,14V22h5.53l14-14a1.6,1.6,0,0,0,0-2.24ZM14.7,20H12V17.3l9.44-9.45,2.71,2.71ZM25.56,9.15,22.85,6.44l2.27-2.27,2.71,2.71Z"/></svg>');
}


.has-launch-icon-before:before,
.has-launch-icon-after:after {
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"/><polygon fill="currentColor" points="20 2 20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2"/></svg>');
}

.has-connect-icon-before:before,
.has-connect-icon-after:after {
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon fill="currentColor" points="32 14 28 14 28 10 26 10 26 14 22 14 22 16 26 16 26 20 28 20 28 16 32 16 32 14"/><path fill="currentColor" d="M12,4A5,5,0,1,1,7,9a5,5,0,0,1,5-5m0-2a7,7,0,1,0,7,7A7,7,0,0,0,12,2Z"/><path fill="currentColor" d="M22,30H20V25a5,5,0,0,0-5-5H9a5,5,0,0,0-5,5v5H2V25a7,7,0,0,1,7-7h6a7,7,0,0,1,7,7Z" /></svg>');
}

.has-signup-icon-before:before,
.has-signup-icon-after:after,
form button span:after {
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M29.7,19.3l-3-3c-0.4-0.4-1-0.4-1.4,0L16,25.6V30h4.4l9.3-9.3C30.1,20.3,30.1,19.7,29.7,19.3z M19.6,28H18v-1.6l5-5l1.6,1.6	L19.6,28z M26,21.6L24.4,20l1.6-1.6l1.6,1.6L26,21.6z"/><rect fill="currentColor" x="10" y="23" width="2" height="2"/><rect fill="currentColor" x="14" y="18" width="4" height="2"/><rect fill="currentColor" x="10" y="18" width="2" height="2"/><rect fill="currentColor" x="14" y="13" width="8" height="2"/><rect fill="currentColor" x="10" y="13" width="2" height="2"/><path fill="currentColor" d="M7,28V7h3v3h12V7h3v6h2V7c0-1.1-0.9-2-2-2h-3V4c0-1.1-0.9-2-2-2h-8c-1.1,0-2,0.9-2,2v1H7C5.9,5,5,5.9,5,7v21	c0,1.1,0.9,2,2,2h5v-2H7z M12,4h8v4h-8V4z"/></svg>');
}

.has-download-icon-before:before,
.has-download-icon-after:after {
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon fill="currentColor" points="30 25 28.586 23.586 26 26.172 26 18 24 18 24 26.172 21.414 23.586 20 25 25 30 30 25"/><path fill="currentColor" d="M18,28H8V4h8v6a2.0058,2.0058,0,0,0,2,2h6v3l2,0V10a.9092.9092,0,0,0-.3-.7l-7-7A.9087.9087,0,0,0,18,2H8A2.0058,2.0058,0,0,0,6,4V28a2.0058,2.0058,0,0,0,2,2H18ZM18,4.4,23.6,10H18Z"/></svg>');
}


.has-top-icon-before:before,
.has-top-icon-after:after {
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon fill="currentColor" points="16 4 6 14 7.41 15.41 15 7.83 15 28 17 28 17 7.83 24.59 15.41 26 14 16 4"/></svg>');
}


.has-quote-icon-before:before {
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M12,15H6.11A9,9,0,0,1,10,8.86l1.79-1.2L10.69,6,8.9,7.2A11,11,0,0,0,4,16.35V23a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V17A2,2,0,0,0,12,15Z"/><path fill="currentColor" d="M26,15H20.11A9,9,0,0,1,24,8.86l1.79-1.2L24.7,6,22.9,7.2A11,11,0,0,0,18,16.35V23a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V17A2,2,0,0,0,26,15Z"/><rect fill="none" width="32" height="32"/></svg>');
	display: block;
	width: 1.4rem; 
	height: 1.4rem; 
	margin-block-end: .35rem;
	margin-inline-start: -.143em;
}

header {
	line-height: 1.2;
}

header .lower * {
	margin-block: 0;
}

header .lower {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
}


header img {
	margin-block: 2rem;
	max-width: 100%;
	max-height: 60vh;
	width: auto;
}

.title {
	font-family: 'Besley Condensed', monospace !important;
	font-weight: 500;
	font-size: 2rem;
	line-height: 1.1;
}

header .title {
	font-size: 2.5rem;
	margin-inline-start: -.06em;
}

.subtitle {
	font-weight: 700;
	margin-block-start: 1rem;
}

hr {
	margin-block: 2rem;
	background-color: rgba(142,144,148,0.1);
	height: 2px;
	border: none;
}

.publisher {
/* 	font-weight: 700; */
	color: rgba(142,144,148,0.7);
	margin-block: 2rem 3rem;
}

.publisher small {
	font-size: .75rem;
}

.publisher a:hover {
/* 	color: rgba(142,144,148,1); */
	color: var(--color);
}


.signup {
	margin-block: 4rem 2rem;
}

.author img {
	margin-block-start: -8rem;
}

footer a:hover {
	color: rgba(142,144,148,1);
}

@media screen and (max-width: 32rem) {
	a span {
		display: none;
	}
	.title {
		font-size: 1.75rem;
	}
	header .title {
		font-size: 2rem;
	}

	header img {
		margin-inline: -1rem;
		max-width: calc(100% + 2rem);
	}
}
@media screen and (min-width: 32.01rem) {
	header .upper .subtitle br {
		display: none;
	}
	header {
		min-height: 100vh;
	}
}

.button + small {
	display: block;
	margin-block-start: 1rem;
	font-size: .75rem;
}

.author ul {
	margin-block-start: 3rem;
}

.author li + li {
	margin-block-start: .5rem;
}

img.circle {
	border-radius: 50%;
}

.closing img {
	margin-block-start: 4rem;
}

.opening ul li:before {
	display: inline-block;
	content: "\2192";
	margin-inline-end: .5rem;
}

/* ========== */