@import url(https://fonts.bunny.net/css?family=capriola:400|bad-script:400|abril-fatface:400);
:root{
	--white: rgb(224, 223, 218);
	--sepia1: #e6ceac;
	--sepia2: #cdba94;
	--sepia3: #bda583;
	--sepia4: #a48d6a;
	--sepia5: #8b7d62;
	--sepia6: #73654a;
	--sepia7: #524839;
	--sepia8: #292418;
	--black: #181411;
}
.brown 		{color: rgb(161, 113, 079);}
.red 		{color: rgb(255, 083, 083);}
.orange 	{color: rgb(255, 165, 054);}
.yellow 	{color: rgb(238, 211, 056);}
.lime 		{color: rgb(144, 255, 144);}
.green 		{color: rgb(100, 175, 100);}
.blue 		{color: rgb(140, 140, 241);}
.darkBlue 	{color: rgb(101, 101, 167);}
.purple 	{color: rgb(166, 096, 212);}
.pink 		{color: rgb(255, 130, 192);}
.white 		{color: rgb(224, 223, 218);}

html {
	height: 100%;
	min-width: 320px;
}
body {
	background: linear-gradient(60deg, transparent 49%, var(--sepia3) 49% 51%, transparent 51%),
				linear-gradient(-60deg, transparent 49%, var(--sepia3) 49% 51%, transparent 51%);
	background-size: 1.75rem 3rem;
	background-color: var(--sepia1);
	opacity: 1;
	color: var(--sepia8);
	padding: 0;
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
}
header {
	display: flex;
	background-color: var(--sepia7);
	color: var(--white);
	margin: 0;
	border-bottom: .15rem solid var(--sepia8);
	padding: 0;
	height: 5rem;
	width: 100%;
}
nav {
	position: absolute;
	display: flex;
	flex-direction: row;
	top: 0;
	right: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	height: 5rem;
}
main {
	background: linear-gradient( to right,
	rgba(230, 206, 172, 0) 0%, rgba(230, 206, 172, .6) 5%,
	rgba(230, 206, 172, .6) 95%, rgba(230, 206, 172, 0) 100%);
	color: var(--sepia8);
	font-family: 'ABeeZee', sans-serif;
	padding: .5rem 0;
	margin: 0 auto;
	flex-grow: 10;
	min-width: 320px;
	min-height: calc(100vh - 14.8rem + 1px);
}
aside {	
	float: right;
}
div {
	margin: 0;
	border: none;
	padding: 0;
}
h1 {
	color: inherit;
	font-family: 'Abril Fatface', display;
	padding: 0rem;
	border: none;
	margin: 0rem;
	@media (max-width: 800px) {
		font-size: max(25px, 7vw);
	}
}
h2 {
	color: inherit;
	font-family: 'Capriola', sans-serif;
	font-size: x-large;
	padding: 0;
	margin: 0;
	@media (max-width: 800px) {
		font-size: max(24px, 6vw);
	}
}
h3 {
	color: inherit;
	font-family: 'Abril Fatface', display;
	font-size: large;
	padding: 0rem;
	border: none;
	margin: 0 .5rem;
}
h4 {
	color: inherit;
	font-family: 'Bad Script', handwriting;
	font-size: x-large;
	padding: 0;
	border: none;
	margin: 0;
}
h5 {
	color: inherit;
	padding: 0;
	border: none;
	margin: .5rem 7.5vw;
}
h6 {
	color: inherit;
	font-size:x-small;
	margin: auto 1rem;
	border: none;
}
p {
	color: inherit;
	font-family: 'ABeeZee', sans-serif;
	font-size: medium;
	margin: 0 2.5rem;
	padding: .25rem auto;
}
q {
	color: inherit;
	font-family: 'Bad Script', handwriting;
	font-size: x-large;
	margin: 0;
	padding: 0 auto;
}
#header {
	margin-top: 2rem;
}
sup {
	color: inherit;
	font-family: 'Bad Script', handwriting;
	font-size: x-large;
}
a {
	color: var(--sepia3)
}
ul {
	display: inline-flex;
	flex-direction: column;
	white-space: nowrap;
}
li {
	list-style-type: none;
	list-style-position: inside;
	margin: 0 0 .05rem 0;
}
table, tr, td {
	border-collapse: collapse;
	white-space: nowrap;
}
button {
	background-color: var(--sepia7);
	margin: .5rem 0 .5rem .5rem;
	border: .2rem solid var(--sepia8);
	border-radius: 1rem;
	padding: .5rem;
	font-family: 'Capriola', sans-serif;
	font-size: .8rem;
	color: var(--white);
}
iframe {
	background-color: var(--sepia2);
	font-size: medium;
	margin: 1rem 1.5rem;
	border: .5rem double var(--sepia8);
	border-radius: 1rem;
	padding: 0;
	min-width: 200px;
	width: 100%;
	max-width: 600px;
	height: 400px;
}
footer {
	background-color: var(--sepia7);
	color: var(--white);
	display: flex;
	justify-content: center;
	overflow: hidden;
	margin: 0;
	border-top: .15rem solid var(--sepia8);
	padding: .25rem 0;
	min-height: 8rem;
	min-width: 320px;
	width: 100%;
	display: absolute;
}
.footnote {
	display: block;
	position: absolute;
	overflow: hidden;
	margin: 0 1rem;
	padding: 0;
	min-width: 115px;
}
.footnote:first-child {
	left: 0;
}
.footnote:nth-child(2) {
	display: flex;
	flex-direction: column;
	bottom: auto;
	margin: 0;
	padding: 0;
	min-width: 250px;
	@media (max-width:700px){
		margin: 0 -6.75rem 0 -7.25rem;
	}
}
.footnote:nth-child(3) {
	text-align: right;
	right: 0;
	min-width: 145px;
}
.crumb {
	color: var(--sepia1);
	background-color: var(--sepia7);
	display: flex;
	padding: 1.75rem 2.5rem;
	height: 5rem;
}
.crumb:hover {
	background-color: var(--sepia6);
}
.logo {
	align-self: center;
	padding: 0;
	margin: 0;
	height: 5rem;
	width: 5rem;
}
.vl {
	z-index: 1;
	margin: .5rem -.075rem;
	border: .075rem solid var(--sepia4);
	border-radius: 1rem;
	padding: 0;
	height: auto;
}
.hl {
	z-index: 1;
	margin: 0;
	border: .075rem solid var(--sepia7);
	border-radius: 1rem;
	padding: 0;
	width: auto;
}
.showcase {
	background-color: var(--sepia2);
	margin: -.075rem .5rem;
	border: .5rem double var(--sepia8);
	border-radius: 1rem;
	padding: .25rem;
	width: 20rem;
}
.menuV {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	@media (max-width: 800px) {
    	flex-direction: column;
	}
}
.menuH {
	display: flex;
	justify-content: center;
	align-items: start;
	flex-direction: row;
	@media (max-width: 800px) {
		align-items: center;
    	flex-direction: column;
	}
}
#overview {
	@media (max-width: 1200px) {
		align-items: center;
    	flex-direction: column;
	}
}
.menuPart:nth-of-type(1) {
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.flavors {
	position: relative;
	background-color: var(--sepia2);
	margin: .25rem;
	border: .5rem double var(--sepia8);
	border-radius: 1rem;
	padding: .5rem;
	font-family: 'Capriola', sans-serif;
		font-size: max(1.1rem, 1.4vw);
	font-size: 1.1rem;
	color: var(--white);
	-webkit-text-stroke: .2rem var(--sepia8);
	paint-order: stroke fill;
		width: max(13rem, 18vw);
	width: 13rem;
	height: min-content;
	@media (max-width: 800px) {
		-webkit-text-stroke: .9vw var(--sepia8);
		min-width: 230px;
		width: 65vw;
		margin: .25rem auto;
		font-size: max(16px, 4vw);
	}
}
.tagline {
	font-family: 'Bad Script', handwriting;
	font-size: large;
	position: absolute;
	top: 1%;
	right: 4%;
	@media (max-width: 800px) {
		font-size: max(20px, 5vw);
	}
}
.money {
	text-align: center;
}
#bakedgoods {
		width: 20rem;
	@media (max-width: 800px) {
		width: 65vw;
	}
}
#bakedgoods .money {
	font-size: larger;
}
.extras {
	display: flex;
	justify-content: right;
	align-items: center;
	margin: .05rem 0 .5rem 0;
	padding: 0;
	font-family: 'Capriola', sans-serif;
	font-size: max(.7rem, .9vw);
	font-size: .7rem;
	color: var(--sepia8);
	-webkit-text-stroke: .1rem var(--sepia4);
	paint-order: stroke fill;
	width: 100%;
	@media (max-width: 800px) {
		-webkit-text-stroke: .1rem var(--sepia4);
		min-width: 230px;
		margin: .25rem auto;
		font-size: max(11px, 2.5vw);
	}
}
.hide {
	display: none;
}
.right {
	text-align: right;
}
.flex {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex: 1;
}
.center {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	flex-direction: column;
}
.grid {
	display: grid;
}
.inverted {
	-webkit-filter: invert(1);
	filter: invert(1);
}
.social {
	min-width: 16px;
	max-width: 1.5rem;
}
.slide {
	margin: 0;
	border: none;
	padding: 0;
	width: 100%;
}
.mySlides {
	display: none;
	margin: 0 0 -.25rem 0;
	border: none;
	padding: 0;
	max-width: 600px;
	max-height: 600px;
}
/* Slideshow container */
.slideshow-container {
	overflow: hidden;
	position: relative;
	background-color: var(--sepia2);
	margin: 1rem 1.5rem;
	border: .5rem double var(--sepia8);
	border-radius: 1rem;
	padding: 0;
	min-width: 200px;
	width: 100%;
	max-width: 600px;
	max-height: 600px;
}
/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	margin: auto -.5rem;
	border-radius: 0 .5rem .5rem 0;
	padding: 1rem;
	color: var(--sepia2);
	font-weight: bold;
	font-size: 1rem;
	transition: 0.6s ease;
	user-select: none;
	width: auto;
}
/* Position the "next button" to the right */
.next {
	margin: auto -.5rem;
	right: 0;
	border-radius: .5rem 0 0 .5rem;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: var(--sepia8);
}
.text {
  color: var(--sepia1);
  background-color: var(--sepia8);
  opacity: 90%;
  font-size: inherit;
  margin: 0 auto;
  border-radius: 50lh;
  padding: 2.5% 5%;
  position: absolute;
  bottom: 2rem;
  left: 10%;
  right: 10%;
  max-width: 80%;
  text-align: center;
}
.dotCon {
	position: absolute;
	bottom: .5rem;
	left: 0;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
}
/* The indicators */
.dot {
	cursor: pointer;
	background-color: var(--sepia4);
	margin: 0 .25rem;
	border: .15rem solid var(--sepia4);
	border-radius: .5rem;
	padding: 0;
	display: inline-block;
	transition: background-color 0.6s ease;
	width: 2rem;
	height: .5rem;
}
.dot:hover {
	background-color: var(--sepia8);
	border: .15rem solid var(--sepia4);
}
.active {
	background-color: var(--sepia8);
}
/* Fading animation */
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}
@keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 320px) {
	.prev, .next {font-size: 11px}
}