:root {
  --green: #D8F8D1;
  --green-outline: #327330;
  --dirt-path: #FAD5B1;

  --green-1: #3d5033;
  --green-2: #2b3c28;
  --green-3: #556f4b;
  --green-4: #648d47;
  --green-5: #78a44e;

  --yellow: #feeda9;

  --message-board: #FCDFD4;

  --font-color: #576784;
}

@font-face {
	font-family: Hershey-Noailles;
	src: url('assets/fonts/Hershey-Noailles-Times-Duplex-Italic-Regular.ttf');
}

h1, h2, h3, h4, p {
  font-family: Hershey-Noailles;
}

p {
  color: var(--font-color);
}

html, body, .wrapper {
  height: 100%;
  margin: 0;

  overflow-x: scroll;
}

.double-border-box {
  border: solid 1px white;
  border-bottom: solid 1px grey;
  padding: 2px;
  border-radius: 5px;
}

.double-border-cell {
  border: solid 1px grey;
  border-bottom: solid 1px white;
  margin: 0;
  padding: 5px;
  border-radius: 3px;
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s .2s, opacity .2s linear;
}

.wrapper .can-move {
  z-index: 10 !important;
  position: relative;
}

/* ===== wrapper layout ===== */

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;

  position: relative;
  background-color: var(--green);
}

#left-lawn, #bike-lane, #inside-layout {
  height: 100%;
  margin: 0;
}

#left-lawn {
  width: 30px;
}

#bike-lane {
  width: 120px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;

  background-color: var(--dirt-path);
  background-image: url('assets/tiles/dirt-path.jpg');
  background-repeat: repeat;
}

#bike-lane > * {
  height: 100%;
  margin: 0;
}

#bike-lane #bike-left-lane {
  width: 50%;

  border-style: none dashed none groove;
  border-color: green goldenrod green var(--green-outline);
  border-width: 0 5px 0 3px;
}

#bike-lane #bike-right-lane {
  width: 50%;

  border-style: none groove none none;
  border-color: var(--green-outline);
  border-width: 3px;
}

.bikes {
  width: 80px;
}

#inside-layout {
  flex-grow: 1;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

#top-park, #bottom-park {
  background-image: url('assets/tiles/green4.jpg');
  background-repeat: repeat;

  height: 70px;
}

#top-park {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;

  padding-left: 200px;
}

#top-park h1 {
  text-wrap: nowrap;
  font-size: 58px;
  margin: 0;
  color: var(--yellow);
  text-shadow: 1px 1px 2px var(--font-color);
}

/* ===== farmer's market ===== */

main {
  flex-grow: 1;
  /* parks are 70px each */
  max-height: calc(100% - 140px);

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

main #entrance {
  height: 100%;
  width: 200px;
  margin-left: 10px;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#entrance-top-row, #entrance-bottom-row {
  height: 40%;
  width: 100%;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

/* union booth and trees */
#union-booth {
  width: 20%;
  justify-content: space-between;
  margin-right: 5px;
}

/* gate */
#entrance-middle-row {
  width: 100%;
  height: 20%;

  display: flex;
  justify-content: flex-end;

  position: relative;
  text-align: center;
}

#entrance-middle-row img {
  height: 100%;
}

#entrance-middle-row div#welcome-message {
  position: absolute;
  top: -50px;
  left: 30px;
  background-color: var(--message-board);
}

/* bike locks and trees */
#bike-locks, .entrance-trees {
  padding: 2px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

#bike-locks {
  width: 20%;
  justify-content: space-between;
  margin-right: 5px;
}

#bike-locks img {
  height: 30%;
  margin: 10px 0;
}

.entrance-trees {
  padding-top: 20px;
  max-height: 100%;
  width: 80%;
  justify-content: center;
}

.entrance-trees img {
  height: 40%;
  margin: -20px 0;
}

/* info booth */
#info-booth-column {
  width: 300px;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#info-booth-column #info-booth-wrapper {
  position: relative;
}

#info-booth-column #info-booth-wrapper img {
  width: 100%;
}

#info-booth-column #info-booth-wrapper #info-booth-content {
  position: absolute;
  top: 80px;
  left: 48px;
  width: 193px;
  height: 111px;
  overflow-y: scroll;

  border: var(--font-color) dashed 2px;
  padding: 3px;
  background-color: rgba(255, 255, 255, 0.7);
}

#info-booth-column #info-booth-wrapper #info-booth-content>* {
  all: unset;
  font-family: Hershey-Noailles;
  text-align: justify;
  color: var(--font-color);
}

#info-booth-column #info-booth-wrapper #info-booth-content h4 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 5px;
}

#info-booth-column #info-booth-wrapper #info-booth-content ul {
  list-style-position: inside;
  list-style-type: '❊ ';
}

#info-booth-column #info-booth-wrapper #info-booth-content li {
  font-size: 16px;
  margin-bottom: 5px;
}

/* stalls */
#market {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.stall {
  height: 150px;
  margin: 20px;
}

.stall.opening-soon {
  height: 100px;
}

.stall img {
  height: 100%;
}

.wares-item {
  width: 50px;
}

.wares-item img {
  width: 100%;
}

/* carrot stall */
.stall:has(img#stall-1-4) {
  position: relative;
}

.stall:has(img#stall-1-4) .wares-item {
  width: 30px;
}

.stall img#stall-1-4-bunny-1 {
  position: absolute;
  width: 70px;
  height: auto;

  bottom: 0;
  left: 0;
}

.stall img#stall-1-4-bunny-2 {
  position: absolute;
  width: 30px;
  height: auto;

  bottom: 0;
  right: 30px;
}

/* sheep pen */
.stall:has(img#stall-1-5) .wares-item {
  width: 40px;
}

/* fish stall */
.stall img#stall-4-3 {
  height: 120%;
  margin-top: -30px;
}
.stall img#stall-4-3 + .wares-item img {
  width: 130%;
}

#market #market-top-row, #market-middle-row, #market-bottom-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

#market #market-top-row, #market #market-bottom-row {
  height: 20%;
}

#market #market-middle-row {
  height: 40%;
  margin-left: 100px;
}

#mml-top, #mml-bottom, #mmr-top, #mmr-bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

#market #market-middle-row #market-middle-centre {
  height: 100%;
  margin: 0px 50px;
}

#market #market-middle-row #market-middle-centre img {
  height: 100%;
}

#market #market-middle-row #market-middle-centre #stage {
  height: 100%;
  max-width: 370px;
}

/* ===== bulletin board ===== */

#bulletin-board-container {
  position: fixed;
  right: 20px;
  bottom: 20px;

  width: 250px;
  height: 300px;
  background-color: var(--message-board);
}

#bulletin-board {
  height: calc(100% - 12px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  font-family: Hershey-Noailles;
  color: var(--font-color);
}

#bulletin-board h4 {
  margin: 5px;
  text-align: center;
  border-bottom: 1px solid var(--font-color);
}

#bb-scroller {
  max-height: 235px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column-reverse;
}

#bulletin-board ul {
  list-style-type: none;
  padding: 0 3px;
  margin: 0;
}

#bulletin-board ul li {
  margin: 5px 0;
  padding: 3px;
}

#bulletin-board ul li:nth-child(2n) {
  background-color: #FEF3EF;
  border-radius: 5px;
}

#bulletin-board form input {
  width: calc(100% - 48px);
}

#bulletin-board form input, button {
  margin: auto;
  font-family: Hershey-Noailles;
  color: var(--font-color);
}

/* ===== absolute items ===== */

.grass-tuft {
  width: 30px;
  position: absolute;
}

.grass-tuft img {
  width: 100%;
}

.grass-tuft .gt-flower {
  width: 110%;
  position: absolute;
  top: -17px;
  left: -2px;
}

.grass-tuft#gt-1 {
  top: 200px;
  left: 100px;
}

.grass-tuft#gt-2 {
  left: 400px;
  bottom: 300px;
}

.grass-tuft#gt-3 {
  top: 400px;
  left: 600px;
}

.grass-tuft#gt-4 {
  left: 700px;
  bottom: 230px;
}

.grass-tuft#gt-5 {
  left: 270px;
  bottom: 80px;
}

.grass-tuft#gt-6 {
  top: 220px;
  left: 780px;
}

.grass-tuft#gt-7 {
  top: 50%;
  left: 920px;
}

.grass-tuft#gt-8 {
  bottom: 280px;
  left: 1200px;
}

.grass-tuft#gt-9 {
  top: 72px;
  left: 1150px;
}

.grass-tuft#gt-10 {
  top: 270px;
  left: 1450px;
}

.grass-tuft#gt-11 {
  bottom: 80px;
  left: 1560px;
}

.grass-tuft#gt-12 {
  bottom: 320px;
  left: 1800px;
}

.grass-tuft#gt-13 {
  top: 180px;
  left: 2050px;
}

.grass-tuft#gt-14 {
  top: 45%;
  left: 2100px;
}