html {
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.references {
    background-color: #FAD8D8; /* Same color as the references to blend */
    padding: 2vh 2vw; /* Add some padding for readability */
    margin-left: 145px; /* Default margin on left */
    margin-right: 20px; /* Adjusted right margin to 20px */
    box-sizing: border-box; /* Include margin and padding in width calculation */
    word-wrap: break-word; /* Ensure long words are wrapped to the next line */
    overflow-wrap: break-word; /* Break long words if necessary */
    padding-right: 5px;
}

/* Ensure details take up full available width minus the margin */
details {
    width: calc(100% - 20px); /* Adjust to ensure margin-right of 20px */
    background-color: #FAD8D8;
    color: #25336b;
    cursor: pointer;
    font-family: 'Avenir', 'Century Gothic', sans-serif;
    font-size: 14px; /* Set default font size for details content */
    white-space: normal; /* Ensure text wraps normally */
}

summary {
    font-size: 18px; /* Set font size for summary */
    font-weight: bold;
}

body {
    background-color: #FAD8D8;
    color: #25336b;
    font-family: 'Avenir', 'Century Gothic', sans-serif;
    font-size: 18px;
    font-weight: normal;
    text-align: left;
}

/* Default styles for desktop */
.references {
    margin-left: 145px; /* Default margin for desktop */
    margin-right: 20px; /* Updated right margin */
}

/* Media query for tablets (768px to 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
    .references {
        margin-left: 50px; /* Reduced margin for tablets */
        margin-right: 20px; /* Keep right margin as 20px */
    }
}

/* Media query for mobile devices (less than 768px) */
@media (max-width: 767px) {
    .references {
        margin-left: 20px; /* Even smaller margin for mobile */
        margin-right: 20px; /* Keep right margin */
    }
}