#startscreen {
    height: 90vh;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 5%);
}

.scroll {
    z-index: -1;
    height: 100%;
    width: 100%;
    position: absolute;
}

#startcontainer {
    max-width: 65%;
    max-height: 60%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: absolute;
    transform: translate(0, 0);
}
#welcome {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2vw;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#headline {
  margin-top: 0;
  font-size: 3vw;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#text-one {
  margin-top: 0;
  font-size: 1.2vw;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#text-two {
  margin-top: 0;
  font-size: 1.2vw;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#text-three {
  margin-top: 0;
  font-size: 1.2vw;
  margin-bottom: 0;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#startbutton {
  /*margin-top: 0;*/
  display: flex;
  flex-direction: column;
  background-image: none;
  cursor: pointer;
  border: none;
  transform: scale(0.3);
  background-color: transparent;
  position: absolute;
  top: 70%;
  align-items: center;
  justify-content: center;
}

.back {
  background-image: url(https://firebasestorage.googleapis.com/v0/b/codedex-io.appspot.com/o/buildAssets%2FQgYgmwPsphfU0ponX2J6%2Fwoodentable.png?alt=media&token=c6767d53-0060-43e6-85cf-7d4746ae5892);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 2%;
  padding-bottom: 2%;
  margin-bottom: 2%;
  margin-top: 1%;
  background-position: 50%;
  background-size: 25% 100%;
}

#header {
  display: flex;
  justify-content: center;
  font-size: 1.1vw;
  font-weight: bolder;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: antiquewhite;
  transform: scale(2);
  
}

.flexblock {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(https://firebasestorage.googleapis.com/v0/b/codedex-io.appspot.com/o/buildAssets%2FQgYgmwPsphfU0ponX2J6%2Fwoodentable.png?alt=media&token=c6767d53-0060-43e6-85cf-7d4746ae5892);
  background-repeat: no-repeat;
  background-size: 80% 100%;
  background-position: 50%;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 10%;
  padding-right: 10%;
}

.garden {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#gardenpicture {
  width: 100%;
  height: 100%;
  z-index: 1;
  border: solid 0.5vh burlywood;
}

.plantcontainer {
  width: 100%;
  height: 100%;
}

.notebook {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.05);
}

#notebook {
  display: flex;
  position: relative;
  padding-right: 1.5%;
}

#dropArea {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -55%); 
  width: 70%; 
  height: 65%; 
  /*border: solid 3px black; */
  z-index: 9; 
}

#plantcontainer {
  display: flex;
  padding-left: 4%;
  padding-right: 4%;
  transform: scale(1.3);
  position: relative;
}

.formula-container {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  width: 100%; 
  height: 100%; 
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  z-index: 1; 
}

.formula-line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1%;
}

.formula-line img {
  width: 7%; 
  height: auto; 
  filter: brightness(0%);
}

.formula-line h1 {
  font-size: 150%; 
  margin: 0 2%; 
  line-height: 1; 
  padding-left: 5%;
  padding-right: 5%;
  transform: scale(1.5);
}

@keyframes bounce {
   0%, 100% {
       transform: translateY(0);
   } 50% {
       transform: translateY(3px);
   }
}

.seed {
  width: 25px;
  height: 25px;
  position: absolute;
  cursor: grab;
  z-index: 2;
  animation: bounce 1s linear infinite;
}

.seedling {
  width: 60px;
  height: 60px;
  cursor: grab;
  z-index: 2;
}

.flower {
  width: 80px;
  height: 80px;
  cursor: grab;
  z-index: 2;
}

.megaFlower {
  width: 100px;
  height: 100px;
  cursor:grab;
  z-index: 2;
}

@keyframes grow-and-shrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

#flowerImage {
  width: 20%;
  height: 20%;
  animation: grow-and-shrink 3s linear infinite;
}

#box {
  background: url(https://firebasestorage.googleapis.com/v0/b/codedex-io.appspot.com/o/buildAssets%2FI9wLNT6sTfQUHhIskufJ%2Fbox.png?alt=media&token=675d4662-af8a-46a4-a61b-e85a4c63a619);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50%;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  z-index: 10;
  text-align: center;
  justify-content: center;
}
#textbox {
  max-width: 70%;
  text-align: center;
  justify-content: center;
  position: absolute;
  transform: translate(20.5%, 3%);
  top: 15%;
}
#textbox > h3 {
  font-size: 2vw;
  margin-bottom: 0.5vh;
  margin-top: 2vh;

}
#textbox > h4 {
  font-size: 1.3vw;
  margin-top: 0;
}
#content {
  font-size: 1.2vw;
}

.plantbox {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -48%); 
  width: 100%; 
  height: 100%; 
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  z-index: 1; 
}

.plantfield {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1%;
  visibility: hidden;
}

.plantfield img {
  width: 20%; 
  height: auto; 
  margin-bottom: 8%;
  margin-left: 4%;
  margin-right: 2.5%;
  transform: scale(1.3);
}

#soundbutton {
  z-index: 12;
  background-image: url(https://firebasestorage.googleapis.com/v0/b/codedex-io.appspot.com/o/buildAssets%2FQgYgmwPsphfU0ponX2J6%2Fsoundbutton.png?alt=media&token=45249429-892a-426b-b5d4-a36f82eafbf1);
  width: 8em;
  height: 8em;
  cursor: pointer;
  background-size: cover;
  background-color: transparent;
  border: none;
  filter: brightness(40%);
  position: absolute;
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
  #startscreen {
    width: 95vw;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 1em;
  }

  #startcontainer {
    max-width: 90%;
    max-height: none;
    padding: 0 1em;
  }

  #welcome {
    font-size: 5vw;
  }

  #headline {
    font-size: 7vw;
  }

  #text-one, #text-two, #text-three {
    font-size: 4vw;
  }

  #startbutton {
    transform: scale(0.5);
    top: 75%;
  }

  #header {
    font-size: 5vw;
    transform: scale(1.5);
  }

  .flexblock {
    flex-direction: column;
    padding: 1em;
    background-size: contain;
  }

  #notebook, #plantcontainer {
    transform: scale(1);
    padding: 0;
    width: 100%;
  }

  .formula-line img {
    width: 15vw;
  }

  .formula-line h1 {
    font-size: 6vw;
    padding-left: 2vw;
    padding-right: 2vw;
    transform: scale(1);
  }

  #flowerImage {
    width: 40vw;
    height: auto;
  }

  .plantfield img {
    width: 30vw;
    margin-left: 1vw;
    margin-right: 1vw;
    transform: scale(1);
  }

  #soundbutton {
    width: 5em;
    height: 5em;
  }
}