#logo {
    display: flex;
    align-items: center;
   }
   
   
   #img1 {
      width: 100%;         /* L'immagine occupa il 100% della larghezza del contenitore */
      max-width: 300px;    /* L'immagine non supererà mai i 800px di larghezza */
      height: auto;        /* Mantiene le proporzioni */
      display: block;      /* Rimuove lo spazio sotto l'immagine */
      margin: 0 auto;      /* Centra l'immagine */
    background-color: #e0caa2;
padding: 0 0 0 20px;
   }
   
   
   #header{
       display: flex;
       flex-direction: column; 
       background-color: #e1c699;
   }
   #hd {
    background-color: #e0caa2;
    position: relative;
    display: flex;
    justify-content: space-between; 
    align-items: start;
    padding: 10px 20px;
    border-bottom: solid 2px black;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, 
    rgba(0, 0, 0, 0.12) 0px -12px 30px, 
    rgba(0, 0, 0, 0.12) 0px 4px 6px, 
    rgba(0, 0, 0, 0.17) 0px 12px 13px, 
    rgba(0, 0, 0, 0.09) 0px -3px 5px;
   }
   
   
   
   .login {
    font-size: 20px;
    display: flex;
    align-items: center;
   }
   .login a {
       display: flex;
       align-items: center;
       margin-left: 10px;
   }
   .login a:first-child {
       border-right: 3px solid black;
       padding-right: 16px;
       margin-right: 10px;
   }
   
   
   a{
   text-decoration: none; 
   }

   p{
    padding: 6px;
    line-height: 22px;
   }

 button {
   --primary-color: #704214; 
   --secondary-color: #fff; 
   --hover-color: #502f0f; 
   --arrow-width: 10px;
   --arrow-stroke: 2px;
   top: 10px;
   box-sizing: border-box;
   border: 2px solid black; 
   border-radius: 5px;
   color: var(--secondary-color);
   padding: 10px 20px; 
   background: var(--primary-color);
   display: flex;
   transition: 0.3s background; 
   align-items: center;
   gap: 0.6em;
   font-weight: bold;
   font-size: 105%;
    }
    
    
    button .arrow-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    }
    
    
    button .arrow {
    margin-top: 1px;
    width: var(--arrow-width);
    background: var(--primary-color);
    height: var(--arrow-stroke);
    position: relative;
    transition: 0.2s;
    }
    
    
    button .arrow::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: solid var(--secondary-color);
    border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;
    display: inline-block;
    top: -3px;
    right: 3px;
    transition: 0.2s;
    padding: 3px;
    transform: rotate(-45deg);
    }
    
    
    button:hover {
    background-color: var(--hover-color);
    }
    
    
    button:hover .arrow {
    background: var(--secondary-color);
    }
    
    
    button:hover .arrow:before {
    right: 0;
    }
   


 .postContainer {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 20px;
   padding: 20px;
   background-color: #e1c699;
}

.postContainer .deleted{
    border: 3px solid red;
}

.postCard {
   border: 1px solid #ddd;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   background-color: #fff;
   display: flex;
   flex-direction: column;
   height: 99%;
   text-align: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   width:99% ;
}

.postCard:hover {
   transform: scale(1.05);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.postTitle {
   font-size: 1.2em;
   font-weight: bold;
   margin: 2% 0;
   text-align: center;
   height: 10%;
   text-align: center;
}

.postImage img {
   width: 100%; 
   height: 100%; 
   object-fit: cover; 
   display: block; 
}
.postImage {
   flex: 0 0 auto; 
   height: 50%; 
   width: 100%; 
   overflow: hidden; 
}
.postActions {
   display: flex;
   justify-content: space-between; 
   padding: 10px 20px;
   gap: 10px; 
}

.modifyButton,
.descriptionButton {
   flex: 1; 
   text-align: center;
}

.postDescription {
   padding: 10px;
   font-size: 0.9em;
   overflow: hidden;
   flex: 1;
   color: #555;
}


.descriptionButton {
   display: inline-block;
   padding: 10px 20px;
   background-color: #704214; 
   color: #fff;
   text-decoration: none;
   border-radius: 5px;
   transition: background-color 0.3s;
   font-weight: bold;
}

.descriptionButton:hover {
   background-color: #502f0f;
}

.modifyButton {
   display: inline-block;
   padding: 10px 20px;
   background-color: #0fcc1f; 
   color: #fff;
   text-decoration: none;
   border-radius: 5px;
   transition: background-color 0.3s;
   font-weight: bold;
}

.modifyButton:hover {
   background-color: #0ca019; 
}


.pagination {
   text-align: center;
   width: 100%;
   padding-bottom: 40px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
   flex-direction: row;
   align-content: center;
}

.pagination a,
.pagination span {
   padding: 10px 15px;
   margin: 0 5px;
   text-decoration: none;
   border-radius: 5px;
   font-weight: bold;
   font-size: 1rem;
   color: #704214;
   transition: background-color 0.3s, color 0.3s;
}

.pagination .prevButton,
.pagination .nextButton {
   background-color: #704214;
   color: white;
   display: inline-flex;
   justify-content: center;
   align-items: center;
}

.pagination .prevButton:hover,
.pagination .nextButton:hover {
   background-color: #502f0f;
}

.pagination .pageNumber {
   background-color: #f0f0f0;
   border: 2px solid #704214;
   color: #704214;
   padding: 8px 12px;
}

.pagination .pageNumber:hover {
   background-color: #704214;
   color: white;
}

.pagination .currentPage {
   background-color: #704214;
   color: white;
   padding: 8px 12px;
}

/* Media Queries for Responsive Design */
@media (max-width: 600px) {
   .pagination a,
   .pagination span {
       padding: 8px 12px;
       margin: 0 3px;
       font-size: 0.9rem;
   }

   .pagination .pageNumber,
   .pagination .currentPage {
       padding: 6px 10px;
   }
}
footer.fine {
   background-color: #333333;
   color: #ffffff;
   padding: 20px 40px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   font-family: Arial, sans-serif;
   font-size: 14px;
}

Sezione icon
footer.fine .icon {
   flex: 1 1 40%;
   margin-bottom: 20px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

footer.fine .icon .social-icons {
   margin-bottom: 20px;
}

footer.fine .icon .social-icons h3 {
   font-size: 16px;
   text-transform: uppercase;
   margin-bottom: 10px;
}

footer.fine .icon .social-icons a img {
   width: 40px;
   height: 40px;
   margin-right: 10px;
   vertical-align: middle;
}

footer.fine .icon .privacy {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

footer.fine .icon .privacy a {
   color: #ffffff;
   text-decoration: none;
   font-size: 12px;
}

footer.fine .icon .privacy a:hover {
   text-decoration: underline;
}

Sezione pos
footer.fine .pos {
   flex: 1 1 40%;
   margin-bottom: 20px;
}

footer.fine .pos h3 {
   font-size: 16px;
   text-transform: uppercase;
   margin-bottom: 10px;
}

footer.fine .pos a {
   color: #ffffff;
   text-decoration: none;
   display: block;
   margin-bottom: 5px;
}

footer.fine .pos a:hover {
   text-decoration: underline;
}

#filtri {
   background-color: #e0caa2;
   border: 1px solid #bca885;
   border-radius: 10px;
   padding: 20px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 15px;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
}

/* Per allineare i filtri e il bottone */
.filtro {
   display: flex;
   flex-direction: column;
}


.full-width {
   grid-column: span 3;
}


.filtro label {
   font-size: 16px;
   font-weight: bold;
   color: #704214;
   margin-bottom: 5px;
}


.filtro input[type="text"],
.filtro select {
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 14px;
}

.bottone {
   display: flex;
   justify-content: center; 
   align-items: center;
   margin-top: 10px;
}

#filtri button {
   background-color: #704214;
   color: #fff;
   padding: 15px 40px; 
   border: none;
   border-radius: 8px;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   transition: background-color 0.3s;
}

#filtri button:hover {
   background-color: #502f0f;
}



#intro {
   margin-bottom: 20px; 
}

input[type="checkbox"] {
   appearance: none;
   width: 20px;
   height: 20px;
   border: 2px solid #333;
   border-radius: 3px;
   position: relative;
   cursor: pointer;
   transition: all 0.3s ease;
   margin-right: 10px;
}

input[type="checkbox"]:checked {
   background-color: #333;
   border-color: #333;
}

input[type="checkbox"]:checked::after {
   content: '';
   width: 6px;
   height: 10px;
   border: solid white;
   border-width: 0 2px 2px 0;
   position: absolute;
   top: 3px;
   left: 6px;
   transform: rotate(45deg);
   transition: all 0.3s ease;
}

input[type="checkbox"]:hover {
   border-color: #555;
}

input[type="checkbox"]:checked:hover {
   background-color: #555;
   border-color: #555;
}
.postActions {
   display: flex;
   align-items: center; /* Allinea gli elementi sulla stessa linea */
   justify-content: space-between; /* Distanza uniforme tra gli elementi */
   padding: 10px 20px;
   gap: 15px; /* Distanza tra il pulsante e il checkbox */
   flex-wrap: wrap; /* Permette di andare a capo se lo spazio è insufficiente */
}

.postActions form {
   display: flex;
   align-items: center;
   gap: 5px; /* Distanza tra il checkbox e il label */
   flex-wrap: nowrap; /* Evita che il testo del label vada a capo */
}

.postActions label {
   font-size: 22px;
   color: #704214;
   white-space: nowrap; /* Il testo non viene spezzato */
}


.cPost {
   display: flex;
   justify-content: flex-start; 
   margin-top: 25px; 
   padding-left: 30px; 
}

.cPost button {
   background-color: #704214;
   color: #fff;
   padding: 15px 35px; 
   font-size: 18px; 
   border: none;
   border-radius: 10px;
   font-weight: bold;
   cursor: pointer;
   transition: background-color 0.3s;
}

.cPost button:hover {
   background-color: #502f0f;
}

@media (max-width: 768px) {
   #filtri {
       grid-template-columns: repeat(2, 1fr);
   }

   .full-width {
       grid-column: span 2;
   }
}

@media (max-width: 480px) {
   #filtri {
       grid-template-columns: 1fr;
   }

   .full-width {
       grid-column: span 1;
   }
}