/* RESOPONSIVENESS */

@media (max-width: 1024px){
    /* Header CSS */
    .headerContainer{
        flex-direction: column;
        gap: 30px;
    }
    .headerTitle h1 {
        text-align: center;
    }
    .headerOthers{
        gap: 25px;
    }
    .headerTitle p{
        text-align: center;
    }

    /* Movie list page CSS */

    .container{
    grid-template-columns: 1fr 1fr 1fr;
    }

    /* New post page & Edit post page CSS */

    .thoughtBox h1{
        font-size: 20px;
    }
    .textarea{
        max-width: 430px;
        font-size: 16px;
    }
    .newImage{
      margin-top: 20px;
    }
    

}

@media (max-width: 768px){

    /* Header CSS */

    .headerContainer{
        flex-direction: column;
        gap: 30px;
    }
    .headerTitle h1 {
        text-align: center;
    }
    .headerOthers{
        gap: 20px;
    }
    .headerTitle p{
        text-align: center;
    }
    .dropDown {
        font-size: 10px;
    }
    .searchBar{
       width: 120px;
       max-height: 25px;
       font-size: 10px;
    }
    .adminButton{
        font-size: 10px;
    }
    /*Home page CSS */

    .mainContainer{
        flex-direction: column;
    }
    .mainImage{
     height: 250px;
     width: 179px;
    }
    .containerb{
        padding-left: 0px;
   }
    .mainImage{
        margin-left: 10px;
    }
    .containerb h1{
        font-size: 30px;
    }
    .containerb p{
        font-size: 15px;
    }
    .containerb p strong{
        font-size: 15px;
    }
    .read-more-btn { 
        font-size: 13px;
    }
    .buttons .material-symbols-outlined {
     font-size: 18px;           
    }
    .buttons {
      padding: 6px;
    }
    .buttonBox{
        gap: 35px;
        margin:0px;
    }



    /* Movie list page CSS */
    .image{
     height: 250px;
     width: 150px;        
    }
    .moviesh3{
        font-size: 15px;
        max-width: 150px; 
    }
    .status-bar {
        font-size: 25px;
    }

    /* New post page & Edit post page CSS */

    .thoughtContainer{
        flex-direction: column;
        gap: 30px;
    }
    .thoughtBox h1{
        font-size: 18px;
    }
    .textarea{
        max-width: 400px;
        min-height: 100px;
        font-size: 12px;
    }
    .star-rating label{
    font-size: 15px;
    }
    .star-rating input:checked ~ label{ 
    font-size: 20px;
}
    .newImage{
      margin-top: 20px;
      height: 250px;
      width: 150px;  
    }
    .submitButton{
     font-size: 12px;
    }

    /* Footer page CSS */
    .footer p{
        font-size: 12px;
    }
}




@media (max-width: 480px){

    /* Header CSS */
    .headerContainer{
        flex-direction: column;
        gap: 30px;
    }
    .headerTitle h1 {
        font-size: 25px;
        text-align: center;
    }
    .headerOthers{
 
        gap: 10px;
    }
    .headerTitle p{
        text-align: center;
        font-size: 10px;
    }
    .dropDown {
        font-size: 8px;
    }
    .searchBar{
       width: 80px;
       max-height: 25px;
       font-size: 8px;
    }
    .adminButton{
        font-size: 8px;
        align-self:first baseline;
    }

    /*Home page CSS */

    .mainContainer{
        flex-direction: column;
    }
    .mainImage{
     height: 200px;
     width: 143px;
    }
    .containerb{
        padding-left: 0px;
   }
    .mainImage{
        margin-left: 10px;
    }
    .containerb h1{
        font-size: 20px;
    }
    .containerb p{
        font-size: 12px;
    }
    .containerb p strong{
        font-size: 12px;
    }
    .read-more-btn { 
        font-size: 10px;
    }
    .buttons .material-symbols-outlined {
     font-size: 15px;           
    }
    .buttons {
      padding: 4px;
    }
    .buttonBox{
        gap: 20px;
        margin:0px;
    }

    /* Movie list page CSS */
    .image{
     height: 200px;
     width: 133px;        
    }
    .moviesh3{
        font-size: 13px;
        max-width: 133px; 
    }
    .container{
    grid-template-columns: 1fr 1fr ;
    }
    .status-bar {
        font-size: 20px;
    }
    
    /* New post page & Edit post page CSS */

    .thoughtBox h1{
        font-size: 15px;
    }
    .textarea{
        max-width: 250px;
        font-size: 10px;
    }
    .newImage{
      margin-top: 20px;
      height: 200px;
      width: 133px;  
    }
    .star-rating label{
    font-size: 15px;
    }
    .star-rating input:checked ~ label{ 
    font-size: 20px;
    }
    .submitButton{
    font-size: 12px;
    }

    /* others */
    .modalBox{
          max-width: 300px;
    }
    .cancelBtn{
        font-size: 10px;
    }
    .deleteBtn{
      font-size: 10px;
    }
    .login-box{
        max-width: 300px;
    }

        /* Footer page CSS */
    .footer p{
        font-size: 10px;
    }
    #scrollTopBtn,
    #scrollBottomBtn {
    width: 38px;
    height: 38px;
    font-size: 15px;
    right: 15px;
  }

}


@media (max-width: 360px){

    /* Header CSS */
    .headerContainer{
        flex-direction: column;
        gap: 20px;
    }
    .headerTitle h1 {
        font-size: 20px;
        text-align: center;
    }
    .headerOthers{
        gap: 8px;
    }
    .headerTitle p{
        text-align: center;
        font-size: 8px;
    }
    .dropDown {
        font-size: 6px;
    }
    .searchBar{
       width: 65px;
       max-height: 25px;
       font-size: 6px;
    }
    .adminButton{
        font-size: 6px;
        align-self:first baseline;
    }

    /*Home page CSS */

    .mainContainer{
        flex-direction: column;
    }
    .mainImage{
     height: 150px;
     width: 107px;
    }
    .containerb{
        padding-left: 0px;
   }
    .mainImage{
        margin-left: 8px;
    }
    .containerb h1{
        font-size: 15px;
    }
    .containerb p{
        font-size: 8px;
    }
    .containerb p strong{
        font-size: 10px;
    }
    .read-more-btn { 
        font-size: 8px;
    }

    /* Movie list page CSS */
    .image{
     height: 150px;
     width: 99px;        
    }
    .moviesh3{
        font-size: 10px;
        max-width: 133px; 
    }
    .container{
    grid-template-columns: 1fr;
    }
    .status-bar {
        font-size: 15px;
    }
    
    /* New post page & Edit post page CSS */

    .thoughtBox h1{
        font-size: 11px;
    }
    .textarea{
        max-width: 150px;
        font-size: 8px;
    }
    .newImage{
      margin-top: 20px;
      height: 150px;
      width: 99px;  
    }
    .star-rating label{
    font-size: 10px;
    }
    .star-rating input:checked ~ label{ 
    font-size: 15px;
    }
    .submitButton{
    font-size: 10px;
    }

    /* others */
    .modalBox{
          max-width: 300px;
    }
    .cancelBtn{
        font-size: 10px;
    }
    .deleteBtn{
      font-size: 10px;
    }
    .login-box{
        max-width: 300px;
    }
  #scrollTopBtn,
  #scrollBottomBtn {
    width: 34px;
    height: 34px;
    font-size: 14px;
    right: 10px;
  }
}