.blackButton {
    background-color: #000;
    color: #FFF;
    border: 1px solid #333;
}

.light .blackButton {
    background-color: #000;
    color: #FFF !important;
    border: 1px solid #333;
}


.section {
    padding: 20px;
    background-color: #111;
    border-radius: 5px;
    border: 1px solid #3a3a3a;
    margin: 10px 0;
}

body.light .section {
    background-color: #EEE;
    border: 1px solid #999;
}

.truncate-text {
    overflow: hidden;         /* Hides any content that goes outside the box */
    white-space: nowrap;      /* Prevents the text from wrapping to a new line */
    text-overflow: ellipsis;  /* Displays "..." to indicate clipped text (use 'clip' to just cut off without dots) */
    width: 100%;              /* Or any defined width for the container */
}

.purpleOrangeGradient{

    /* 2. Apply a background gradient (linear, radial, or conic) */
    background: #996DFF;
    background-image: linear-gradient(125deg,rgba(153, 109, 255, 1) 23%, rgba(255, 135, 110, 1) 60%, rgba(255, 208, 115, 1) 100%);

    /* 3. Clip the background to the text area (use -webkit- for broader compatibility) */
    -webkit-background-clip: text;
    background-clip: text;

    /* 4. Make the actual text transparent so the background shows through */
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;

    /* Optional: Add a fallback color for older browsers */
    color: rgba(255, 208, 115, 1)
}

.ratioImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 425px;
}