@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=Gowun+Batang:wght@400;700&family=Srisakdi:wght@400;700&display=swap');
article {
	width: 100%;
	
}

body {
}

.honeydrip {
	background-image: url("step-2/edited images/standard honey_ webpage.png");
	opacity: 50%;
	width: 100%;
	z-index: -4;
	
}

header {
z-index: 3;
margin-top: -40%
}

nav {
	width: 65%;
	height: 65%;
	margin: 1.5em auto .5em auto;
}
nav .back, nav .home, nav .next{
	width: 20%;
	height: 4.2em;
	margin-right: 7%;
	background-size: contain;
	float: left;
	
}

nav .back{
	background-image: url("step-2/edited images/Go-back.png");
}

nav .back:hover{
	background-image: url("step-2/edited images/go-back-hover.png");
}

nav .home{
	background-image: url("step-2/edited images/Home.png")
}

nav .home:hover {
	background-image: url("step-2/edited images/Home-hover.png");
}

nav .next{
	background-image: url("step-2/edited images/Go-Forward.png");
	margin-right: 0;
}

nav .next:hover {
	background-image:url("step-2/edited images/Go-Forward-hover.png");
}

section {
	width: 97%;
	margin-left: .3em;
	margin-top: -38%;
}

h1 {
font-size: 7em;
text-align: center;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}

h2 {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
font-size: 5.3em;
text-align: center;
}
.akaya-kanadaka-regular {
  font-family: "Akaya Kanadaka", system-ui;
  font-weight: 400;
  font-style: normal;
}
h3 {
    font-family: "Akaya Kanadaka";
	font-size: 4.5em;
    font-style: normal;
	margin-top: .8em;
	text-align: center;
}

p {
font-family: "Akaya Kanadaka";
font-size: 3.3em;
margin-top:.6em;
	
}

.illus2 {
	width: 42%;
}

.illus3 {
	width: 38%;
}

.pullquote {
	display: none;
}
.honeysplat1 {
	width: 63%;
	opacity: 40%;
	z-index: -5;
	margin-top: -60%;
}

.illus9 {
	width: 28%;
}

.honeysplat2 {
	width: 45%;
	opacity: 45%;
	z-index: -1;
	margin-top: -30%;
}

.illus14 {
	width: 52%;
}

.illus15 {
	display: none;
}

.honeysplat3 {
	width: 53%;
	opacity: 45%;
	margin-top: -65%
}

.illus17 {
	width: 61%;
	align-content: center;
}

@media (min-width:320px) {
	article {
		width: 100%;
	}
		.honeydriplong {
		display: none;
	}
	
	body {
	background-color: #D19264;
		width: 100%;
	}
	.honeydrip {
		width: 100%;
	}
	
	header {
		width: 100%;
		transform: translate(0,-5%);
		margin-bottom: 40%
	
	
	}
	
	nav {
		width: 80%;
		z-index: -5;
		margin: 2em auto .5em 25%
		
	}
	
	nav .back, nav .home, nav .next{
	width: 14%;
	height: 58px;
	margin-right: 3em;
		
	background-size: fixed;
	float: left;
	background-repeat: no-repeat;
	
}
	nav.back {
	margin-left: auto;
	}
	
	h1{
	margin-bottom: .5em;
	}
	
	h2 {
	margin-bottom: .5em;
	}
	
	section {
		width: 90%;
		margin-left: 3%;
	}
	
	p {
	font-size: 2.9em;
	
	}
	
	.illus2 {
		width: 72%;
	}
	
	.illus3 {
		width: 74%;
	}
	
	.illus9 {
		width: 65%;
	}
	
	.illus14 {
		width: 61%;
	}
	
	.illus17 {
		width: 70%;
	}
}
@media (min-width: 544px){
	.honeydrip {
		width: 100%
	}
	.honeydriplong {
		display: none;
	}
	
	header {
	
		margin-bottom: 40%
	}
	
	p {
	font-size: 3.5em
	}
	
}

@media (min-width: 768px) {
	header {
	transform: translate(0, 12%);
	margin-bottom: 49%;
	
	}
	
	h1 {
		font-size: 7.5em;
	}
	
	h2 {
		font-size: 5.8em;
	}
	
	h3 {
		font-size: 3.9em;
		margin-bottom: 10%;
	}
	
	p {
		font-size: 2.3em;
		
	}
	.illus2 {
		width: 69%;
		display: none;
	}
	
	.illus3 {
		width: 71%;
	}
	
	.illus9 {
		width: 55%;
		display: none;
	}
	
	.illus14 {
		width: 51%;
	}
	
	.illus15 {
		width: 74%;
		display: block;
	}
	
	.illus17 {
		width: 60%;
		margin: 0 auto 0 auto;
	}
	
	.honeysplat2 {
		margin-top: -45%;
		width: 55%;
	}
}
@media (min-width: 1024px) {
	header {
	transform: translate(0, 26%);
	margin-bottom: 55%;
	
	}
	
}
@media (min-width: 1280px) {
	article {
	margin-bottom: 0;
	
	}
		.honeydrip {
	display: none;
	}
	.honeydriplong {
		display: block;
		opacity: 35%;
		margin-bottom: 0;
		z-index: -1;
	}
	header {
		width: 20%;
		transform: translate(0, -1240%);
		margin-left: 1.9em;
		z-index: 1;
	}

	nav {
	width: 150%;
	height: 65%;
	margin: 1.5em auto .5em auto;
}
	nav .back, nav .home, nav .next{
	width: 15%;
	height: 4.2em;
	margin-right: 7%;
	background-size: contain;
	float: left;
	
}
	
	h1 {
	font-size: 2.2em;
	}
	h2 {
	font-size: 1.8em;
	}
	h3 {
	font-size: 1.5em;
	}
	p {
	font-size: 1.1em;
	}
	
	Section {
	width: 73%;
	float: right;
 margin-top:-425%;
margin-bottom: 0;
	margin-left: -6em;
	margin-right: 1em;
	z-index: 2;
	}
	
	.illus2 {
		float: left;
		width: 28%;
		display: block;
	}
	
	.illus3 {
		display: none;
	}
	
	.illus9 {
		display: block;
		width: 29%;
		float: right;
	}
	
	.illus14 {
		width: 30%;
		float: right;
	}
	
	.illus15 {
		display: none;
	}
	.illus17 {
		width: 30%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.honeysplat1 {
		width: 40%;
		float: right;
	}
	
	.honeysplat2 {
		width: 24%;
		margin-left: 20%;
	}
	
	.honeysplat3 {
		width: 20%;
	}
	
}

@media (min-width: 1300px) {
	Section {
	width: 73%;
	float: right;
 margin-top:-410%;
	margin-left: -6em;
	margin-right: 1em;
	z-index: 2;
	}
		header {
		width: 18%;
		transform: translate(0, -1162%);
		margin-left: 1.9em;
	}
}
@media (min-width: 1357px)  {
	header {
		width: 18%;
		transform: translate(0, -1140%);
		margin-left: 1.9em;
	}
	
		Section {
	width: 73%;
	float: right;
 margin-top:-385%;
	margin-left: -6em;
	margin-right: 1em;
	z-index: 2;
	}
}
@media (min-width: 1365px)  {
	header {
		width: 18%;
		transform: translate(0, -1160%);
		margin-left: 1.9em;
	}
	@media (min-width: 1387px){
		header {
		width: 18%;
		transform: translate(0, -1223%);
		margin-left: 1.9em;
	}
	}
@media (min-width: 1457px) {
	header {
		width: 17.5%;
		transform: translate(0, -1185%);
		margin-left: 1.9em;
		margin-top: -50%;
	}
	
		Section {
	width: 73%;
	float: right;
 margin-top:-352%;
	margin-left: -6em;
	margin-right: 1em;
	z-index: 2;
	}
}

@media (min-width: 1550px) {
	header {
		width: 15%;
		transform: translate(0, -1080%);
		margin-left: 1.9em;
	}
	
		Section {
	width: 73%;
	float: right;
 margin-top:-330%;
	margin-left: -6em;
	margin-right: 1em;
	z-index: 2;
	}
}

@media (min-width: 1650px) {
	header {
		width: 16%;
		transform: translate(0, -1145%);
		margin-left: 1.9em;
	}
	
		Section {
	width: 73%;
	float: right;
 margin-top:-320%;
	margin-left: -6em;
	margin-right: 1em;
	z-index: 2;
	}
}

@media (min-width: 1665px) {
	header {
		width: 16%;
		transform: translate(0, -1165%);
		margin-left: 1.9em;
	}
}

@media (min-width: 1680px) {
	header {
		width: 16%;
		transform: translate(0, -1165%);
		margin-left: 1.9em;
	}
}

@media (min-width: 1700px) {
	header {
		width: 15%;
		transform: translate(0, -1160%);
		margin-left: 1.9em;
	}
	
		Section {
	width: 73%;
	float: right;
 margin-top:-310%;
	margin-left: -6em;
	margin-right: 1em;
	z-index: 2;
	}
	}