.fili {
  height: calc(400px / 10); /* Initial size */
  transition: height 2s ease; /* Gradual transition effect */
}
.fili:hover {

  height:400px;

}


.fili{
/*.element:400px;
height:100%; */
border-radius: 2.5px !important;
position: fixed;
top: 50%;
left: 50%;

transform: translate(-50%, -50%);
}




#sentence-container {
  font-family: var(--system-ui);
  font-weight: 500 !important;
font-style: normal !important;
text-align: center;
font-size:16px;
  color: #565656;
}



p, a {
  font-family: var(--system-ui);
      font-weight: 500 !important;
    font-style: normal !important;
    text-align: center;
    font-size:16px;
      }

    h1 {
    
      font-family: var(--system-ui);
          font-weight: 500 !important;
    font-style: normal !important;
    text-align: center;
    font-size:38px;
    }

    
    
    #randImg {
        opacity: 0;
        transition: opacity 1s ease-in-out ;
    }
    
  

    p, h1, h2, h3, a {
        color: #565656 !important; 
        text-decoration:none ;
      }

  
    
  
    body {
        background-color:#f4f0ec !important;
    }
    

    :root {
      --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
    
    .element {
      font-family: var(--system-ui);
    }