/* General Styles */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     background-color: #f0f2f5;
 }

 .layout {
     display: flex;
     background: #f4f4f9;
 }

 .sidebar {
     order: 1;
     width: 20%;
     background: #e3e6eb;
     color: white;
     padding: 10px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     margin: 20px 10px 20px auto;
     display: flex;
     flex-direction: column;
     gap: 10px;
     border-radius: 12px;
     padding: 40px;
 }

 /* Centered container */
 .container {
     order: 2;
     width: 60%;
     max-width: 800px;
     margin: 20px auto 20px auto;
     background: #e3e6eb;
     padding: 10px;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 /* Title */
 h1 {
     color: #333;
     font-size: 24px;
     margin-bottom: 20px;
     text-align: center;
 }

 /* Title */
 .container h2,
 sidebar h2 {
     color: #333;
     font-size: 20px;
     margin-bottom: 20px;
     text-align: center;
 }

 /* Input field */
 input {
     width: calc(100% - 24px);
     padding: 14px;
     margin: 10px 0;
     border: 1px solid #ccc;
     border-radius: 6px;
     font-size: 18px;
     text-align: center;
 }

 /* Button styles */
 button {
     width: 100%;
     padding: 14px;
     background-color: #007bff;
     border: none;
     color: white;
     font-size: 18px;
     border-radius: 6px;
     cursor: pointer;
     transition: background 0.3s ease-in-out;
 }

 button:hover {
     background-color: #0056b3;
 }

 /* Document list styling */
 .document-list {
     display: grid;
     gap: 10px;
     grid-template-columns: repeat(1, 1fr);
     list-style: none;
     padding: 0;
     margin-top: 20px;
     justify-content: center;
 }

 .document-list>li.document-listElement {
     background: #ffffff;
     padding: 16px;
     margin: 10px 0;
     border-radius: 8px;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
     text-align: left;
     transition: transform 0.2s ease-in-out;
     border: 2px solid transparent;
     /* Ensure a smooth transition */
 }

 .document-list>li.document-listElement:hover {
     border: 2px solid grey;
 }

 .document-card {
     position: relative;
     /* Needed for absolute positioning of child elements */
     padding: 5px;
     display: flex;
     flex-direction: column;
 }

 .document-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     /* Pushes title left and menu button right */
 }

 .document-title {
     flex-grow: 1;
     /* Makes the title take up available space */
     text-decoration: none;
     margin-right: 2em;
     color: #007bff;
     font-weight: bold;
     font-size: 18px;
 }

 .document-title:hover {
     text-decoration: underline;
 }

 /* Responsive Design */
 @media (min-width: 768px) {
     .container {
         max-width: 600px;
         padding: 30px;
     }

     h1 {
         font-size: 28px;
     }

     input,
     button {
         font-size: 20px;
     }

     .document-list {
         display: grid;
         gap: 10px;
         grid-template-columns: repeat(2, 1fr);
     }

     .document-list>li.document-listElement {
         padding: 18px;
     }
 }

 @media (min-width: 1024px) {
     .container {
         max-width: 800px;
         padding: 40px;
     }

     h1 {
         font-size: 32px;
     }

     input,
     button {
         font-size: 22px;
     }
 }