.button {
    background-color: #426666; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    font-size: 16px;
    transition-duration: 0.4s;
    margin-right: 10px;
    /* margin: 10px; */
}

.button:hover {
    background-color: #5f6760;
    color: white;
}


.button-container {
    display: flex; /* Flex display */
    justify-content: space-around; /* Space around the cards */
    align-items: stretch; /* Stretch the cards to be the same height */
    flex-wrap: wrap; /* Wrap cards if necessary */
    gap: 10px; /* Gap between cards */
}


.button_blue {
    background-color: #7FAACA; /* New color for button1 */
}


.card-button {
    /* background-color: #1e1e1e;  */
    border: 1px solid #626262; /* Border color */
    color: black;
    padding: 20px; /* Padding for the card */
    text-align: left; /* Left-align text */
    text-decoration: none; /* Remove underline */
    display: flex; /* Flex display */
    flex-direction: column; /* Column direction */
    justify-content: flex-start;
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Font size */
    transition-duration: 0.4s; /* Transition for hover effects */
    margin: 10px; /* Add space between cards */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Shadow effect */
    flex: 1; /* Allow flex-grow to adjust size */
}

.card-button:hover {
    background-color: #333; /* Darker background on hover */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Larger shadow on hover */
    color: white; /* Ensure text stays white */
}

.card-button h3 {
    margin: 0; /* Remove default margin */
    font-size: 24px; /* Title font size */
    font-weight: bold; /* Bold title */
}

.card-button p {
    margin: 10px 0 0 0; /* Margin for the paragraph */
    font-size: 16px; /* Paragraph font size */
}


/* Quartodoc */

section#parameters {
    /* scroll when child contents overflow the width */
    overflow-x: auto;
    font-size: 0.75em;
}

section[id^="parameters-"] {
    /* scroll when child contents overflow the width */
    overflow-x: auto;
    font-size: 0.75em;
}