* { -webkit-tap-highlight-color:transparent; }
:root { --pasek-grubosc:4px; } /* grubość pasków i ustawienia przycisku */
html { margin:0; padding:0; width:100%; overflow-y:scroll; /* zapobiega pojawianiu się paska przewijania podczas animacji; rezerwuje miejsce na pasek */ }
body { font-family:tinosregular; font-style:italic; margin:0; padding:0; width:100%; line-height:1.6; background-color:rgb(250, 250, 250); color:rgb(90, 90, 90); }
header { padding-top:20px; padding-bottom:30px; }
h1 { color:rgb(90, 90, 90); font-size:24px; font-style:normal; letter-spacing:5px; margin-bottom:30px; }
a { font-weight:normal; text-decoration:none; letter-spacing:1px; outline:none; }
a:link, a:active, a:visited { color:rgb(18 168 73); }
a:hover { color:rgb(90, 90, 90); }
a.odnosnik_logo { display:contents; }
ul { margin-top:0px; margin-bottom:0px; padding-left:1.2em; }
ol { margin-top:0px; margin-bottom:0px; padding-left:1.2em; }
dl dt { padding-left:inherit; }
dl dd { margin-left:20px; font-size:0.85em; }
sup { line-height:0; font-size:0.6em; }
div:focus { outline: none !important; }
button { outline:none; border:none; background:none; padding:0; }
button:focus, button:active { outline:none; }
button svg { pointer-events:none; display:block; }

.logo { max-width:200px; height:auto; }
.strona { max-width: 800px; margin: 0 auto; padding: 20px; }
.sekcja { position:relative; padding-left:calc(var(--pasek-grubosc) + 20px); margin-bottom:60px; }
.pasek { position:absolute; left:0; top:0; width:var(--pasek-grubosc); height:100%; }
.pasek.pomaranczowy { background-color:rgb(255, 165, 0); }
.tytul { margin:60px auto 20px; font-size:28px; transform:scaleY(0.9); transform-origin:top; letter-spacing:3px; font-style:normal; color:rgb(120, 120, 120); }
.opracowanie { font-size:13px; color: rgb(190, 190, 190); }
.podtytul { margin-top:60px; font-size:24px; transform: scaleY(0.9); transform-origin:top; letter-spacing:8px; font-style:normal; color:rgb(120, 120, 120); }
.ciekawostka { position:relative; color:rgb(150, 150, 150); border:1px solid rgb(44, 206, 113); border-radius:10px; padding:30px 10px 20px 10px; margin-top:60px; margin-bottom:0; }
.ciekawostka::before { content:attr(data-title); position:absolute; top:0; left:30px; transform:translateY(-50%); font-size:28px; padding:0 10px; background:rgb(250, 250, 250); font-style:italic; white-space:nowrap; }

.odtwarzacz { margin-left:-10px; display:flex; align-items:center; gap:0; user-select:none; }
.odtwarzacz_przycisk { background:none; border:none; cursor:pointer; padding:2px; display:flex; align-items:center; justify-content:center; width:36px; height:28px; transition:opacity 0.2s; }
.odtwarzacz_przycisk:hover { opacity:0.6; }
.odtwarzacz_przycisk svg { fill:rgb(200, 200, 200); width:24px; height:24px; }
.odtwarzacz_opis { margin-left:8px; font-size:11px; font-style:italic; }

.warianty { padding-left:10px; margin-top:3px; margin-bottom:60px; font-size:12px; }
.nr_testu { font-size:12px; color:rgb(200, 200, 200); }
.pakiet_pro { display:inline-block; vertical-align:2px; font-size:16px; font-weight:bold; color:rgb(255, 255, 255); text-shadow: 1px 1px rgb(160, 160, 160); background:rgba(255, 165, 0, 0.9); border-radius:6px; padding:1px 3px; }
.zestawienie { border-spacing:0; border-collapse:separate; border:1px solid rgb(18, 168, 73, 0.2); border-radius:12px; font-size:14px; margin:20px 0; overflow:hidden; }
.zestawienie th { background:rgba(18, 168, 73, 0.25); padding:12px; font-weight:600; text-align:left; }
.zestawienie td { padding:10px 12px; border-bottom:1px solid #f0f0f0; }
.zestawienie tr:last-child td { border-bottom:none; }
.zestawienie tr:nth-child(even) { background:rgba(18, 168, 73, 0.04); }
.zestawienie .center { text-align:center; }