:root {
    --background-color: #f0f0f0;
    --text-color: #333;
    --link-color: blue;
    --link-hover-color: #c2edc4a3;
    --main-background-color: rgba(255, 255, 255, 0.8);
    --header-background-color: rgba(255, 255, 255, 0.345);
    --group-header-border-color: #ddd;
    /* --group-header-hover-background: #94f07d60; */
    --group-header-hover-background-color: #c5edc2a3;
    --raw-url-color: #3e7e39;
    --new-tab-icon-color: green;
    --cilia-color: #90dd6a;
    --microbe-color: #41da4158;
    --entry-background-color: #c5edc2a3;
    /* --entry-background-color: #94f07d60; */
    --entry-border-color: 'purple';
    --copy-button-color: #115411;
    --colormicrobe: #90dd6a69;
}

body {
    /* font-family: sans-serif; */
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    /* Prevent horizontal scrollbar */
    /* overflow-x: hidden; */
}

header,
footer {
    text-align: center;
    padding: 2rem 0;
    margin: 0px 15% 0px 15%;
    /* background-color: rgba(255, 255, 255, 0.345); */
    background-color: var(--header-background-color);
    margin-bottom: 2rem;
}

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--main-background-color);
    /* Adjust transparency as needed */
    border-radius: 8px;
    z-index: 100;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    margin-bottom: 1.5rem;
}


.entry-div {
    text-decoration: none;
    color: inherit;
    display: block;
    border: 1px solid var(--entry-border-color);
    padding: 1rem;
    border-radius: 4px;
    transition: background-color 5.3s;
}

a:hover {
    background-color: var(--link-hover-color);
}

.entry-div {
    background-color: var(--entry-background-color);
}

.group {
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 0.5rem;
}

.link-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.name {
    font-weight: bold;
}

.modified {
    font-size: 0.8rem;
    color: #777;
}

.description {
    font-size: 0.9rem;
    line-height: 1.4;

    ul {
        list-style: circle;
        margin: 2px 2px 2px 20px;
        padding: 0px;

        /* text-indent: 20px; */
        li {
            margin: 2px;
        }
    }
}

/* ... other styles ... */

.raw-url {
    display: block;
    font-size: 0.8rem;
    /* color: #555; */
    /* color: 'pink'; */
    margin-top: 0.5rem;
    white-space: nowrap;
    /* Prevent wrapping */
    overflow: hidden;
    /* Hide any overflow */
    text-overflow: ellipsis;
    /* Add ellipsis (...) if text overflows */
    max-width: 100%;
    /* Optional: Control max-width of the raw URL */
}

.arrow-icon {
    display: inline-block;
    margin-left: 0.5rem;
}

#background-svg-container {
    position: fixed;
    top: 0;
    left: 0;
    /* z-index: 0; */
    z-index: -1;
    /* Place SVG behind other content */
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0px;
    /* background-color: pink; */
}

/* ... other styles ... */

.new-tab-icon {
    display: inline-block;
    margin-left: 0.5rem;
}

.new-tab-icon svg {
    /* fill: currentColor; */
    fill: green;
    /* Inherit color from parent */
}

.copy-button {
    font-size: x-large;
    color: var(--copy-button-color);
}

.copy-button-and-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.group-header {
    cursor: pointer;
    position: relative;
    /* For positioning the indicator */
    padding: 1rem;
    /* adjust for the drop-down arrow */
    padding-right: 10%;
    border: 1px solid var(--group-header-border-color);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    /* Add spacing between groups */
    transition: background-color 0.3s;
    /* Smooth background transition */
}

.group-header:hover {
    background-color: #94f07d60;
    cursor: pointer;
}

/* Add a visual indicator (arrow) */
.group-header::after {
    cursor: pointer;
    content: "\25BC";
    /* Downward arrow character */
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
    /* Smooth arrow rotation */
}

/* Rotate arrow when group is open */
.group-header+.link-list:not([style*="display: none"])::before {
    content: "";
    display: block;
    /* This is a trick to target the previous sibling */
    /* position: absolute; */
    /* Remove this line */
    /* top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px; */
    /* Remove these lines */
}

.group-header+.link-list:not([style*="display: none"])+.group-header::after {
    transform: translateY(-50%) rotate(180deg);
    /* Rotate arrow upwards */
}

/* Optional: Add background color to open group */
.group-toggle:checked+.group-header {
    background-color: #e9ecef;
}

/* Animation for opening/closing */
.link-list {
    display: none;
    padding: 5px;
    transition: background-color 5.3s;
    font-weight: 400;

    a {
        color: blue;
    }
}
