@import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Single+Day&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Gochi+Hand&family=Single+Day&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html,
body {
  font-family: Single Day;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
}


.background {
  height: 75vw;
  padding: 0;
  margin: 0;
}

/*Header Styling */
.top-section {
  overflow: visible;
  width: 100%;
  height: 75px;
  display: grid;
  grid-template-areas: "logo search list";
  grid-template-columns: 100px minmax(1px,1fr) 300px;
  grid-template-rows: 17.5px 40px 17.5px auto;
  background-color: lightgrey;
  position: fixed;
  align-items: center;
  z-index: 3;
  column-gap: 10px;
}

.search-container {
  display: flex;
  color: white;
  justify-content: left;
  grid-column: 2;
  grid-row: 1 / 4;
  max-width: 100%;
  height: 40px;
}

/*Styling Dates*/
.date-section {
  height:auto;
  width: 100%;
  padding: 10px;
  display: flow-root;
  justify-content: flex-start;
  position: fixed;
  margin-top: 5%;
  z-index: 1;
}

#weekday {
  font-family: Gloria Hallelujah;
  color: white;
  font-size: 20px;
}

#date {
  font-family: Gloria Hallelujah;
  color: white;
  font-size: 25px;
  margin-top: -1%;
}

/*Header components*/
#search-bar {
  font-family: Single Day;
  width: 100%;
  border-width: 0px;
  background-color: rgb(71, 71, 71);
  color: white;
  opacity: 40%;
  border-radius: 12px;
  font-size: 18px;
  padding: 10px 40px;
}

.logo {
  display: flex;
  margin-left: 20%;
  justify-content:center;
  grid-row-start: span 3;

}

.button-contain {
  display: flex;
  color: white;
  justify-content: center;
  grid-row-start: span 3;
}

.button-contain button {
  font-family: Single Day;
  background-color: #4d4d4d;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  width: 50%;
  place-self: center;
  transition: background-color 0.3s ease;
  float:left;
}

/*Sky Asset Container*/
.section1 {
  position: relative;
  z-index: -4;
  width: 100%;
  pointer-events: none;
}

/*Setting up Sky Asset to take up Entire Width*/
.section1 img {
  width: 100%;
  pointer-events: none;
}

/*Styling Sun Div Container and Image Element*/
#sun {
  position: absolute;
  right: 15%;
  top: -5%;
  width: 10%;
  z-index: -1;
}

#sun-container {
  width: 140%;
  height: auto;
}

/*Styling Can Div Container and Image Element*/
#can:hover {
  cursor: pointer;
}

/*Setting Top Soil Location*/
.section3 {
  position: relative;
  margin-top: -65%;
  pointer-events: none;
}

#top-soil {
  pointer-events: none;
}

/*Pot and Plant Container */
#pot-plant-container {
  position: absolute;
  right: 46%;
  top: -2%;
  width: 12%;
  z-index: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*Set Up Pot position and image*/
#pot {
  position: absolute;
  right: 46%;
  top: 16%;
  width: 10%;
  z-index: -1;
}

#pot-container {
  width: 180%;
  height: auto;
}

/* Set up year navigator to be on top of pot */
#year-nav {
  position: absolute;
  display: flex;
  flex-direction: row;
  right: 47%;
  top: 27%;
  height: 30px;
  z-index: 1;
  transform: translate(50%, -50%);
}

#year-decrement, #year-increment {
  flex-grow: 1;
  font-size: 20px;
  background-color: rgba(255, 212, 171, 0.6);
  border: 0;
  padding: 2px;
  cursor: pointer;
  pointer-events: all;
  z-index: 5;
}

#year-decrement {
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
}

#year-increment {
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

/* on hover */
#year-decrement:hover, #year-increment:hover {
  background-color: rgba(255, 212, 171, 1.0);
}

#year-display {
  font-size: 20px;
  background-color: rgba(255, 212, 171, 0.6);
  padding: 10px 0;
  flex: 0 0 40px;
  /* center text immediately */
  display: flex;
  justify-content: center;
  align-items: center;
}

/*Set Up Plant position and image*/
#plant {
  position: absolute;
  right: 46%;
  top: -5%;
  width: 14%;
  height: auto;
  z-index: -1;
}

#plant-container {
  transition: none;
  width: 180%;
  height: auto;
  position: absolute;
}

.plant-stage-0 {
  margin-top: 13%;
  margin-left: 3%;
}

.plant-stage-1 {
  margin-left: 3%;
}

.plant-stage-2 {
  margin-top: 8%;
  margin-left: 4%;
}

.plant-stage-3 {
  margin-top: 8%;
  margin-left: 4%;
}
#plant-container.plant-stage-4 {
  margin-left: 9%;
  margin-top: 6.5%;
  width: 170%;
}
.plant-stage-5 {
  margin-left: 4%;
  size: 1%;
}

/*Set Up root position and image*/
#root {
  position: absolute;
  right: 46%;
  top: 32%;
  width: 40%;
  height: 100%;
  z-index: 2;
}

#root-nodes {
  width: 100%;
  height: 100%;
}

.root-node {
  /*Circle of radius 5px*/
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 3;
  pointer-events: all;
}

.root-node-label {
  /* position it up and to the right*/
  position: absolute;
  font-size: 20px;
  mix-blend-mode: difference;
  width: fit-content;
  pointer-events: none;
  text-wrap: nowrap;
  color: black !important;

  background-color: rgba(255, 212, 171, 0.6);
  border-radius: 10%;
  padding: 2px;
}

.root-node:hover {
  filter: brightness(70%);
  width: 20px;
  height: 20px;

  /* animate the dimensions for me please */
  transition: width 0.3s, height 0.3s;
  z-index: 4;
}

#root-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 180%;
  height: auto;
}

/*Watering Can Styles*/
#can-container {
  pointer-events: auto;
  width: 180%;
  height: auto;
  z-index: 2;
}

#can-container:hover {
  cursor: pointer;
}

#watering-can {
  position: absolute;
  right: 20%;
  top: 15%;
  width: 10%;
  z-index: 2;
}

/*Area of Lower Soil*/
.section2 img {
  width: 100%;
  margin-top: -1%;
}

@media screen and (max-width: 560px) {
  .background {
    height: 420px;
  }
}


/* animation for growing plant! */
@keyframes rumble {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.rumble {
  animation: rumble 1s linear; /* Longer duration with faster speed */
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgb(128, 128, 128);
  z-index: 10;
}

/* enable overlay if screen is small */
@media screen and (max-width: 560px) {
  #overlay {
    display: block;
  }
}

.overlay-content {
  /* center the content */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}