@import url('//fonts.googleapis.com/css2?family=Exo+2:wght@200;500;800&display=swap'); ::-webkit-scrollbar{width:0;height:0;}

*{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:none;} html{scroll-behavior:smooth;} body{margin:0;padding:0;font-family:'Exo 2';font-weight:200;user-select:none;background:bisque;color:#000;} p, span, b, strong, a, small, sup, input, button{position:relative;color:inherit;font-family:inherit;font-size:17px;font-weight:200;} .dark body{background:#0d2c45;color:#fff;} h1,h2{position:relative;margin:0;padding:0;color:inherit;font-family:inherit;font-weight:800;font-size:25px;} h2{font-size:20px;margin-bottom:15px;} b, strong{font-weight:500;} a, a:hover{text-decoration:none;border-bottom:none;} button:hover{cursor:pointer;} input{background:#fff;color:#000;} input:focus{box-shadow:inset 0 -3px red;}

.modal{position:fixed;background:#555;border-radius:15px;top:15px;bottom:15px;right:15px;width:calc(100% - 30px);max-width:450px;box-shadow:0 0 15px rgba(0,0,0,.1);transform:translate3d(110%, 0, 0);transition:all .5s;z-index:10;} .light .modal{background:#fff;} .modal.act{transform:none;} .modal.act ~ #content, .modal.act ~ #header{opacity:.25;pointer-events:none;} .modal .select{display:flex;flex-wrap:wrap;gap:7.5px;margin:15px 0;} .modal .scroll{position:absolute;top:0;bottom:0;left:25px;right:25px;padding:25px 0;overflow:auto;mask-image:linear-gradient(0,transparent 0%, black 1rem, black calc(100% - 1rem),transparent 100%);} .modal .select a{display:inline-flex;flex:1 0 0;min-width:70px;justify-content:center;border-radius:10px;background:rgba(0,0,0,.15);padding:10px 15px;transition:all .5s;} .modal .select a.act, .modal .select a:hover, .tvs .modal .select a:focus{background:red;color:#fff;} .modal p{margin:0;} .modal#pro p{display:flex;padding:15px;background:rgba(0,0,0,.35);border-radius:10px;align-items:center;} .modal#pro p:before{display:inline-flex;content:attr(data-text);background:red;color:#fff;font-size:20px;font-weight:bold;align-items:center;justify-content:center;border-radius:50%;width:40px;height:40px;flex:auto 0 0;margin-right:15px;} .modal#pro .btn{position:absolute;bottom:20px;background:#444;width:calc(100% - 30px);text-align:center;padding:15px;border-radius:10px;color:#fff;} .tvs .modal#pro .btn:focus{background:red;} .modal#pro .btn b{display:block;font-weight:700;}

#loader{position:fixed;top:0;bottom:0;left:0;right:0;background:bisque;z-index:5;transition:opacity .5s;} .dark #loader{background:#0d2c45;color:#fff;} #loader:before{position:absolute;content:"";background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="margin:auto;background:none;display:block;shape-rendering:auto;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" fill="none" stroke="red" stroke-width="7" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"/></circle></svg>') no-repeat center / cover;top:calc(50% - 35px);left:calc(50% - 35px);width:70px;height:70px;} #loader.hide{opacity:0;pointer-events:none;} @keyframes spin{ 0%{transform:rotate(0deg);} 50% {transform:rotate(180deg);} 100% {transform:rotate(360deg);} }

#backtop{position:fixed;bottom:15px;right:15px;border-radius:50%;width:55px;height:55px;background:rgba(16,16,16,.35) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><g><path d="M373.33 106.67H138.67a10.67 10.67 0 1 0 0 21.33h234.66a10.67 10.67 0 1 0 0-21.33zM264.68 185.81a10.67 10.67 0 0 0-8.67-4.48 10.64 10.64 0 0 0-8.43 4.15l-58.7 58.71A10.66 10.66 0 1 0 204 259.27l41.36-41.36-.18 134.09a10.67 10.67 0 0 0 10.66 10.68A10.68 10.68 0 0 0 266.52 352l.12-134.07 41.18 41.18A10.67 10.67 0 0 0 322.91 244z" fill="white" data-original="%23000000" class=""></path></g></g></svg>') center / cover;backdrop-filter:blur(5px);visibility:hidden;opacity:0;transition:all .5s;z-index:2;cursor:pointer;} #backtop.show{visibility:visible;opacity:1;}

#header{position:sticky;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:15px;transition:all .5s;height:50px;background:linear-gradient(0, transparent, bisque);backdrop-filter:blur(.5px);z-index:1;} .dark #header{background:linear-gradient(0, transparent, #0d2c45);} #header h1{background:url(logo.svg) no-repeat left center / 27.5px;padding-left:35px;} #header .menu{display:flex;justify-content:space-between;background:rgba(0,0,0,.35);border-radius:15px;backdrop-filter:blur(5px);} #header .menu a{position:relative;width:35px;height:35px;margin:5px;border-radius:10px;} #header .menu a[href="/premium"]{background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="m45.002 13.97-5.971-7.969A5.027 5.027 0 0 0 35.03 4H12.97a5.025 5.025 0 0 0-4.001 2.001l-5.971 7.968a5 5 0 0 0 .085 6.106l17.784 22.41c.764.962 1.905 1.514 3.133 1.514s2.369-.552 3.133-1.514l17.784-22.41a5 5 0 0 0 .085-6.106zm-1.6 1.199c.193.257.335.539.434.831h-9.353l2.896-8.853c.016.02.036.034.051.054l5.971 7.968zM24 41.61 16.275 18h15.451l-7.725 23.61zM16.908 16 24 6.65 31.092 16H16.909zm18.721-9.929-2.882 8.807L26.018 6h9.012c.203 0 .403.03.599.071zM21.991 6l-6.738 8.88-2.882-8.809c.196-.041.396-.071.599-.071zM10.569 7.201c.015-.02.036-.034.052-.054L13.517 16H4.164c.1-.292.242-.574.434-.831zM4.65 18.833A2.99 2.99 0 0 1 4.186 18h9.985l7.142 21.832zm38.7 0L26.686 39.832 33.828 18h9.985a2.99 2.99 0 0 1-.464.833z" fill="white" data-original="%23000000" class=""></path></g></svg>') no-repeat center / 70%;} #header .menu a[href="/books"]{background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><g fill="%23000" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.1 16.8a1.5 1.5 0 0 1 1.8 0l3.2 2.4c.989.742 2.4.036 2.4-1.2V5A1.5 1.5 0 0 0 17 3.5H7A1.5 1.5 0 0 0 5.5 5v13c0 1.236 1.411 1.942 2.4 1.2zM12 18l3.2 2.4c1.978 1.483 4.8.072 4.8-2.4V5a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v13c0 2.472 2.822 3.883 4.8 2.4z" fill="white" data-original="%23000000"></path><path d="M8.25 7A.75.75 0 0 1 9 6.25h6a.75.75 0 0 1 0 1.5H9A.75.75 0 0 1 8.25 7" fill="white" data-original="%23000000"></path></g></g></svg>') no-repeat center / 70%;} #header .menu a[href="/downs"]{background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 32 32" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M26.985 6.6h-10.45l-2.5-3.755A1 1 0 0 0 13.2 2.4H5.015A4.02 4.02 0 0 0 1 6.415v19.17A4.02 4.02 0 0 0 5.015 29.6h21.97A4.02 4.02 0 0 0 31 25.585v-14.97A4.02 4.02 0 0 0 26.985 6.6M29 25.585a2.017 2.017 0 0 1-2.015 2.015H5.015A2.017 2.017 0 0 1 3 25.585V6.415A2.017 2.017 0 0 1 5.015 4.4h7.65l2.5 3.755A1 1 0 0 0 16 8.6h10.985A2.017 2.017 0 0 1 29 10.615z" fill="white" data-original="%23000000"></path><path d="M19.493 18.093 17 20.586V13.2a1 1 0 0 0-2 0v7.386l-2.493-2.493a1 1 0 0 0-1.414 1.414l4.2 4.2a1 1 0 0 0 .325.216.99.99 0 0 0 .764 0 1 1 0 0 0 .325-.216l4.2-4.2a1 1 0 0 0-1.414-1.414" fill="white" data-original="%23000000"></path></g></svg>') no-repeat center / 65%;} #header .menu a[href="/settings"]{background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="white" stroke-width="1.5"><path d="M15.5 12a3.5 3.5 0 1 1-7 0a3.5 3.5 0 0 1 7 0Z"/><path d="M20.79 9.152C21.598 10.542 22 11.237 22 12s-.403 1.458-1.21 2.848l-1.923 3.316c-.803 1.384-1.205 2.076-1.865 2.456s-1.462.38-3.065.38h-3.874c-1.603 0-2.405 0-3.065-.38s-1.062-1.072-1.865-2.456L3.21 14.848C2.403 13.458 2 12.763 2 12s.403-1.458 1.21-2.848l1.923-3.316C5.936 4.452 6.338 3.76 6.998 3.38S8.46 3 10.063 3h3.874c1.603 0 2.405 0 3.065.38s1.062 1.072 1.865 2.456z"/></g></svg>') no-repeat center / 65%;} .tvs #header .menu a:focus, #header .menu a:hover{background-color:rgba(255,255,255,.25);}

#content{position:fixed;left:0;right:0;top:0;bottom:0;mask-image:linear-gradient(0, transparent, black 2.5rem);padding-top:75px;transition:all .5s;overflow:auto;} #content form{position:relative;display:flex;margin:25px 15px;gap:7.5px;} #content form input, #content form button, #content form .voicebtn{display:inline-flex;padding:0 10px;height:40px;line-height:40px;border:0;border-radius:10px;} #content form input{flex:1 0 0;} #content form input::placeholder{color:#111;} #content form button{width:40px;background:red url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m17 17l4 4m-2-10a8 8 0 1 0-16 0a8 8 0 0 0 16 0"/></svg>') no-repeat center / 60%;} .tvs #content form button:focus{background:#fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m17 17l4 4m-2-10a8 8 0 1 0-16 0a8 8 0 0 0 16 0"/></svg>') no-repeat center / 60%;}{} #content form .voicebtn{width:20px;background:#555 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.35 6.35'><path fill='white' d='M3.181.264a1.33 1.33 0 0 0-1.327 1.327v1.058c0 .73.598 1.327 1.327 1.327.73 0 1.324-.598 1.324-1.327V1.591c0-.73-.594-1.327-1.324-1.327zm0 .53c.445 0 .794.352.794.797v1.058a.788.788 0 0 1-.794.797.79.79 0 0 1-.797-.797V1.591a.79.79 0 0 1 .797-.797zM1.056 2.381a.265.265 0 0 0-.262.268 2.387 2.387 0 1 0 4.772 0 .265.265 0 1 0-.53 0A1.846 1.846 0 0 1 3.18 4.506a1.848 1.848 0 0 1-1.857-1.857.265.265 0 0 0-.268-.268zm1.568 3.185a.265.265 0 0 0 .027.53h1.06a.265.265 0 1 0 0-.53h-1.06a.265.265 0 0 0-.027 0z'/></svg>") no-repeat center / 50%;} .tvs #content form .voicebtn:focus{background:#fff url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.35 6.35'><path fill='red' d='M3.181.264a1.33 1.33 0 0 0-1.327 1.327v1.058c0 .73.598 1.327 1.327 1.327.73 0 1.324-.598 1.324-1.327V1.591c0-.73-.594-1.327-1.324-1.327zm0 .53c.445 0 .794.352.794.797v1.058a.788.788 0 0 1-.794.797.79.79 0 0 1-.797-.797V1.591a.79.79 0 0 1 .797-.797zM1.056 2.381a.265.265 0 0 0-.262.268 2.387 2.387 0 1 0 4.772 0 .265.265 0 1 0-.53 0A1.846 1.846 0 0 1 3.18 4.506a1.848 1.848 0 0 1-1.857-1.857.265.265 0 0 0-.268-.268zm1.568 3.185a.265.265 0 0 0 .027.53h1.06a.265.265 0 1 0 0-.53h-1.06a.265.265 0 0 0-.027 0z'/></svg>") no-repeat center / 50%;} #content form .voicebtn.act{background-color:red;}

#content .filter{display:flex;justify-content:space-between;gap:10px;margin:15px;} #content .filter .tracks{display:inline-flex;gap:7.5px;padding:0 15px;overflow:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;will-change:scroll-position;mask-image:linear-gradient(90deg, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);scroll-padding:15px;margin:0 -5px 0 -15px;} #content .filter .tracks a{scroll-snap-align:start;scroll-snap-stop:always;padding:7.5px 20px;background:rgba(0,0,0,.15);border-radius:10px;} #content .filter .tracks a.act{background:red;color:#fff;} .tvs #content .filter .tracks a:focus{background:#fff;color:#222;} #content .filter .sort{position:relative;background:#777 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64 88a4 4 0 0 1-2.8-1.2l-40-40a4 4 0 0 1 5.6-5.6L64 78.3l37.2-37.1a4 4 0 0 1 5.6 5.6l-40 40A4 4 0 0 1 64 88z" fill="%23fdfdfd"/></svg>') no-repeat right 5px top 12.5px / 15px;white-space:nowrap;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 25px 0 10px;color:#fff;} #content .filter:has(+ .wrap:empty){display:none!important;} .tvs #content .filter .sort:focus{background:#fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M64 88a4 4 0 0 1-2.8-1.2l-40-40a4 4 0 0 1 5.6-5.6L64 78.3l37.2-37.1a4 4 0 0 1 5.6 5.6l-40 40A4 4 0 0 1 64 88z" fill="%23000"/></svg>') no-repeat right 5px top 12.5px / 15px;color:#000;}

#content .wrap{display:flex;flex-wrap:wrap;margin:25px 10px 50px;} #content .wrap a{display:flex;flex-wrap:wrap;position:relative;background:rgba(0,0,0,.15);padding:15px;align-items:center;border-radius:10px;width:calc(33.3333% - 40px);margin:5px;} .tvs #content .wrap a:focus{box-shadow:inset 0 -3.5px red;} #content .wrap a .name{width:calc(100% - 200px);margin-right:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #content .wrap a .name i{font-style:normal;will-change:transform;} #content .wrap a:focus .name i{display:inline-block;transition:transform 5s linear;} #content .wrap a .tor{display:block;font-size:12px;} #content .wrap a .size, #content .wrap a .stat small{display:inline-block;width:45px;padding:5px 0;border-radius:5px;margin-left:5px;text-align:center;font-size:13.5px;} #content .wrap a .size{width:80px;background:#fff;color:#000;} #content .wrap a .stat small:first-child{background:green;color:#fff;} #content .wrap a .stat small:last-child{background:red;color:#fff;} @media (max-width: 1100px){ #content .wrap a{width:calc(50% - 40px);} } @media (max-width: 800px){ #content .wrap a{width:calc(100% - 40px);} }





#transmition{position:fixed;top:0;bottom:0;left:0;right:0;z-index:5;transition:opacity .5s;padding:45px 15px;overflow:auto;opacity:0;pointer-events:none;transition:opacity .5s;} #transmition.show{pointer-events:auto;opacity:1;} #transmition p{display:block;margin:0 5px 20px;text-align: justify;} #transmition .settings{position:absolute;cursor:pointer;box-shadow:0 5px 10px rgba(0, 0, 0, .1);padding:0 17.5px;height:30px;line-height:30px;top:52.5px;right:15px;background:red;border-radius:15px;color:#fff;display:none;}

#transmition .downloads{display: flex;flex-wrap: wrap;margin:50px -5px 0;} #transmition .downloads div{position:relative;flex: 1 0 0;margin: 5px;min-width: 300px;background:rgba(0,0,0,.15);border-radius: 10px;padding: 15px;overflow: hidden;} #transmition .downloads div:before{position: absolute;content:"";left:0;right:0;bottom:0;height:4px;background:#fff;} #transmition .downloads p{margin: 5px;background: rgba(0, 0, 0, .2);display: block;width: 100%;padding: 15px;border-radius: 10px;} #transmition .downloads div i{position: absolute;left:0;bottom:0;height:4px;background:green;} #transmition .downloads div .btns{display: flex;flex-wrap: wrap;} #transmition .downloads div .delete, #transmition .downloads div .start_stop{background: green;color: #fff;display: inline-block;margin: 10px 10px 0 0;border-radius: 5px;padding: 2.5px 15px;cursor:pointer;} #transmition .downloads div .delete[data-files="true"]{background:red;} #transmition .downloads div .start_stop{width:27px;height:27px;padding:0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M256 0C114.833 0 0 114.844 0 256s114.833 256 256 256 256-114.844 256-256S397.167 0 256 0zm101.771 264.969-149.333 96a10.62 10.62 0 0 1-5.771 1.698c-1.75 0-3.521-.438-5.104-1.302A10.653 10.653 0 0 1 192 352V160c0-3.906 2.125-7.49 5.563-9.365 3.375-1.854 7.604-1.74 10.875.396l149.333 96c3.042 1.958 4.896 5.344 4.896 8.969s-1.854 7.01-4.896 8.969z" fill="%23fff" opacity="1" data-original="%23000000" class=""></path></g></svg>') center / cover;} #transmition .downloads div .start_stop.stop{background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 409.6 409.6" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M204.8 0C91.648 0 0 91.648 0 204.8s91.648 204.8 204.8 204.8 204.8-91.648 204.8-204.8S317.952 0 204.8 0zm-22.528 256c0 12.8-10.24 22.528-22.528 22.528-12.8 0-22.528-10.24-22.528-22.528V153.6c-.512-12.288 9.728-22.528 22.016-22.528 12.8 0 23.04 10.24 23.04 22.528V256zm90.624 0c0 12.8-10.24 22.528-22.528 22.528-12.8 0-22.528-10.24-22.528-22.528V153.6c-.512-12.288 9.728-22.528 22.016-22.528 12.8 0 23.04 10.24 23.04 22.528V256z" fill="%23fff" opacity="1" data-original="%23000000" class=""></path></g></svg>') center / cover;}



#content .down{position: absolute;box-shadow:0 5px 10px rgba(0,0,0,.1);padding:0 17.5px;height:30px;line-height:30px;top:7.5px;right:65px;background:green;border-radius:15px;color:#fff;} #content .theme{position: absolute;box-shadow:0 5px 10px rgba(0,0,0,.1);top:7.5px;right:0px;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 312.812 312.812" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M305.2 178.159c-3.2-.8-6.4 0-9.2 2-10.4 8.8-22.4 16-35.6 20.8-12.4 4.8-26 7.2-40.4 7.2-32.4 0-62-13.2-83.2-34.4-21.2-21.2-34.4-50.8-34.4-83.2 0-13.6 2.4-26.8 6.4-38.8 4.4-12.8 10.8-24.4 19.2-34.4 3.6-4.4 2.8-10.8-1.6-14.4-2.8-2-6-2.8-9.2-2-34 9.2-63.6 29.6-84.8 56.8-20.4 26.8-32.4 60-32.4 96 0 43.6 17.6 83.2 46.4 112s68 46.4 112 46.4c36.8 0 70.8-12.8 98-34 27.6-21.6 47.6-52.4 56-87.6 1.6-5.6-1.6-11.2-7.2-12.4z" fill="%23ffffff" opacity="1" data-original="%23000000" class=""></path></g></svg>') no-repeat left 7px center / 15px, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M100.307 168.213a180.083 180.083 0 0 1 67.905-67.905L90.7 71.547A14.9 14.9 0 0 0 71.547 90.7zM77.22 256c0-16.617 2.287-32.71 6.549-47.986L8.687 242.457a14.9 14.9 0 0 0 0 27.086l75.083 34.443A178.326 178.326 0 0 1 77.22 256zM256 77.22a178.32 178.32 0 0 1 47.986 6.549L269.543 8.687a14.9 14.9 0 0 0-27.086 0L208.014 83.77A178.28 178.28 0 0 1 256 77.22zM411.693 168.213l28.76-77.513A14.9 14.9 0 0 0 421.3 71.547l-77.513 28.76a180.102 180.102 0 0 1 67.906 67.906zM256 434.78a178.32 178.32 0 0 1-47.986-6.549l34.443 75.083a14.9 14.9 0 0 0 27.086-.001l34.444-75.083A178.333 178.333 0 0 1 256 434.78zM100.307 343.787 71.547 421.3A14.9 14.9 0 0 0 90.7 440.453l77.513-28.76a180.102 180.102 0 0 1-67.906-67.906zM503.313 242.457l-75.083-34.444c4.262 15.277 6.549 31.369 6.549 47.986s-2.287 32.71-6.549 47.986l75.083-34.443a14.9 14.9 0 0 0 0-27.085zM411.693 343.787a180.083 180.083 0 0 1-67.905 67.905l77.513 28.76a14.897 14.897 0 0 0 15.719-3.434 14.9 14.9 0 0 0 3.434-15.719zM256 404.98c-82.148 0-148.98-66.832-148.98-148.98S173.852 107.02 256 107.02 404.98 173.852 404.98 256 338.148 404.98 256 404.98z" fill="%23000000" opacity="1" data-original="%23000000" class=""></path></g></svg>') no-repeat right 7px center / 17px, #fff;height: 30px;width: 60px;border-radius: 50px;} #content .theme:before{position: absolute;content: "";width: 24px;height: 24px;border-radius: 50%;left:3px;top:3px;background: yellowgreen;box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, .25);} .dark #content .theme{background-color: #555;} .dark #content .theme:before{left: auto;right: 3px;background: darkgray;}