:root {
  --backcolor: #C8EEC8;
  --h1color: #54259D;
  --navcolor: #653BA7;
  --footcolor: #5F7B5F;
}
body {
  background-color: var(--backcolor);
}
#head {
  background-color: var(--backcolor);
  font-family: "Playwrite DE Grund", cursive;
  border-radius: 5em;
  position: sticky;
  top: -30%;
  z-index: 1;
}
.headers {
  text-align: center;
}
#business-name {
  font-size: 3.5em;
  color: var(--h1color);
  margin: 0;
  padding: .6em 0 .85em 0;
  background-image: radial-gradient(azure, transparent);
}
#business-name:before {
  content: "🪻";
  display: inline-block;
  transform: translate(0, -3%);
}
#business-name:after {
  content: "🪻";
  display: inline-block;
  transform: scaleX(-1) translate(0, -3%);
}
#navigation {
  background-color: var(--navcolor);
  font-size: 1.2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: .2em .3em;
  border-radius: 5em;
  box-shadow: 0 .1em .5em var(--navcolor);
}
.links {
  color: white;
  margin: .2em .1em;
  padding: .5em 1.3em;
  text-decoration: none;
}
.head-link {
  border-radius: 2em;
  transition: background-color .2s;
}
.head-link:hover {
  background-color: rgb(224 255 255 / 15%);
}
.head-link:active {
  background-color: rgb(0 0 0 / 15%);
}
#home-content {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}
.container {
  color: white;
  font-family: "Playwrite DE Grund", cursive;
  background-color: rgb(101 59 167 / 75%);
  border: .3em solid var(--navcolor);
  border-radius: 2em;
  width: 80%;
  max-width: 1000px;
  margin: 1em;
  padding: 0 0 1em;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}
.flower-fig {
	background-color: var(--navcolor);
  border: .2em solid var(--navcolor);
  border-radius: 1.2em;
  transition: filter .2s;
}
.flower-fig:hover {
  filter: brightness(105%);
}
.flower-fig:active {
  filter: brightness(90%);
}
.flower-link {
  color: white;
  text-decoration: none;
}
.flower-link:hover {
  font-style: italic;
}
.flower-img {
  border: .1em solid var(--navcolor);
  border-radius: 1em;
  width: 100%;
  max-width: 45em;
}
.flower-cap {
  font-size: 1.1em;
  padding: 0 .5em .5em;
}
.drop-down {
  text-align: center;
}
.drop-title {
  font-size: 1.1em;
  transition: text-shadow .2s;
}
.drop-title:hover {
  cursor: pointer;
  text-shadow: 0 0 .1em white;
}
.lists {
  list-style: none;
  margin: 1em 0 1em -2em;
}
#foot {
  background-color: var(--footcolor);
  font-family: "Capriola", sans-serif;
  font-size: 1.2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: .2em .3em;
  border-radius: .3em;
  box-shadow: 0 .1em .5em var(--footcolor);
}
.foot-link:hover {
  text-decoration: underline;
}
.foot-link:active {
  text-decoration: none;
}
@media (min-width: 680px) {
	#head {
  	border-radius: 3em;
  }
}
@media (min-width: 661px) {
	#head {
  	top: -19%;
  }
}
@media (max-width: 435px) {
	#head {
  	border-radius: 7em;
  }
}
@media (max-width: 353px) {
	#head {
  	top: -41%;
  }
}
@media (max-width: 323px) {
	#head {
  	top: -52%;
  }
}