*{
    font-family: 'Kosugi', sans-serif;
    text-align: left;
}

th, td {
    padding: 15px;
}

img{
    max-width: 800px;
    max-height: 600px;
}

.info {
    position: relative;
    min-height: 50px; /* Ensure sections have some height */
    z-index: 2; /* Add z-index to ensure text stays above images */
}

.hover-text {
    position: relative;
    z-index: 2;
    cursor: pointer;
    pointer-events: auto; /* Ensure links are clickable */
}

/* Add specific styling for description text and year */
.info th:nth-child(2),
.info th:nth-child(3),
table:not(.info) th {
    position: relative;
    z-index: 3; /* Keep higher z-index for all table text */
}

.hover-card {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1; /* Keep images behind text */
    background: transparent;
    pointer-events: none; /* Prevent hover card from blocking clicks */
}

.hover-card img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 50vw;
    max-height: 50vh;
    object-fit: contain;
    pointer-events: none; /* Prevent images from blocking clicks */
    z-index: 1; /* Ensure images stay behind text */
}

/* Desktop hover behavior */
@media (min-width: 601px) {
    .hover-text:hover .hover-card {
        display: block !important;
    }
    
    /* Ensure hover text is clickable */
    .hover-text {
        position: relative;
        z-index: 2;
    }
    
    /* Hide hover card by default on desktop */
    .hover-card {
        display: none !important;
    }
}

/* Add some spacing between table rows */
.info th {
    padding: 20px 15px;
}

/* Ensure table takes full width */
table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
    z-index: 2; /* Ensure table stays above images */
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .hover-card img {
        max-width: 80vw;
        max-height: 40vh;
        top: 50%;
        z-index: 1; /* Ensure images stay behind text on mobile */
    }
    
    /* Make the entire row clickable on mobile */
    .info {
        position: relative;
        min-height: 50px;
        z-index: 2;
        cursor: pointer;
    }
    
    /* Show hover card when the row is clicked */
    .info:active .hover-card,
    .info:focus .hover-card {
        display: block !important;
        z-index: 1; /* Ensure hover card stays behind text */
    }
    
    /* Ensure table and text stay above images on mobile */
    table, th, td {
        position: relative;
        z-index: 2;
    }
    
    body {
        padding-top: 20px;
    }
    
    /* Ensure all text stays above images on mobile */
    h1, h3, table, th, td, .info th:nth-child(2),
    .info th:nth-child(3), table:not(.info) th {
        position: relative;
        z-index: 3;
    }
}

/* Base font size reduction */
body {
    font-size: 14px;
    position: relative;
    z-index: 2; /* Increase body z-index */
}

h1 {
    font-size: 24px;
}

h3 {
    font-size: 16px;
}

p, table {
    font-size: 12px;
}

a {
    font-size: 12px;
}

/* Ensure all text elements stay above images */
h1, h3, table, th, td, .info th:nth-child(2),
.info th:nth-child(3), table:not(.info) th {
    position: relative;
    z-index: 3;
}