/* Food wasted yesterday chart */



/* Global Styles */

 
html{
  background-color:rgb(33, 27, 78) ;
 }


 body {
  overflow-x:hidden;
  overflow-y: hidden;
}
  



 /* Hidden Section at first */
 

#hiddenSection {
  z-index: 999; 
}

#passwurd {
  color: azure;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#passwordMessage {
  color: azure;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


#hiddenSection {
  display: none;
  text-align: center;
  background-color: rgb(33, 27, 78);
  z-index: 1000;
}


 /* Hidden Section after verifying password */


 .input-box {
  width: 70%;
  padding: 1%;
  margin: 5px auto;
  border-radius:7px;
  border: 1px solid #eee;
  transition: .3s border-color;
}

/* Button Styles */
.button {
  margin: 5px auto; 
  border-radius: 8px;
  border: 0;
  background-color: rgb(249, 249, 246);
  padding:5%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size: 1.vw;

}

.button:hover {
  background-color: rgb(146, 120, 170) ;
}

#toggleButton {

border-radius: 5px;
border: none;
width: 30%;

}


/* Arrow to open hidden section */

#button_hiddenSection {
  display: flex;
  justify-content: center;

}
#button_hiddenSection:hover {
  background-color:rgb(146, 120, 170);
}


#arrowIcon {
  color: aliceblue;
}

#toggleButton {
  background-color:rgb(33, 27, 78) ;;
}




/* SLIDE 1 */

#slide1 {
  background-color:rgb(33, 27, 78) ; ;
  margin: 0;
  height: 100vh;
  width: 100vw;
}

/* The heading*/
 #head {
    font-family: 'Oswald SemiBold';
    color: rgb(146, 120, 170);
    font-weight: bold; 
    position: relative;
    left: 20%;
    font-size: 2.5vw;
  }


  #heading {
    font-family: 'Oswald SemiBold';
    color: rgb(146, 120, 170);
    margin: 0;
    font-size: 6.5vw;
    position: relative;
    left: 20%;
    line-height: 0.2;
    margin-bottom: 10%;
  }
    

#header {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  text-align: left; 
  margin-bottom: 20px; 
}
  

/* The Plate Chart*/

 #chart {
    display: grid;
    gap: 10px; 
    width: 80%;
    position: relative;
    left: 5%;
    top:20%;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Default size for larger screens */
  
  }
  #chart-container {
    max-height: 60%; /* Adjust the maximum height as needed */
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
  }

  #plateCount {
    font-family: 'Oswald Bold';
    color: rgb(146, 120, 170);
    font-size: 11vw;
    position: relative;
    right: 50%;
    line-height: 0.5;
  }

  .plate-image {
    width: 100%;
    aspect-ratio: 1/1;
   }



  


  


/* SLIDE 2 */

/* The written portion of slide 2*/
#big_cont {
  position: relative; 
}
/* Statement 1*/
#weight_statement {
  font-family:'Oswald Regular';
  text-align: right;
  position: absolute;
  right:4%;
  top: 2vw ;
  line-height:0;
  color:rgb(146, 120, 170); 
}

#cumulative {
  font-size: 4.4vw;
  position: relative;
  top:30%;
}

#weight {
  font-family:'Oswald Medium';
  font-size: 6vw;
}

#cumulativeWeightValue {
  font-size: 7vw;
  font-family:'Oswald Bold';
}

#count-up {
  font-size: 300%;
  color: rgb(3, 26, 33);
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  letter-spacing: 4px;
}

/* Statement 2*/
#yestWeight {
  font-family: 'Oswald Bold';
  position: absolute; 
  text-align: right;
  top: 27vw; 
  right: 4%;
  line-height: 0;
  color: rgb(146, 120, 170);
}

#totalPlateWaste{
  font-family:'Oswald Regular' ;
  font-size:3.5vw;
}

#yesterday {
  font-size:5.5vw;
}

#countUpValue {
  font-size: 7vw;
}



/*Rotating plate image*/
.rotate{
  animation: rotateImg 40s linear infinite;
}
@keyframes rotateImg{
  from {
   transform: rotate(0deg);
  }
 to {
  transform: rotate(359deg);
 }


}
.rotate {
  position:absolute;
  width: 70%;
  aspect-ratio: 1/1;
  z-index: -1;
  top: 20%;
  
   
}

#plateRotate {
 position: relative;
 
 left: -10%;

}



/*Making Slide 1 & 2 Responsive*/

/* Media query for screens with a maximum width of 799px (up to 799px) */
@media screen and (max-width: 799px) {
  #chart {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
  }
}


@media screen and (max-width: 550px) {
  #yestWeight {
    font-family: 'Oswald Bold';
    position: absolute; 
    text-align: right;
    top: 28vw; 
    right: 4%;
    line-height: 0;
    color: rgb(146, 120, 170);
  }
}


/* Media query for screens with a maximum width of 400px (up to 400px) */
@media screen and (max-width: 450px) {
  #chart {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); 
    
  }
  #chart-container {
    max-height: 400px; 
  }
  #plateCount {
    font-family: 'Oswald Bold';
    color: rgb(146, 120, 170);
    font-size: 11vw;
    position: relative;
    right: 47%;
    line-height: 0.5;
  }
  #yestWeight {
    font-family: 'Oswald Bold';
    position: absolute; 
    text-align: right;
    top: 32vw; 
    right: 4%;
    line-height: 0;
    color: rgb(146, 120, 170);
  }
  
}

/* Media query for screens with a maximum width of 300px (up to 300px) */
@media screen and (max-width: 300px) {
  #chart {
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); 
    
  }
 
  #yestWeight {
    font-family: 'Oswald Bold';
    position: absolute; 
    text-align: right;
    top: 37vw; 
    right: 4%;
    line-height: 0;
    color: rgb(146, 120, 170);
  } 
  
  
}

/* Media query for screens with a maximum width of 200px (up to 200px) */
  @media screen and (max-width: 200px) {
    #chart {
      grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); 
      
    }
   #yestWeight {
      font-family: 'Oswald Bold';
      position: absolute; 
      text-align: right;
      top: 45vw; 
      right: 9%;
      line-height: 0;
      color: rgb(146, 120, 170);
    } 
}