@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
		
* {box-sizing:border-box;}
body {margin:0;font-family:'Roboto Slab',serif;font-size:14px;cursor:default;}
#pornole {display:block;float:left;width:calc(100% - 135px);margin-left:135px;}
#strona {max-width:700px;margin:auto;}
header {background-image:linear-gradient(#3d3d3d, #000000);color:#ebebeb;padding:10px;}
header img {height:34px;}
header .opis-strony {margin-top:7px;font-size:15px;}
#glowna {padding:10px;background:#333333;}
.oPorno {position:relative;}
.ulubiene {position:absolute;top:5px;right:5px;display:inline-block;width:22px;height:22px;background-repeat:no-repeat;background-size:20px 20px;background-position:1px 1px;cursor:pointer;z-index:5;}
.ulubiene:hover{background-size:22px 22px;background-position:0px 0px;}
.ulubiene:active{background-size:18px 18px;background-position:2px 2px;}
.opowiadanie {background:#ebebeb;border-radius:10px;color:#0b0b0b;z-index:1;display:block;text-decoration:none;border:3px outset #f5f5f5;padding:3px 6px;margin-bottom:10px;}
.opowiadanie:hover {background:#c4c4c4;border-color:#cecece;color:#000000;}
.opowiadanie:active {border-style:inset;padding:5px 4px 1px 8px;}
.opowiadanie h2 {margin:0 0 5px 0;font-size:17px;}
.opoTagi .tag {display:inline-flex;align-items:center;padding:1px 4px;background:#525252;margin:2px 3px;border-radius:5px;color:#ebebeb;text-decoration:none;}
.opoTagi .tag svg {height:13px;fill:currentColor;margin-right:3px;}
.opoInfo {margin-bottom:10px;color:#3e3e3e;}
#opOcena, .opoAutor, .opoDlugosc, .opoKomy, .opoWysw {display:inline-flex;align-items:center;}
#opOcena svg, .opoAutor svg, .opoDlugosc svg, .opoKomy svg, .opoWysw svg {height:14px;margin-right:4px;fill:currentColor;}
#opOcena, .opoAutor, .opoDlugosc {margin-right:20px;}
.oc-baza {margin-right:1px;}
.oc-pop {font-size:13px;padding-top:1px;}
.nazwaStrony {background-image: linear-gradient(#000000, #292929, #000000);color:#d6d6d6;padding:4px 10px;margin:0 -10px 14px -10px;position:sticky;top:0;z-index:2;font-size:18px;text-align:center;}
.nazwaStrony.cycek {margin-top:32px;z-index:3;}
.nazwaStrony .filtr {display:inline-flex;align-items:center;font-size:16px;background:gray;color:white;padding:2px 6px;border-radius:7px;margin-right:10px;}
.nazwaStrony .stronaz {font-size:16px;margin-left:20px;}
.nazwaStrony .stronaz .str {font-size:17px;font-weight:500;margin:0 2px;}
.nazwaStrony svg {height:17px;fill:currentColor;margin:0 3px -3px 0;}
.nazwaStrony .filtr svg {height:14px;margin-right:3px;}
.paginacja {padding:3px 10px;background-image:linear-gradient(#9e9e9e, #c5c5c5);border:2px inset #cfcfcf;text-align:center;font-size:14px;margin:0 10px 10px 10px;border-radius:8px;}
.paginacja select {background:#c5c5c5;cursor:pointer;border:2px inset #9e9e9e;border-radius:3px;font-weight:bold;}
.paginacja select:hover {background:#a8a8a8;border-color:#8a8a8a;}
.paginacja select option {font-weight:normal;}
.akapit {margin-bottom:20px;}
.akapit:first-letter {font-size:22px;margin-left:24px;}
footer {background-image:linear-gradient(#000000, #3d3d3d);color:#ebebeb;padding:3px;text-align:center;}
.wczytywanie {animation:dawaj 1s linear infinite;width:30px;height:30px;border:7px solid white; border-top:7px solid red;border-radius:50%;}
@keyframes dawaj {
	0% {transform: rotate(0deg);}
	100% {transform:rotate(360deg);}
}

nav {display:block;float:left;width:135px;height:100vh;background:black;position:fixed;top:0;border-right:2px solid white;z-index:5;}
nav .opcja {position:relative;color:white;text-decoration:none;}
nav > .opcja {display:flex;align-items:center;padding:4px 5px;cursor:pointer;background-image:linear-gradient(#333333, #000000);border-bottom:1px solid white;}
nav > .opcja:hover {background:#818181;}
nav > .opcja svg {fill:currentColor;height:13px;margin-right:3px;}
nav .opcja .opcja {display:flex;padding:1px 4px;font-size:13px;}
nav .opcja .opcja:not(:last-child) {border-bottom:1px solid black;}
nav .opcja .opcja:hover {background:#9e9e9e;}
nav .opcja .rozwijak {display:none;position:absolute;left:100%;top:0;background:#818181;width:100px;border:1px solid black;}
nav .opcja.rozwiniety .rozwijak {display:inline-block;}
nav .opcja.rozwiniety {background:#818181;}
nav .opcja .rozwijak.opowiadania {width:130px;}
nav .opcja .rozwijak.rankingi {width:145px;}
nav > .opcja.rozwin:after {content:'';display:inline-block;border-width:4px 7px;border-style:solid;border-color:transparent transparent transparent white;position:absolute;top:9px;right:-2px;}
nav > .opcja.rozwin.rozwiniety:after {border-color:transparent white transparent transparent;right:6px;}