#styles.css
 *, *::before, *::after {
 box-sizing: border-box;
}

body {
 background: #cfdcf3;
 
}
a.black-link:link
{
   color: #000000;
   text-decoration: none;
}
a.black-link:visited
{
   color: #000000;
   text-decoration: none;
}
a.black-link:hover
{
   color: #000000;
   text-decoration: none;
}
a.black-link:active
{
   color: #000000;
   text-decoration: none;
}

.hr { 
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 2px;
} 
.card-group {
 display: grid;
 grid-template-columns: repeat(1, 1fr);
 gap: .5rem;
 align-items: center;
}
 
 .card {
 background: white;fontfon
 padding: .5rem;
 border: 1px solid black;
 border-radius: .25em;
 font-size: 20px;
 }

.font-big {
  font-size: 70px;
  font-style: italic;
  font-weight: 800;
  font-family:r;
  color: #C0C0C0;
  text-decoration:none
}
 
h2, p {
  margin: 0,5;
 }

h2 {
  margin-bottom: 1rem; 
 }
    .cutoff-text {
    --max-lines: 1;
    --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::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-color: #ccc;
                      }

    .expand-btn::before {
    content: "Rozwiń";
                        }

    .expand-btn:checked::before {
    content: "Zwiń";
                                }
.cutoff-text:has(+ .expand-btn:checked) {
    max-height: none;
                                        }