@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

body {margin:25px 10px 0; font-size:30px; line-height:1.2em; font-family:'EB Garamond'; font-weight:800;}


a {text-decoration:none}

body.niebieski-fioletowy,
body.niebieski-fioletowy .page-overlay {background:#a5d2eb; color:#7d46ff}
body.szary-brazowy,
body.szary-brazowy .page-overlay {background:#cdcdcd; color:#4b0000}
body.roz-czarny,
body.roz-czarny .page-overlay {background:#e1c8e1; color:#050505}
body.czarny-roz,
body.czarny-roz .page-overlay {background:#2d4650; color:#ff7dff}
body.roz-zielony,
body.roz-zielony .page-overlay {background:#fac8c3; color:#007d7d}
body.zolty-fiolet,
body.zolty-fiolet .page-overlay {background:#ffebb4; color:#785CB4}
body.zielony-zolty,
body.zielony-zolty .page-overlay {background:#9baa91; color:#fff3b0}
body.fioletowy-niebieski,
body.fioletowy-niebieski .page-overlay {background:#7d46ff; color:#a5d2eb}
body.brazowy-szary,
body.brazowy-szary .page-overlay {background:#4b0000; color:#cdcdcd}
body.zielony-roz,
body.zielony-roz .page-overlay {background:#007d7d; color:#fac8c3}
body.fiolet-zolty,
body.fiolet-zolty .page-overlay {background:#785CB4; color:#ffebb4}
body.zolty-zielony,
body.zolty-zielony .page-overlay {background:#ff0; color:#007d7d}
body.zielony-czerwony,
body.zielony-czerwony .page-overlay {background:#c3ebbe; color:#f03816}
body.czerwony-zielony,
body.czerwony-zielony .page-overlay {background:#f03816; color:#c3ebbe}
body.zolty-brazowy,
body.zolty-brazowy .page-overlay {background:#ffebb4; color:#4b0000}


.niebieski-fioletowy a {text-decoration:none; color:#7d46ff}
.szary-brazowy a {text-decoration:none; color:#4b0000}
.roz-czarny a {text-decoration:none; color:#050505}
.czarny-roz a {text-decoration:none; color:#ff7dff}
.roz-zielony a {text-decoration:none; color:#007d7d}
.zolty-fiolet a {text-decoration:none; color:#785CB4}
.zielony-zolty a {text-decoration:none; color:#fff3b0}
.fioletowy-niebieski a {text-decoration:none; color:#a5d2eb;}
.brazowy-szary a {text-decoration:none; color:#cdcdcd;}
.zielony-roz a {text-decoration:none; color:#fac8c3;}
.fiolet-zolty a {text-decoration:none; color:#ffebb4;}
.zolty-zielony a {text-decoration:none; color:#007d7d;}
.zielony-czerwony a {text-decoration:none; color:#f03816;}
.czerwony-zielony a {text-decoration:none; color:#c3ebbe;}
.zolty-brazowy a {text-decoration:none; color:#4b0000;}


.niebieski-fioletowy #otworz-popup a,
.niebieski-fioletowy .active a {text-decoration:none; background:#7d46ff; color:#a5d2eb;}
.szary-brazowy #otworz-popup a,
.szary-brazowy .active a {text-decoration:none; background:#4b0000; color:#cdcdcd;}
.roz-czarny #otworz-popup a,
.roz-czarny .active a {text-decoration:none; background:#050505; color:#e1c8e1;}
.czarny-roz #otworz-popup a,
.czarny-roz .active a {text-decoration:none; background:#ff7dff; color:#2d4650;}
.roz-zielony #otworz-popup a,
.roz-zielony .active a {text-decoration:none; background:#007d7d; color:#fac8c3;}
.zolty-fiolet #otworz-popup a,
.zolty-fiolet .active a {text-decoration:none; background:#785CB4; color:#ffebb4;}
.zielony-zolty #otworz-popup a,
.zielony-zolty .active a {text-decoration:none; background:#fff3b0; color:#9baa91;}
.fioletowy-niebieski #otworz-popup a,
.fioletowy-niebieski .active a {text-decoration:none; background:#a5d2eb; color:#7d46ff;}
.brazowy-szary #otworz-popup a,
.brazowy-szary .active a {text-decoration:none; background:#cdcdcd; color:#4b0000;}
.zielony-roz #otworz-popup a,
.zielony-roz .active a {text-decoration:none; background:#fac8c3; color:#007d7d;}
.fiolet-zolty #otworz-popup a,
.fiolet-zolty .active a {text-decoration:none; background:#ffebb4; color:#785CB4;}
.zolty-zielony #otworz-popup a,
.zolty-zielony .active a {text-decoration:none; background:#007d7d; color:#ff0;}
.zielony-czerwony #otworz-popup a,
.zielony-czerwony .active a {text-decoration:none; background:#f03816; color:#c3ebbe;}
.czerwony-zielony #otworz-popup a,
.czerwony-zielony .active a {text-decoration:none; background:#c3ebbe; color:#f03816;}
.zolty-brazowy #otworz-popup a,
.zolty-brazowy .active a {text-decoration:none; background:#4b0000; color:#ffebb4;}


body.niebieski-fioletowy #random-background {color:#7d46ff; opacity:0.1}
body.szary-brazowy #random-background {color:#4b0000; opacity:0.1}
body.roz-czarny #random-background {color:#050505; opacity:0.1}
body.czarny-roz #random-background {color:#ff7dff; opacity:0.1}
body.roz-zielony #random-background {color:#007d7d; opacity:0.1}
body.zolty-fiolet #random-background {color:#785CB4; opacity:0.1}
body.zielony-zolty #random-background {color:#fff3b0; opacity:0.1}
body.fioletowy-niebieski #random-background {color:#a5d2eb; opacity:0.1}
body.brazowy-szary #random-background {color:#cdcdcd; opacity:0.1}
body.zielony-roz #random-background {color:#fac8c3; opacity:0.1}
body.fiolet-zolty #random-background {color:#ffebb4; opacity:0.1}
body.zolty-zielony #random-background {color:#007d7d; opacity:0.1}
body.zielony-czerwony #random-background {color:#f03816; opacity:0.1}
body.czerwony-zielony #random-background {color:#fff; opacity:0.2}
body.zolty-brazowy #random-background {color:#4b0000; opacity:0.1}

a:hover {text-decoration:underline}
.active a { animation: blink-opacity 2.5s ease-out forwards;}

@keyframes blink-opacity {
    0%, 20%, 40% { opacity: 0.2; }
    10%, 30%, 50% { opacity: 1; }
    100% { opacity: 1; }
}

#player-wrap  {position:fixed; right:10px; top:30px; z-index:10; transition: all 0.3s ease;}

#radio-control,
#player-wrap {display:inline; }

#radio-control { cursor: pointer; filter: url(#n1);}

#radio-control:hover,
#radio-control.playing:hover  {color:blue}



.page-overlay {position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999;}

#background-container {position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; pointer-events:none;}

.moving-img {position:absolute; opacity:0.5; transition:opacity 0.5s;}

.container {max-width:270px; line-height:1.1em; margin-bottom:30px;}

.top {margin:25px 0; }
.index {filter: url(#n1);}

.back a {filter: url(#n1); background:black; color:white; padding:2px 5px;}


#random-background {position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; font-size:20px; line-height:20px; word-break:break-all; pointer-events:none; opacity:0.1; /* POPRAWKA DLA SAFARI: */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); /* Włącza akcelerację GPU */
    will-change: transform;          /* Informuje Safari, że element jest niezależną warstwą */
    overflow: hidden;}

/*-----MODAL-----*/
body#custom-modal-overlay {filter:none;}

#custom-modal-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; font-size:21px; line-height:1.25em; opacity:0.93; z-index:9999;  overflow-y:auto; padding:40px 15px; box-sizing:border-box; overflow-y:scroll !important; -webkit-overflow-scrolling:touch; filter:none !important;  -webkit-filter:none !important; transform:translateZ(0);}

/* Przycisk zamknięcia */
#close-modal {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 40px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    z-index: 10000;
    background:#000;
    padding:1px 7px 7px 5px;
}

/* Kontener na treść wewnątrz modala */
.modal-inner-content {
    display:block;
    max-width: 640px;
   
    margin: 0 auto;
    color: #000;
    font-size:22px;
    line-height:1.2em;
}



#otworz-popup {cursor:pointer; filter: url(#n1); margin:0 0 30px; padding:5px}
#otworz-popup a {padding:5px 5px 55px}
   
#otworz-popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}

#otworz-popup::after {content:""; position:absolute; left:0; top:50%; width:100%; height:5px; background-color:red; opacity:0.93; transform:scaleX(0) rotate(0deg); transform-origin:left; transition:transform 0.4s ease-in-out;}

#otworz-popup:hover::after {transform:scaleX(1) rotate(-2deg);}

.field {font-weight:400}

h3 {max-width:240px}

@media screen and (max-width:758px) {

.modal-inner-content {font-size:24px; font-weight:500}

}