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

html {
	font-family:
		"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
		"Helvetica Neue", sans-serif;
}

body {
	min-height: 100vh;
	/* width: 100%; */
}

.heading1 {
	color: blue;
}

.heading2 {
	color: lightblue;
}

:root {
	--logo-purple-light: #e5e3d5;
	--moss-green: #768948;
	--olive: #767522;
	--orange: #fa550e;
	--garlic-grey: #5a654f;
	--mid-blue: #003f7f;

	--logo-background: #e4e0c8;
	--page-background: #ffffff;
	--form-background: #e4e0c8;
	--form-background-light: #f8f4df;

	--p-text: #333333;
	--form-field-background: #fff;
	--form-label: #8e668b;
	--form-prompt: #e5e3d5;

	--button: #6d166d;
	--button-text: #e5e3d5;
	--button-hover: #8d4e9c;

	--error: #fa4f4f;
	--warning: #fa4f4f;
	--tooltip: #ef946c;
	--feedback-background: #bdfaa3;
	--table-row-background: #f7c9b5;
	--feedback-text: #1d1f21;

	--status-message: #1d1f21;
	--sub-head: #1d1f21;

	--table-row-bg-odd: #e4e0c8;
	--table-row-bg-even: #f8f4df;

	--logo-purple: #9c7099;

	--tool-color: #9c7099;

	--violet-50: #f5f1f5;
	--violet-100: #e0d3df;
	--violet-200: #d1bdd0;
	--violet-300: #bd9fbb;
	--violet-400: #b08dad;
	--violet-500: #9c7099;
	--violet-600: #8e668b;
	--violet-700: #6f506d;
	--violet-800: #563e54;
	--violet-900: #422f40;
	--violet-hilite: #6d166d;

	--Head1: 5rem;
	--Head2: 3.812rem;
	--Head3: 2.938rem;
	--Head4: 2.25rem;
	--Head5: 1.688rem;
	--LgeBody: 1.312rem;
	--Reg1Body: 1.2rem;
	--RegBody: 1rem;
	--MedBody: 0.825rem;
	--SmlBody: 0.75rem;
	--TinyBody: 0.562rem;
	--MobileMin: 16px;
}

.Head1 {
	font-size: var(--Head1);
	color: var(--violet-600);
	text-align: center;
}
.Head2 {
	font-size: var(--Head2);
	color: var(--violet-600);
	text-align: center;
}
.Head3 {
	font-size: var(--Head3);
	color: var(--violet-600);
	text-align: center;
	font-weight: 400;
	margin-bottom: 6px;
	margin-top: 10px;
}
.Head4 {
	font-size: var(--Head4);
	color: var(--violet-600);
	text-align: center;
}

.Head5 {
	font-size: var(--Head5);
	color: var(--garlic-grey);
	text-align: center;
	font-weight: 400;
	margin-bottom: 6px;
	margin-top: 10px;
}

.LgeBody {
	font-size: var(--LgeBody);
	color: var(--violet-600);
	margin: 0px;
}

.RegBody {
	font-size: var(--RegBody);
	color: var(--violet-600);
	margin: 0;
}

.MedBody {
	font-size: var(--MedBody);
	color: var(--violet-600);
	margin: 0;
}

.SmlBody {
	font-size: var(--SmlBody);
	color: var(--violet-600);
	margin: 0;
}

.TinyBody {
	font-size: var(--TinyBody);
	color: var(--violet-600);
	margin: 0;
}

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

.btn {
	text-decoration: none;
	padding: 12px 14px;
	margin: 10px;
	color: var(--button-text);
	font-size: 1rem;
	font-weight: 600;
	background-color: var(--button);
	border: none;
	outline: none;
	border-radius: 8px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
	transition: 0.3s ease;
}

.btn-info {
	text-decoration: none;
	padding: 12px 14px;
	margin: 10px;
	color: var(--button-text);
	font-size: 1rem;
	font-weight: 600;
	/* background-color: var(--button); */
	border: none;
	outline: none;
	border-radius: 8px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
	transition: 0.3s ease;
}

.cta {
	margin-top: 16px;
	display: flex;
	gap: 8px;
}

.html-container {
	width: 700px;
	margin: 30px auto;
	background-color: var(--form-background);
	display: flex;
	justify-content: center;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 3px 3px 6px gray;
}

.html-text-container {
	width: 500px;
	padding: 30px;
	margin: 30px;
	border-radius: 10px;
	background-color: var(--form-background-light);
}

.privacy-side-image {
	width: 200px;
	background-color: #721c24;
	background-image: url("/images/cookies_o.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	background-size: cover;
}

.pricing-side-image {
	width: 200px;
	background-color: #721c24;
	background-image: url("/images/manycheeses_o.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	background-size: cover;
}

.features-side-image {
	width: 200px;
	background-color: #721c24;
	background-image: url("/images/veges_o.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	background-size: cover;
}

.about-side-image {
	width: 200px;
	background-color: #721c24;
	background-image: url("/images/lemons.jpg");
	background-position: right;
	background-repeat: no-repeat;
	background-size: auto;
	background-size: cover;
}

.how-works-side-image {
	width: 200px;
	background-color: #721c24;
	background-image: url("/images/platter.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	background-size: cover;
}

.terms-side-image {
	width: 200px;
	background-color: #721c24;
	background-image: url("/images/spoons.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	background-size: cover;
}

.about-container {
	max-width: 700px;
	margin: 30px auto;
	background-color: var(--form-background);
	display: flex;
	justify-content: center;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 3px 3px 6px gray;
}

.about-content {
	max-width: 650px;
	display: flex;
}

.about-text-container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	padding: 30px;
	margin: 30px;
	border-radius: 10px;
	background-color: var(--form-background-light);
}

.about-text-head {
	padding-bottom: 6px;
	padding-top: 8px;
}

.about-text {
	line-height: 1.2rem;
	color: var(--charcoal);
}

.about-para {
	margin-bottom: 6px;
}

.privacy-topic {
	color: var(--violet-600);
	font-size: var(--RegBody);
	background-color: #e6f5c4;
}

.topic {
	color: var(--violet-600);
	font-size: var(--RegBody);
	/* background-color: #e6f5c4; */
	margin-top: 14px;
	margin-bottom: 8px;
}

.topic-follow {
	font-size: var(--MedBody);
	margin-bottom: 6px;
	/* background-color: #ccb8b8; */
}

.privacy-ul {
	margin-left: 20px;
	margin-bottom: 8px;
	/* background-color: #fa4b5d; */
}

.privacy-li {
	margin: 2px;
	/* background-color:#f7cbf4; */
	font-size: var(--MedBody);
}

/* .heading-container {
    background-color: var(--logo-background);
    color:var(--violet-800);
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width:98vw;
    border-radius: 8px;
    padding: 5px;
    margin:0 auto;
    margin-bottom:8px;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.5);
    
} */

.heading-container > .brand-group {
	display: flex;
	align-items: center;
}

/* .heading-logo {
    width:350px;
    height:auto;
    margin-right:6px;
    cursor:pointer;
} */

p.text-statement {
	font-size: var(--Head5);
	color: var(--violet-hilite);
	margin-right: 20px;
}

.return-to-hero {
	text-decoration: none;
	padding: 12px 14px;
	margin: 10px;
	color: var(--form-label);
	color: var(--form-label);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
}

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

/* amico mio additions for responsive page */

/* --- Page container --- */
.page {
	width: min(960px, 100%);
	margin: 0 auto;
	padding: 16px;
}

/* Improve readability */
p,
li {
	line-height: 1.6;
	font-size: 1rem;
}

/* Headings scale nicely on mobile */
h1 {
	font-size: clamp(1.6rem, 4vw, 2.4rem);
}
h2 {
	font-size: clamp(1.3rem, 3.2vw, 1.8rem);
}

.heading-container {
	background-color: var(--logo-background);
	color: var(--violet-800);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	gap: 12px;
	flex-wrap: wrap;
}

.heading-logo {
	max-width: 360px;
	height: auto;
}

.mobile-reg-link {
    text-align:center;
    font-size:var(--MedBody);
    padding:10px;
}


.mobile-return-to-reg {
    background-color: aqua;
    font-size: var(--MedBody);
    text-align:center;
    padding:10px;

}

/* Hide desktop-only elements on mobile */
@media (max-width: 768px) {
	.desktop-only {
		display: none;
	}
}

@media (max-width: 600px) {
	.heading-container {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.heading-logo {
		width: 250px;
	}
}

/* Default: hide mobile-only items */
.mobile-only {
	display: none;
}

/* Show only on small screens */
@media (max-width: 768px) {
	.mobile-only {
		display: inline;
		margin-left: 6px;
	}
}

@media (max-width: 768px) {
	.topic-follow {
		text-align: center;
	}

	.topic-follow a {
		font-weight: 600;
		text-decoration: underline;
	}
}