body{
    margin:40px auto;
    max-width:650px;
    line-height:1.6;
    font-size:16px;
    font-family: 'Lora', serif;
    padding:0 10px
}
h1,h2,h3,h4{
    line-height:1.2;
    font-family: 'Inter', sans-serif;
}

.foo img {
    max-width: 500px;
    max-height: 500px;
    height: auto;
    display: block;
    margin: auto;
}

.image-class {
  max-width: 200px;
  max-height: 200px;
}

img.object-image-class {
  max-width: 700px !important;
  max-height: 700px !important;
}

a {
  text-decoration: none;
}

/* 1. Default (Light Mode) colors */
:root {
  --color-text: #444;
  --color-background: #eee;
}

/* 2. Dark Mode override based on system settings */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #eee;
    --color-background: #444;
    a { color: #66b3ff; } /* Lighter color for better contrast */
    a:hover { color: #ffffff; } /* Brighter on hover */
  }
}

/* 3. Apply the variables to elements */
body {
  color: var(--color-text);
  background-color: var(--color-background);
  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

table {
  border-collapse: collapse; /* Collapse borders into a single line */
  width: 100%; /* Set table width */
}

th, td {
  border: 1px solid #ddd; /* Add a border to cells */
  padding: 8px; /* Add padding to content */
  text-align: left; /* Align text to the left */
}

/* Zebra
tr:nth-child(even) {
  background-color: #f2f2f2; 
}
*/

tr:hover {
  background-color: #ddd; /* Hover effect */
}

th {
  background-color: gray; /* Header background color */
  color: white; /* Header text color */
}

table td, table th {
  vertical-align: top;
}