/*@import url("https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation:wght@400..700&family=Indie+Flower&family=Merienda:wght@300..900&display=swap");*/
button {
  --clr: #F9F6EF;
  --fg: #1f2020;
  border: none;
  cursor: pointer;
  color: var(--fg);
  background-color:#78945f;
  padding: 0.7em 1.2em;
  font-size: 1.0rem;
  font-weight: 700;
  font-family: inherit;
  width: max-content;
  position: relative;
  text-align: center;
  transition: 0.1s linear;
  filter: drop-shadow(0.1em 0.1em 0.1em color-mix(in srgb, var(--clr), transparent 50%));
  margin:3px;
}
button:before {
  --clrs1: color-mix(in lab, var(--clr), #0000 50%);
  --clrs2: color-mix(in lab, var(--clr), #0000 20%);
  --clrs3: color-mix(in lab, var(--clr), #0000 60%);
  --clrs4: color-mix(in lab, var(--clr), #0000 98%);
  position: absolute;
  content: "";
  inset: -1px 3px 0 -1px;
  padding: 0.0em;
  border: 4px double var(--clr);
  border-radius: 0.1em 0.2em/0.5em 0.23em;
  z-index: -1;
  transition: 0.25s ease;
  background: linear-gradient(178deg, var(--clrs1), var(--clrs2) 20% 70%, var(--clrs3) 90%, var(--clrs4)) 0 0/100% 0.3rem;
  background-clip: content-box;
}
button:active {
  translate: 0.05em 0.1em;
  filter: drop-shadow(-0.1em -0.1em 0.1em color-mix(in srgb, var(--clr), transparent 50%));
}
button:active:before {
  filter: url("#squiggly-0");
}
button:focus {
  outline: 2px dashed color-mix(in srgb, var(--clr), transparent 90%);
  outline-offset: 0.5rem;
  border-radius: 0.25em;
}

.but1:before {
  filter: url("#squiggly-0");
}

.but1:active:before {
  filter: url("#squiggly-5");
}

.but2 {
  --clr: hsl(80 75% 75%);
}
.but2::before {
  filter: url("#squiggly-1");
}

.but3 {
  --clr: hsl(180 75% 75%);
}
.but3:before {
  filter: url("#squiggly-2");
}

.but4 {
  --clr: hsl(240 75% 75%);
}
.but4:before {
  filter: url("#squiggly-3");
}

.but5 {
  --clr: hsl(320 75% 75%);
}
.but5:before {
  filter: url("#squiggly-4");
}

.but6 {
  --clr: hsl(0 75% 75%);
}
.but6:before {
  filter: url("#squiggly-5");
}

/*h1 {
  font-family: "Edu NSW ACT Foundation", cursive;
  color: #F9F3EE;
  grid-column: 1/-1;
  margin: 0;
  font-weight: 500;
  font-size: 2.7rem;
}
*/
.squigglysvg {
  display: hidden;
  position: absolute;
  width: 0;
  height: 0;
}

/*body {
  font-family: "Merienda", cursive;
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-content: center;
  place-items: center;
  gap: 2em;
  background-color: #f8f8f8;
}
*/
button:nth-of-type(2n-1) {
  justify-self: right;
}

button:nth-of-type(2n) {
  justify-self: left;
}

/*p {
font-family:Merienda, Aptos, Arial;
}

p.aptos {
	font-family:Aptos;
	font-size: 1.1em;
}
p.merienda {
	font-family:Merienda;
}
p.arial {
	font-family:Arial;
}
*/