.container {
    border-style: solid;
    border-width: 3px;
    border-color: black;
    width: 650px;
    height: 600px;
    margin: auto;
    display: flex;
    position: relative;
    background-image: url('wall5.jpg');
    background-size: contain;
}

.plant-area{
    box-sizing: border-box;
    /*
    border-style: solid;
    border-width: 1px;
    border-color: rgb(196, 30, 30);
    */
    width: 650px;
    height: 253px;
    position: absolute;
    bottom: 0;
}

.plant{
    display: inline-flex; /* Display plants next to each other */
    flex-direction: column; /* Stack leaves vertically */
    position: flex;
    
    margin-top: 50px;
}

.leaf {
    width: 100px;
    height: 100px;
    border-radius: 0 100%;
    background-color: #008000; /*healthy color*/
    position: absolute;
    border-style: solid;
    border-width: 2px;
    border-color: black;
}

.flower-bulb{
    background: #008000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    
    border-style: solid;
    border-width: 2px;
    border-color: black;
    margin-top: -48px;
}

.stem{
    width: 5px;
    height: 200px;
    background-color: #008000; 
    position: absolute;
    border-style: solid;
    border-width: 2px;
    border-color: black;
    
}


#S1{
    margin-left: 100px;
}
#fb1{
    margin-left: 77px;
}
#L1{
    transform: rotate(90deg);
    margin-left: 100px;
}
#L2{
    margin-top: 100px;
}
#L3{
    transform: rotate(90deg);
    margin-left: 100px;
    margin-top: 100px;
}

#S2{
    margin-left: 190px;
}
#fb2{
    margin-left: 168px;
}
#L5{
    transform: rotate(90deg);
    margin-left: 190px;
}
#L6{
    margin-top: 100px;;
    margin-left: 90px;
}
#L7{
    transform: rotate(90deg);
    margin-left: 190px;
    margin-top: 100px;
}
#L8{
    margin-left: 90px;
}

#S3{
    margin-left: 185px;
}
#fb3{
    margin-left: 162px;
}
#L9{
    transform: rotate(90deg);
    margin-left: 185px;
}
#L10{
    margin-top: 100px;
    margin-left: 85px;
}
#L11{
    transform: rotate(90deg);
    margin-left: 185px;
    margin-top: 100px;
}
#L12{
    margin-left: 85px;
}

.flower {
    z-index:1;
    border-radius:100%;
    /*display:inline-block;*/
    background-color:#faaa18;
    
    height:80px;
    width:80px;
    position:absolute;
    box-shadow:15px 17px #ffe000,
      -15px 17px #ffe000,
      -22px -7px #ffe000,
      0px -22px #ffe000,
      22px -7px #ffe000;
    
    margin-top: -80px;
}

#f1{
    margin-left: 65px;
}

#f2{
    margin-left: 155px;
}

#f3{
    margin-left: 150px;
}

.Bug-animation {
    cursor: pointer;
}

#scorePopUp {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding: 5%;
    /*top: 25%;
    left: 30%;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    border-style: dashed;
    border-radius: 25px;

    background-color: rgb(0,0,0); /* Fallback color */
    background-color: #b4e3b2; 
    text-align: center;
  }
  
  /* Modal Content */
  .popUpText {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
  }
  
  /* The Close Button */
  .popUpButton {
    align-items: center;
    appearance: none;
    background-color: #fff;
    border: 1px solid #dbdbdb;
    border-radius: .375em;
    box-shadow: none;
    box-sizing: border-box;
    color: #363636;
    cursor: pointer;
    display: inline-flex;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 1rem;
    height: 2.5em;
    justify-content: center;
    line-height: 1.5;
    padding: calc(.5em - 1px) 1em;
    position: relative;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: top;
    white-space: nowrap;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .popUpButton:hover {
    border-color: #b5b5b5;
    box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  }

.countdownContainer{
    height: 50px;
    width: 300px;
    background-color: #b4e3b2;
    border-radius: 10px;
    margin-top: 5px;
    margin-left: 5px;
}

#countdown{
    display: inline-flex;
    justify-content: center;
    align-items: right;
    margin-left: 10px;  
    font-size: 30px;
    padding: 10px;
    position: absolute;

    
}
.bug-numberContainer{
    height: 50px;
    width: 300px;
    background-color:  #b4e3b2;
    border-radius: 10px;
    margin-top: 5px;
    margin-left: 420px;
}

#bug-number{
    display: grid;
    justify-content: end;
    margin-left: -10px;  
    font-size: 30px;
    height: 70px;
    width: 100%;
    position: absolute;
    top: 8%; /* Position it at the vertical center */
    left: 44%; /* Position it at the horizontal center */
    transform: translate(-50%, -50%); /* Center it precisely */
}

  #start{
    align-items: center;
    appearance: none;
    background-color: #b4e3b2;
    border: 2px dashed #000000;
    border-radius: 10px;
    box-shadow: none;
    box-sizing: border-box;
    color: #000000;
    cursor: pointer;
    display: inline-flex;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 4vw;
    height: 3em;
    justify-content: center;
    line-height: 1.5;
    padding: calc(.5em - 1px) 1em;
    position: relative;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: top;
    white-space: nowrap;
    position: absolute;
    z-index: 1000; /* Sit on top */
    padding: 5%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #start:hover {
    border-color: #18d441;
    box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  }