
    /* Reset base */
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family:"Schoolbell" ;
      font-size: 40px;
     
    }
    .schoolbell-regular {
      font-family: "Schoolbell", cursive;
      font-weight: 400;
      font-style: normal;
    }
    /* Sfondo con immagine + opacità */
    body::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      background: url('images/classe.png') no-repeat center center/cover;
      opacity: 0.4; /* OPACITÀ */
      z-index: -1;
    }

      .top-bar {
      width: 100%;
      height: 120px;
      background: url('images-home/nav-bar2.png'); 
      background-repeat: repeat-x;        
      background-size: auto 100%;         
      background-position: left top;
      display: flex;
      position:fixed;
      align-items: left;
    }
    .footer {
    position: fixed;
    overflow: hidden;
    bottom: 0;  
    left: 0;
    width: 100%;
    height: 80px;
    background: url('images-home/footer.png'); 
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: left bottom;
  
    }

    .footer-pages{
      display: flex;
      justify-content: space-between; 
      align-items: center;
    }

    .footer p {
    text-align: right;
    margin: 10px 25px 10px;
    }

    a {
  text-decoration: none !important;
    
  }

    .heart-container {
      float:right;
      margin-top: 15px;
      margin-right: 20px;
      width: fit-content;
      height: fit-content;

    }

    .heart {
    font-size: 30px;
    cursor: pointer;
    color: rgb(0, 0, 0);
    transition: transform 0.2s, color 0.3s;
    margin: 5px;
    } 

    .data {
      font-size: 20px;
      font-weight: bold;
    }
    /* Contenitore */
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 100%;
      gap: 80px;
    }

    .container-pages{
        display: flex;
        flex-direction: column; 
        align-items: center;    
        gap: 40px;
        padding: 180px;
    }

    /* Div cliccabili */
    .card-home {
      width: 200px;
      height: 280px;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .card-pages{
      width: 80%;             
      max-width: 800px;       
      height: 100px;    
      background-size:contain;      
      background-position: center;  
      background-repeat: no-repeat;
     
    }


   .card-home:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  }

 

    /* Click */
    .card-home:active {
      transform: scale(0.95);
    }