* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	--grape2f: #2f162a;
	--grape82: #82737f;
	--yellowffe7: #ffe795;
	--caption-font-size: 0.7rem;
	--heading-font-family: "Times New Roman", serif;
	--text-font-family: Georgia, serif;
}
html {
	font-size: max(1.5vw, 18px);
	font-family: var(--text-font-family);
}
body {
	--body-background: #f7ece2;
	background-color: var(--body-background);
}

h1, h2, h3 {
	font-family: var(--heading-font-family);
	text-align: center;
}

a {
	color: #000000;
	text-decoration: none;
}

.smallest {
	font-size: min(0.75rem, 3vw);
}

.medium {
	font-size: min(1.5rem, 5.5vw);
	font-weight: 600;
}
.heading-large {
	font-size: min(1.75rem, 8vw);
	font-weight: 700;
}
.heading-larger {
	font-size: min(2rem, 7vw);
	font-weight: 900;
}
.bold55 {
	font-weight: 550;
}
.bold7 {
	font-weight: 700;
}
header {
	width: 100%;
	background: linear-gradient(180deg, var(--yellowffe7), var(--grape2f));
	position: fixed;
	top: 0;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
img[src*="mylogo"] {
	max-width: min(70px, 12vw);
	height: auto;	
}
.home {
	transform: translate(3vw);
	display: flex;
	justify-content: center;
	align-items: center;
}
header h1 {
	padding: 0 0.2em;
}
header img[src*="home"] {
	width: min(60px, 10vw);
	height: auto;	
}

.drop-menu {
	--fuschia84: #84325b;
	--grape2a: #2a1325;
	--grape43: #432d3f;
}
.menu-button {
	font-size: min(1.25rem, 4.5vw);
	font-weight: 600;
	padding: 0 min(1.75em, 4vw);
	transform: translate(-30%);
	background-color: var(--yellowffe7);
	border: none;
	border-radius: 1em;
}
.menu-content {
	font-size: 1em;
	background-color: var(--grape82);
	display: none;
	position: absolute;
	right: 1%;
	box-shadow: 0.5rem 0.5rem 0.25rem var(--grape2f);
	z-index: 1;
}
.menu-content a {
	color: var(--grape2a);
	padding: 0.2em;
	display: block;
}
.menu-content a:hover {
	font-size: 1.15em;
	background-color: var(--fuschia84);
}
.drop-menu:hover .menu-content{
	display: block;
}
.drop-menu:hover .menu-button {
	cursor: pointer;
	background-color: var(--grape43);
}

ul {
	padding: 0 0.25em;
	list-style-type: none;
}
li {
	padding: 0.25em;
}
details, p {
	padding: 0.3em;
}

.hero-section {
	--raspberryba: #ba184d;
	--strawberrye7: #e76574;
	margin-top: min(5rem, 15vw);
}
.hero-text {
	min-width: 300px;
	max-width: 750px;
	padding: 1em;
	margin: 0 auto;
	background: linear-gradient(180deg, var(--yellowffe7), var(--raspberryba));
}

.hero-text h2 {
	padding-bottom: 0.3em;
}

.hero-text p {
	padding: 0.3em;
}

.benefits-button, .tiphome-button {
	font-size: max(1.5vw, 18px);
	font-family: var(--text-font-family);
	background-color: var(--yellowffe7);
	padding: 0.05em 0.25em;
	border: 0.1em solid; 
	border-radius: 2em;
	box-shadow: 0 0.15rem;
}
.benefits-button:hover, .tiphome-button:hover {
	background-color: var(--strawberrye7);
	border: 0.15em solid;
}

.hero-image {
	min-width: 300px;
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
 .hero-section img[src*="yogurt"] {
	width: min(220px, 40vw);
	height: auto;
	border: 0.3rem solid var(--yellowffe7);
	border-radius: 25%;
}
 .hero-section img[src*="fruits-in-plate"] {
	/*width: 37%;*/ 
	width: min(350px, 56vw);
	height: auto;
	border: 0.3rem solid var(--yellowffe7);
	border-radius: 25%;
}
.examples {
	--pomegranate27: #270e0f;
	--pomegranateb7: #b78587;
	--pomegranated0: #d0acad;
	--raspberryd4: #d43761;
	min-width: 300px;
	max-width: 700px;
	margin: min(5rem, 15vw) auto;
	background-color: var(--pomegranateb7);
	border-radius: 5%;
}
.examples h2 {
	padding: 0.15em;
	color: var(--pomegranate27);
	background-color: var(--pomegranated0);
	text-align: center;
	border: 0.1em solid;
	border-radius: 0.75em;
}
.examples nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: space-around;
}
.examples a {
	width: min(220px, 45%);
	padding: 3% 2% 1.5%;
}

img[src*='example'] {
	max-width: 100%;
	height: auto;
	border-radius: 15%;
}
.examples figure {
	font-size: var(--caption-font-size);
	font-weight: 530;
	text-align: center;
}
figcaption {
	background-color: var(--pomegranated0);
	padding: 0.25em;
	border: 0.2em solid;
	border-radius: 1em;
	box-shadow: 0 0.3em;
}
.examples img:hover {
	filter: brightness(125%);
}
figcaption:hover {
	font-size: 1.15em;
	background-color: var(--raspberryd4);
}

#tiphome,  #benefit{
	/*width: 55%;*/
	min-width: 300px;
	max-width: 750px;
	padding: 0.5em;
	margin: 0 auto min(5rem, 15vw);
	background: var(--yellowffe7);
}

#tiphome {
	--red-orangecc: #cc9988;
	background-color: var(--red-orangecc);
}

#benefit {
	--almondee: #eed9c4;
	background-color: var(--almondee);
}



footer {
	width: 100%;
	background: linear-gradient(180deg, var(--yellowffe7), var(--grape2f));
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
	bottom: 0;
}
	
small {
	font-size: clamp(10px, 1.5vw, 0.75rem);
}
footer button {
	font-family: var(--text-font-family);
	background-color: var(--yellowffe7);
	padding: 0.5em;
	border: none;
	border-radius: 1em;
}
footer button:hover {
	background-color: var(--grape82);
	border-radius: 1em;
}



@media only screen and (max-width: 768px) {
	.menu-button {
		transform: translate(0);
	}
}

@media print {
	header, footer {
		display: none;
	}
}