html {
  scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    color:#3c002e;
}

::selection {
    background-color: #f0c8cc !important;
    color: #3c002e !important;
}

.musicinside ::selection {
    background-color: #2d4f3d !important;
    color: #90bb9a !important;
}

* {
	box-sizing: border-box;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    scrollbar-color: #f0c8cc #378471;
	cursor: url("/shrines/seasonalproduce/img/cur.gif"), auto;
}

* img {
    user-select:none;
}

*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: #378471;
}

*::-webkit-scrollbar-thumb {
    background-color: #f0c8cc;
}

a {
	cursor: url('/shrines/seasonalproduce/img/apple.cur'), auto;
}

a * {
	cursor: url('/shrines/seasonalproduce/img/apple.cur'), auto;
}

#horizontal {
  height: 6000px;
}

#container {
  position: fixed;
  top: 0;
  left: 0;
  width: 600%;
  height: 100vh;
  display: flex;
  background-image: 
    linear-gradient(to right, #fff, #f2e4ab, #68b984, #b98268, #acb6e5, #fff),
    url('/shrines/seasonalproduce/img/dither.png');
  background-size: auto auto;
  background-repeat: no-repeat, repeat;
  background-position: center center, center center;
  background-blend-mode: screen;
}

img.tree {
  position: absolute;
  bottom:0;
  left:0;
  image-rendering: pixelated;
  filter: drop-shadow(14px 10px 4px rgba(38, 50, 115, 0.35)) drop-shadow(0 0 20px #ffffff96) drop-shadow(0 0 20px #ffffff96) !important;
  &.spring {
    left:40px;
    bottom:-1030px;
  }
  &.summer {
    bottom:-10px;
  }
  &.autumn {
    bottom:-10px;
  }
  &.winter {
    bottom:-60px;
    width:500px;
  }
}

#container .timeline {
  position: fixed;
  margin: 50px 100% 0;
  height: 16px;
  width: 400%;
  background-image: url("/shrines/seasonalproduce/img/solid.gif");
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: bottom;
  image-rendering: pixelated;
  opacity: 0.9;
}

#container .timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background-color: #b84d4d;
  width: var(--scroll-width, 0%);
}

#container .section {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 100px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  &.intro {
    box-shadow: inset 0 0 50px #000;
    background-image: url('/shrines/seasonalproduce/img/bg.jpg');
    background-size:auto;
    background-position: 0 center;
  }
  &.outro {
    box-shadow: inset 0 0 50px #000;
    background-image: url('/shrines/seasonalproduce/img/bg2.gif');
    background-size:auto;
    background-position: 0 center;
  }
}

#container .section .point {
  position: fixed;
  top: 0;
  margin-top: 13px;
  filter: hue-rotate(260deg) opacity(90%);
}

#container .section .title{
  position: fixed;
  top: 0;
  margin-top: 53px;
  font-family: georgia;
  text-shadow: 1px 1px 0 #3c002e;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff);
  color:#4db89d;
  font-style: italic;
}

#container .section .content {
  display: flex;
  justify-content: center;
  align-items: center;
  &.intro {
  filter: drop-shadow(0 0 30px #000000a6);
  border-radius: 50%;
  background-image: url('/shrines/seasonalproduce/img/lace.png');
  background-position: center;
  padding: 50px;
  height:850px;
  width: 850px;
  text-align: center;
  }
  &.outro {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 3em;
    background-color:#201416;
    filter: drop-shadow(0 0 20px #294daf);
    border-radius: 6px;
    border:1px dashed #fdfced;
    color:#fdfced;
    padding:1em;
  }
}

#container .section .content .text {
  max-width: 400px;
  filter: drop-shadow(0 0 10px #fdfced) drop-shadow(0 0 20px #fdfced) drop-shadow(0 0 30px #fdfced) drop-shadow(0 0 100px #fdfced) drop-shadow(0 0 100px #fdfced);
  &.intro {
    max-width: 500px;
    background-color: #fffaf479;
    box-shadow: 0 0 40px 20px #fffaf479;
    border-radius: 50%;
    filter: unset;
    h1 {
      transform: rotate(-1deg);
    }
    h2 {
      transform: rotate(2deg);
    
    }
  }
  &.outro {
    max-width: 100%;
    filter: unset;
    height: 100%;
  }
}

table {
  width:100%;
  border-collapse: collapse;
  margin: 0.5em;
  font-family: monospace;
  td:first-child {
    padding-right: 10px;
  }
}

h3 {
  margin-top: 0;
  border-bottom: 1px solid #fdfced;
  padding: 0 0 4px 2px;
}

#container .section .content .text p{
  font-size: 1rem;
  line-height: 1.15rem;
  letter-spacing: 0.07rem;
  text-shadow: 1px 1px 0 #fff;
  filter: drop-shadow(0 0 5px #fdfced) drop-shadow(0 0 10px #fdfced);
  span {
    background-color: #ffff00;
  }
}

#container .section .content img {
  image-rendering: pixelated;
  filter: drop-shadow(14px 10px 4px rgba(38, 50, 115, 0.35));
}

@font-face {
	font-family: 'romance';
	src: url('/fonts/RomanceA.ttf');
}

h1 {
  font-family: 'wobble';
  font-weight:100;
  letter-spacing: 0.25rem;
  margin: 0;
  font-size: 3rem;
  text-shadow: 1px 1px 0 #fff;
  span {
    background-color: #4db89d;
    padding:0 20px;
  }
}

h2 {
  font-family: 'Pixelplay';
  font-size:20px;
  letter-spacing: 0.2rem;
  font-weight:100;
  margin:0;
  text-shadow: 1px 1px 0 #fff;
  span {
    background-color: #f0c8cc;
    padding:0 10px;
  }
}

@font-face {
	font-family: 'wobble';
	src: url('/fonts/wobble.otf');
}

@font-face {
	font-family: 'Pixelplay';
	src: url('/fonts/pixelplay.otf');
}

.spinach-wrapper {
  position: absolute;
    top: 10px;
    left: 150px;
  &::after {
    content: "spinach";
    display: block;
    position: absolute;
    top: 225px;
    left: 235px;
    color: #3c002e;
    width: 100%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.spinach {
    &:hover {
      transform: rotate(10deg);
    }
  }
}

*::after {
  line-height:1.1rem;
  pointer-events: none;
  text-shadow: 1px 1px 0 #ffff00;
}

.lettuce-wrapper {
  position: absolute;
    bottom: 10px;
    left: 420px;
    z-index: 1;
  &::after {
    content: "lettuce";
    display: block;
    position: absolute;
    top: 225px;
    left: 235px;
    color: #3c002e;
    width: 100%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.lettuce {
    &:hover {
      transform: rotate(10deg);
    }
  }
}

.radish-wrapper {
  position: absolute;
    top: 10px;
    right: 650px;
    z-index: 1;
  &::after {
    content: "radish";
    display: block;
    position: absolute;
    top: 225px;
    left: 205px;
    color: #3c002e;
    width: 100%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.radish {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.youngcarrotbeet-wrapper {
  position: absolute;
    top: 290px;
    left: 400px;
    z-index: 1;
  &::after {
    content: "young carrots & beets";
    display: block;
    position: absolute;
    top: 165px;
    left: 175px;
    color: #3c002e;
    width: 75%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.youngcarrotbeet {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.dandeliongreens-wrapper {
  position: absolute;
    top: 280px;
    left: 10px;
    z-index: 1;
  &::after {
    content: "dandelion greens";
    display: block;
    position: absolute;
    top: 235px;
    left: 50px;
    color: #3c002e;
    width: 75%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.dandeliongreens {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.wildgarlic-wrapper {
  position: absolute;
    bottom: 0px;
    left: 10px;
    z-index: 1;
  &::after {
    content: "wild garlic";
    display: block;
    position: absolute;
    top: 215px;
    left: 160px;
    color: #3c002e;
    width: 50%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.wildgarlic {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.greenonion-wrapper {
  position: absolute;
    bottom: 80px;
    right: 620px;
    z-index: 1;
  &::after {
    content: "green onion";
    display: block;
    position: absolute;
    top: 165px;
    left: 160px;
    color: #3c002e;
    width: 50%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.greenonion {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.nettles-wrapper {
  position: absolute;
    top: 60px;
    left: 550px;
    z-index: 1;
  &::after {
    content: "nettles";
    display: block;
    position: absolute;
    top: 185px;
    left: 160px;
    color: #3c002e;
    width: 50%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.nettles {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.asparagus-wrapper {
  position: absolute;
    bottom: -30px;
    right: 40px;
    z-index: 1;
  &::after {
    content: "asparagus";
    display: block;
    position: absolute;
    top: 295px;
    left: -80px;
    color: #3c002e;
    width: 50%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.asparagus {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.peas-wrapper {
  position: absolute;
    top: 350px;
    right: 450px;
    z-index: 1;
  &::after {
    content: "peas";
    display: block;
    position: absolute;
    bottom: -25px;
    left: 220px;
    color: #3c002e;
    width: 50%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.peas {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.strawberries-wrapper {
  position: absolute;
    top: 130px;
    right: 470px;
    z-index: 1;
  &::after {
    content: "strawberries";
    display: block;
    position: absolute;
    top: 165px;
    left: 160px;
    color: #3c002e;
    width: 50%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.strawberries {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.cherries-wrapper {
  position: absolute;
    bottom: 100px;
    right: 240px;
    z-index: 1;
  &::after {
    content: "cherries";
    display: block;
    position: absolute;
    top: 210px;
    left: 75px;
    color: #3c002e;
    width: 50%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.cherries {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.younggarliconion-wrapper {
  position: absolute;
    bottom: 410px;
    right: 70px;
    z-index: 1;
  &::after {
    content: "young garlic & onion";
    display: block;
    position: absolute;
    top: 160px;
    left: 70px;
    color: #3c002e;
    width: 50%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.younggarliconion {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.newpotatoes-wrapper {
  position: absolute;
    top: 40px;
    right: 70px;
    z-index: 1;
  &::after {
    content: "new potatoes";
    display: block;
    position: absolute;
    top: 235px;
    left: 130px;
    color: #3c002e;
    width: 50%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.newpotatoes {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.tomatoes-wrapper {
  position: absolute;
    top: 40px;
    left: 0px;
    z-index: 1;
  &::after {
    content: "heirloom tomatoes";
    display: block;
    position: absolute;
    top: 50px;
    left: 410px;
    color: #3c002e;
    width: 50%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.tomatoes {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.yellowbeans-wrapper {
  position: absolute;
    bottom: 30px;
    left: 560px;
    z-index: 1;
  &::after {
    content: "yellow beans";
    display: block;
    position: absolute;
    top: 150px;
    left: 80px;
    color: #3c002e;
    width: 100%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.yellowbeans {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.cucumber-wrapper {
  position: absolute;
    top: 100px;
    left: 460px;
    z-index: 1;
  &::after {
    content: "cucumber";
    display: block;
    position: absolute;
    top: 135px;
    left: 70px;
    color: #3c002e;
    width: 100%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.cucumber {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.heirloompeppers-wrapper {
  position: absolute;
    bottom: 200px;
    right: 600px;
    z-index: 1;
  &::after {
    content: "heirloom peppers";
    display: block;
    position: absolute;
    top: 135px;
    left: 70px;
    color: #3c002e;
    width: 100%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.heirloompeppers {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.peppers1-wrapper {
  position: absolute;
    top: 260px;
    left: 430px;
    z-index: 1;
  &::after {
    content: "sweet and spicy peppers";
    display: block;
    position: absolute;
    top: 165px;
    left: 125px;
    color: #3c002e;
    width: 60%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.peppers1 {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.peppers2-wrapper {
  position: absolute;
    top: 100px;
    right: 530px;
    z-index: 1;
  &::after {
    content: "peppers";
    display: block;
    position: absolute;
    top: 220px;
    left: 0px;
    color: #3c002e;
    width: 60%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.peppers2 {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.eggplant-wrapper {
  position: absolute;
    top: 360px;
    right: 460px;
    z-index: 1;
  &::after {
    content: "eggplant";
    display: block;
    position: absolute;
    top: 190px;
    left: 0px;
    color: #3c002e;
    width: 60%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.eggplant {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.zucchini-wrapper {
  position: absolute;
    top: 400px;
    right: 280px;
    z-index: 1;
  &::after {
    content: "zucchini";
    display: block;
    position: absolute;
    top: 105px;
    left: 130px;
    color: #3c002e;
    width: 60%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.zucchini {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.greenbeans-wrapper {
  position: absolute;
    bottom: 10px;
    right: 480px;
    z-index: 1;
  &::after {
    content: "green beans";
    display: block;
    position: absolute;
    top: 125px;
    left: 130px;
    color: #3c002e;
    width: 60%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.greenbeans {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.sweetcorn-wrapper {
  position: absolute;
    bottom: 200px;
    left: 560px;
    z-index: 1;
  &::after {
    content: "sweet corn";
    display: block;
    position: absolute;
    top: 60px;
    left: 5px;
    color: #3c002e;
    width: 30%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.sweetcorn {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.herbs-wrapper {
  position: absolute;
    top: 35px;
    left: 800px;
    z-index: 1;
  &::after {
    content: "fresh herbs";
    display: block;
    position: absolute;
    top: 40px;
    left: 260px;
    color: #3c002e;
    width: 30%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.herbs {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.okra-wrapper {
  position: absolute;
    bottom: 180px;
    left: 780px;
    z-index: 1;
  &::after {
    content: "okra";
    display: block;
    position: absolute;
    top: 70px;
    left: 60px;
    color: #3c002e;
    width: 30%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.okra {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.watermelonmelon-wrapper {
  position: absolute;
    bottom: 130px;
    right: 340px;
    z-index: 1;
  &::after {
    content: "watermelon & melon";
    display: block;
    position: absolute;
    top: -20px;
    left: 10px;
    color: #3c002e;
    width: 60%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.watermelonmelon {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.figs-wrapper {
  position: absolute;
    top: 35px;
    right: 280px;
    z-index: 1;
  &::after {
    content: "figs";
    display: block;
    position: absolute;
    top: 160px;
    left: 100px;
    color: #3c002e;
    width: 60%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.figs {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.apricot-wrapper {
  position: absolute;
    bottom: 55px;
    left: 0px;
    z-index: 1;
  &::after {
    content: "apricots";
    display: block;
    position: absolute;
    top: 175px;
    left: 92px;
    color: #3c002e;
    width: 60%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.apricot {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.plums-wrapper {
  position: absolute;
    top: 275px;
    left: -30px;
    z-index: 1;
  &::after {
    content: "plums";
    display: block;
    position: absolute;
    top: 130px;
    left:110px;
    color: #3c002e;
    width: 60%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.plums {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.peach-wrapper {
  position: absolute;
    top: 245px;
    right: 140px;
    z-index: 1;
  img.peach {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.nectarines-wrapper {
  position: absolute;
    top: 245px;
    right: 270px;
    z-index: 1;
  &::after {
    content: "nectarines & peaches";
    display: block;
    position: absolute;
    top: -20px;
    left: 100px;
    color: #3c002e;
    width: 150%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.nectarines {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.raspberries-wrapper {
  position: absolute;
    bottom: 40px;
    left: 880px;
    z-index: 1;
  &::after {
    content: "raspberries";
    display: block;
    position: absolute;
    top: 110px;
    left: 70px;
    color: #3c002e;
    width: 150%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.raspberries {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.blueberries-wrapper {
  position: absolute;
    bottom: 290px;
    right: 50px;
    z-index: 1;
  &::after {
    content: "blueberries";
    display: block;
    position: absolute;
    top: 149px;
    left: -80px;
    color: #3c002e;
    width: 150%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.blueberries {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.sorrel-wrapper {
  position: absolute;
    bottom: 100px;
    left: 770px;
    z-index: 1;
  &::after {
    content: "sorrel";
    display: block;
    position: absolute;
    top: 135px;
    left: 40px;
    color: #3c002e;
    width: 150%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.sorrel {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.swisschard-wrapper {
  position: absolute;
    bottom: 20px;
    right: 40px;
    z-index: 1;
  &::after {
    content: "swiss chard";
    display: block;
    position: absolute;
    top: 170px;
    left: -95px;
    color: #3c002e;
    width: 150%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.swisschard {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.grapes-wrapper {
  position: absolute;
    top: 40px;
    left: -180px;
    z-index: 1;
  &::after {
    content: "grapes";
    display: block;
    position: absolute;
    top: 370px;
    left: 130px;
    color: #3c002e;
    width: 150%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.grapes {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.apples-wrapper {
  position: absolute;
    top: 80px;
    left: 290px;
    z-index: 1;
  &::after {
    content: "apples";
    display: block;
    position: absolute;
    top: -5px;
    left: 0px;
    color: #3c002e;
    width: 150%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.apples {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.pears-wrapper {
  position: absolute;
    top: 30px;
    left: 530px;
    z-index: 1;
  &::after {
    content: "pears";
    display: block;
    position: absolute;
    top: 185px;
    left: 130px;
    color: #3c002e;
    width: 150%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.pears {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.quinces-wrapper {
  position: absolute;
    bottom: 70px;
    left: 350px;
    z-index: 1;
  &::after {
    content: "quinces";
    display: block;
    position: absolute;
    top: 200px;
    left: 30px;
    color: #3c002e;
    width: 150%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.quinces {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.pomegranate-wrapper {
  position: absolute;
    bottom: 150px;
    right: 560px;
    z-index: 1;
  &::after {
    content: "pomegranate";
    display: block;
    position: absolute;
    top: 240px;
    left: 30px;
    color: #3c002e;
    width: 150%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.pomegranate {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.chestnuts-wrapper {
  position: absolute;
    top: 300px;
    left: 460px;
    z-index: 1;
  &::after {
    content: "chestnuts";
    display: block;
    position: absolute;
    top: 215px;
    left: 100px;
    color: #3c002e;
    width: 150%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.chestnuts {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.walnuts-wrapper {
  position: absolute;
    top: 300px;
    right: 500px;
    z-index: 1;
  &::after {
    content: "walnuts";
    display: block;
    position: absolute;
    top: 20px;
    left: 200px;
    color: #3c002e;
    width: 150%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.walnuts {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.pumpkinssquash-wrapper {
  position: absolute;
    top: 50px;
    right: 700px;
    z-index: 1;
  &::after {
    content: "pumpkins & squash";
    display: block;
    position: absolute;
    top: 25px;
    left: 330px;
    color: #3c002e;
    width: 50%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.pumpkinssquash {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.cabbage-wrapper {
  position: absolute;
    top: 100px;
    right: 360px;
    z-index: 1;
  &::after {
    content: "cabbage";
    display: block;
    position: absolute;
    top: 10px;
    left: 170px;
    color: #3c002e;
    width: 50%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.cabbage {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.cauliflower-wrapper {
  position: absolute;
    top: 280px;
    right: 210px;
    z-index: 1;
  img.cauliflower {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.broccoli-wrapper {
  position: absolute;
    top: 440px;
    right: 330px;
    z-index: 1;
  &::after {
    content: "cauliflower & broccoli";
    display: block;
    position: absolute;
    top: 90px;
    left: 200px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.broccoli {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.beets-wrapper {
  position: absolute;
    bottom: 0px;
    right: 820px;
    z-index: 1;
  &::after {
    content: "beets";
    display: block;
    position: absolute;
    top: 145px;
    left: 150px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.beets {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.carrots-wrapper {
  position: absolute;
    bottom: 10px;
    right: 350px;
    z-index: 1;
  &::after {
    content: "carrots";
    display: block;
    position: absolute;
    top: 145px;
    left: 150px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.carrots {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.turnips-wrapper {
  position: absolute;
    bottom: 0px;
    right: 90px;
    z-index: 1;
  &::after {
    content: "turnips";
    display: block;
    position: absolute;
    top: 160px;
    left: 100px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.turnips {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.mushrooms-wrapper {
  position: absolute;
    top: 60px;
    right: -30px;
    z-index: 1;
  &::after {
    content: "mushrooms";
    display: block;
    position: absolute;
    top: 30px;
    left: 260px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.mushrooms {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.onions-wrapper {
  position: absolute;
    top: 280px;
    right: -80px;
    z-index: 1;
  &::after {
    content: "onions";
    display: block;
    position: absolute;
    top: 240px;
    left: 100px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.onions {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.rosehips-wrapper {
  position: absolute;
    bottom: 160px;
    left: 750px;
    z-index: 1;
  &::after {
    content: "rose hips";
    display: block;
    position: absolute;
    top: 120px;
    left: 150px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.rosehips {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.potatoes-wrapper {
  position: absolute;
    bottom: 0px;
    left: 370px;
    z-index: 1;
  &::after {
    content: "potatoes";
    display: block;
    position: absolute;
    top:-20px;
    left: 80px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.potatoes {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.porkrind-wrapper {
  position: absolute;
    bottom: 100px;
    right: 580px;
    z-index: 1;
  &::after {
    content: "pork cracklings";
    display: block;
    position: absolute;
    top:170px;
    left: 50px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.porkrind {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.pasta-wrapper {
  position: absolute;
    bottom: 170px;
    right: 370px;
    z-index: 0;
  &::after {
    content: "traditional pasta";
    display: block;
    position: absolute;
    top:-10px;
    left: 90px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.pasta {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.garlic-wrapper {
  position: absolute;
    bottom: 260px;
    left: 480px;
    z-index: 0;
  &::after {
    content: "garlic";
    display: block;
    position: absolute;
    top:50px;
    left: 130px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.garlic {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.sauerkraut-wrapper {
  position: absolute;
    top: 110px;
    right: 440px;
    z-index: 0;
  &::after {
    content: "sauerkraut";
    display: block;
    position: absolute;
    top:-25px;
    left: 00px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.sauerkraut {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.pepperrelish-wrapper {
  position: absolute;
    top: 210px;
    right: 530px;
    z-index: 0;
  &::after {
    content: "pepper relish";
    display: block;
    position: absolute;
    top:-25px;
    left: 00px;
    color: #3c002e;
    width: 70%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.pepperrelish {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.veggierelish-wrapper {
  position: absolute;
    top: 310px;
    right: 390px;
    z-index: -1;
  &::after {
    content: "veggie chutney";
    display: block;
    position: absolute;
    top:190px;
    left: 10px;
    color: #3c002e;
    width: 100%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.veggierelish {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.preserves-wrapper {
  position: absolute;
    bottom: -30px;
    left: 690px;
    z-index: 1;
  &::after {
    content: "preserves";
    display: block;
    position: absolute;
    top:-20px;
    left: 20px;
    color: #3c002e;
    width: 100%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.preserves {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.citrus-wrapper {
  position: absolute;
    top: 80px;
    left: 420px;
    z-index: 1;
  &::after {
    content: "citrus fruits";
    display: block;
    position: absolute;
    top:275px;
    left: 10px;
    color: #3c002e;
    width: 100%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.citrus {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.leeks-wrapper {
  position: absolute;
    bottom: 30px;
    right: 100px;
    z-index: 1;
  &::after {
    content: "leeks";
    display: block;
    position: absolute;
    top:275px;
    left: 10px;
    color: #3c002e;
    width: 100%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.leeks {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.parsnips-wrapper {
  position: absolute;
    top: 180px;
    right: 40px;
    z-index: 1;
  &::after {
    content: "parsnips";
    display: block;
    position: absolute;
    top:240px;
    left: -25px;
    color: #3c002e;
    width: 100%;
    height: 100%;
    font-family: 'romance';
    font-size: 24px;
    font-weight: 100;
  }
  img.parsnips {
    &:hover {
      transform: rotate(-10deg);
    }
  }
}

.comment {
  position: relative;
  top:0;
  right: 1em;
  display: grid;
  grid-template-columns: auto 1fr;
  margin: auto 0 2em auto;
  width:fit-content;
  height:fit-content;
  padding-top:1em;
  font-family: 'korinna';
  font-size:0.875rem;;
  line-height: 1rem;
  color:#f4d6e9;
}

.comment a {
  display: contents;
  font-weight: 100;
  color:#ffff00;
  &:hover {
    color:#4db89d;
  }
}

.comment img {
  margin-right:1em;
  margin-top: -9px;
}

@font-face {
	font-family: 'korinna';
	src: url('/fonts/korinna.ttf');
}

    .glass {
      position: fixed;
      top:0px;
      left:0px;
      width: 250px;
      height: 250px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 20px;
      backdrop-filter: blur(10px);
      border: 2px solid rgba(255, 255, 255, 0.5);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      cursor: grab;
      z-index: 2;
    }

    .glass-text {
      color: white;
      font-size: 18px;
      font-weight: bold;
      padding: 40px 10px 10px;
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
                   -1px 1px 0 #000, 1px 1px 0 #000,
                   2px 2px 2px rgba(0, 0, 0, 0.3);
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-items: center;
      row-gap: 0.3em;
      column-gap: 0.3em;
      a {
        color:white;
        text-decoration: none;
        &:hover {
          color:#0000ff;
      text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff,
                   -1px 1px 0 #fff, 1px 1px 0 #fff,
                   2px 2px 2px rgba(255, 255, 255, 0.3);
          filter: invert(100%);
        }
      }
    }

    .glass-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.3);
      display: flex;
      align-items: center;
      padding-left: 24px;
      backdrop-filter: blur(5px);
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      cursor: grab;
    }

    .glass-bar .circle {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 10px;
      position: relative;
      left:-10px;
    }

    .red { background-color: #ff5f56; box-shadow: inset 0 0 3px #cf4d46}
    .yellow { background-color: #febd2a; box-shadow: inset 0 0 3px #dba427}
    .green { background-color: #23c93e; box-shadow: inset 0 0 3px #23a435}

    .seasonal-results {
      margin:0.5em 0;
      max-height:250px;
      overflow: auto;
      scrollbar-color: #fdfced #140c0e;
      ul {
        margin: 0;
      }
      h4 {
        margin: 10px 0;
      }
}

*::-webkit-scrollbar-track {
    background: #140c0e;
}

*::-webkit-scrollbar-thumb {
    background-color: #fdfced;
}

.produce-search {
  padding: 0.5em 0;
}
    .note {
      padding:0.5em 0;
      font-size: 0.75rem;
      font-family: monospace;
    }

    input {
      background-color: #201416;
      color:#fdfced;
      border: 1px solid #fdfced;
      font-family: monospace;
    }
    
    button {
      background-color: #201416;
      color:#fdfced;
      border: 1px solid #fdfced;
      font-family: monospace;
      &:hover {
      background-color: #fdfced;
      color:#201416;
      border: 1px solid #201416;
      }
    }

    label {
      font-family: monospace;
    }

.goodbye {
  font-size: 1rem;
  line-height: 1.15rem;
  letter-spacing: 0.07rem;
}