@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600&display=swap');

.cutoff-text {
    --max-lines: 3;
    --line-height: 1.4;

    max-height: calc(var(--max-lines) * 1em * var(--line-height));
    line-height: var(--line-height);
    overflow: hidden;
    position: relative;
}

.cutoff-text:has(+ .expand-btn:not(:checked))::before {
    content: '';
    position: absolute;
    height: calc(1em * var(--line-height));
    width: 100%;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, white);
}

.expand-btn {
    appearance: none;
    border: 1px solid black;
    padding: .5em;
    border-radius: .25em;
    cursor: pointer;
    margin-top: 1rem;
}

.expand-btn:hover {
    background: #CCC;
}

.expand-btn::before {
    content: "Expand";
}

.expand-btn:checked::before {
    content: "Collapse";
}

.cutoff-text:has(+ .expand-btn:checked) {
    max-height: none;
}

.main-title {
    font-family: 'Dancing Script', cursive;
}