@import url('https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap'); :root { --m-c: #6130b0; --s-c: #5728a1; --bg:#efefef; --box-shadow: rgba(17, 18, 54, 0.16); --box-shadow-left: -5px 0px 17px 0 rgb(0 0 0 / 28%); } html { scrollbar-width: thin; scrollbar-color: var(--m-c) #f1f1f1; scroll-behavior: smooth } #tL a{ color: #ffffffda; background: var(--m-c); } #cB, #index .textfaces, .index .textfaces, .fAT .shareitbutton { display: none } #sidelK, .lK, .random { overflow: scroll } #lK p, .fAT .new { text-transform: uppercase } a { text-decoration: none } #fancy-list h2, #seconds, .list-name, .random li p { font-weight: 500 } *, ::after, ::before, input[type=text] { box-sizing: border-box } body { font-size: 1rem; line-height: 1.6; background: var(--bg); font-family: "TikTok Sans", sans-serif; -webkit-font-smoothing: antialiased; touch-action: manipulation; margin: 0; padding: 0; } .cT { max-width: 100%; margin: 0 auto; } h1,h2,h3{ clear: both; margin-left: 2%; color: #444; font-weight: 300; } h1{ font-size: 1.7em; } h2{ font-size: 1.5em; } h3{ font-size: 1.2em; } .content-sec h2{ font-size: 1.1em; text-transform: uppercase; color: #777; font-weight: bold; } .ads { display: block; width: 100%; margin: 10px 0; height: auto; clear: both; } #lG { text-align: center; height: 80px; background:var(--m-c); box-shadow: 0 6px 6px 0 rgb(0 0 0 / 35%); } #lG h3{ margin: 0; color: #fff; font-size: 27px; } #lG img{ width: 220px; height: auto; margin-top: 5px; } #lG span{ color: #ffffff80; background: #52249c; padding: 5px; border-radius: 10px; } header p { margin: 2px 0 8px 5px; color: var(--s-c) } .main-i-s { position: sticky; top: 0; z-index: 9999; } .fAT .new, .random li p.s2 { font-size: 10px } nav .lK { display: flex ; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; padding: 5px; } nav .lK a{ background: #f9f9f9; color: #888; border: 1px solid #dadada; display: flex; outline: none; padding: 5px 10px; align-items: center; text-decoration: none; } .lK span { padding: 10px 2px; } .lK a span, header #tL a span { position: absolute; display: block; padding: 0 5px; background: red; color: #fff; font-size: 10px; top: -5px; border-radius: 5px; right: -10px } .site-title img { width: 220px; padding-top: 5px } header .i-s { display: flex; align-items: center; justify-content: space-between; /* This ensures the lG is centered and the button is on the right */ padding: 0; /* Optional: Add some horizontal padding */ } header .lG { flex-grow: 1; text-align: center; } header .lG img{ width: auto; height: 40px; } .close-top { width: 100%; background: red; color: #ffffffb8; padding: 5px; cursor: pointer; margin: 0; border-radius: 5px; } .material-symbols-outlined { vertical-align: middle; } #openMenu { background: 0 0; cursor: pointer; border: none; color: #ffffff75; position: absolute; right: 15px; top: 5px; font-size: 17px; width: 50px; height: 40px; } .i-s span { color: #ffffff87 } .f-m { position: fixed; right: -100%; top: 0; width: 80%; height: 100%; padding: 15px; background-color: #ecedf3; color: #fff; align-items: center; transition: right .3s; z-index: 9999 } #cB, .close-button { position: absolute; cursor: pointer } .close-button, .f-m { box-shadow: var(--box-shadow-left) } .f-m .lK,#footermenu .lK{ display: block; } .open { right: 0 } #sidelK { height: 100% } #sidelK .lK span{ color: #000; } .close-button { top: 10px; left: -48px; padding: 8px 16px; font-size: 30px; border: none; color: #444; border-radius: 15px 0 0 15px } .close-button:hover { background-color: var(--m-c); color: #fff } #cTDiv { justify-content: center; display: inline-grid } .fAT a.morefancy { justify-content: right; display: flex } .lK h3 { color: #0000007d; font-size: 16px; margin: 5px; } .othersites #lK a { display: inline-block; width: 32% } #main-cT{ flex: 1; position: relative; min-width: 0; } .i-s .i-cT { display: flex; align-items: center; position: relative; width: 100%; background: var(--m-c); padding: 5px; box-shadow: 0 6px 6px 0 rgb(0 0 0 / 35%); border-radius: 0 0 15px 15px; } .i-s .i-cT input { flex-grow: 1; padding: 20px; border: none; border-radius: 12px; font-size: 17px; background: #f9f9f9; color: #444; transition: border-color 0.3s, box-shadow 0.3s; outline: none; } .i-s .i-cT input:focus { border-color: var(--s-c); /* Slightly darker shade for focused state */ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); /* Enhanced shadow for focused state */ } .hidden { transform: translateY(-100%); } #cB { right: 7px; top: 35px; transform: translateY(-50%); border: none; width: 55px; height: 60px; position: absolute; color: #777; font-size: 25px; background: transparent; cursor: pointer; } #cB:hover{ color: #000; } .share-buttons { position: fixed; bottom: 0; padding: 5px 10px; height: 45px; z-index: 999; width: 100%; background: #fff; } #st-1 { z-index: 1 !important; } .random { list-style-type: none; padding:0; height: 100px; overflow-x: hidden; text-align: center; margin: 0 } .random li { display: inline-block; position: relative; } .random li:hover p { color: var(--m-c); border-color: var(--m-c) } .random li p { margin: 4px; color: #777; cursor: pointer; padding: 5px 10px; border-radius: 5px; font-family: Arial, sans-serif; border: 1px solid transparent } .random li p.s2 { font-size: 10px } .random li p.s3 { font-size: 14px } .list-name, .random li p.s4 { font-size: 17px } .fAT p, .random li p.s5 { font-size: 18px; } .random li p.s6 { font-size: 20px; } .random li:nth-child(1) { animation-delay: 0s; } .random li:nth-child(2) { animation-delay: 0.1s; } .random li:nth-child(3) { animation-delay: 0.2s; } .random li:nth-child(4) { animation-delay: 0.3s; } .random li:nth-child(5) { animation-delay: 0.4s; } .random li:nth-child(6) { animation-delay: 0.6s; } .random button { position: absolute; border-radius: 8px; border: none; padding: 5px; top: -5px; right: 5px; background: var(--m-c); color: #fff } .fAT { padding: 1%; margin: 0; overflow: hidden; list-style: none; background: #f9f9f9; border-radius: 10px; } .fAT li { cursor: pointer; background: #efefef; color: #444; font-family: Arial, sans-serif; align-items: center; width: 96%; margin: 2%; position: relative; border-radius: 10px; } .fAT li:hover { background: #d5d5d5; color: #000; } .fAT p { width: 100%; margin: 0; padding: 30px 0 10px 20px; transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease; } .fAT p:hover{ color: var(--s-c); } .fAT li div span { position: absolute; left: 15px; top: 5px; text-transform: uppercase; color: #999999; font-size: 12px; } .fAT li button { position: absolute; right: 10px; height: 30px; top: 2px; text-transform: uppercase; } .fAT .ads { grid-column: 1 / -1; /* Span all columns */ padding: 0; background: none; box-shadow: none; } span.name { font-size: 10px; text-transform: uppercase; color: #999; position: absolute; left: 15px; bottom: 10px; display: none; } .fAT button { border: none; font-size: 12px; cursor: pointer; transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease; text-align: right; color: #999; background: transparent; } /* Hover Effect */ .fAT button:hover { transform: scale(1.1); color: var(--s-c); } /* Click (Active) Effect */ .fAT button:active { transform: scale(0.9); color: var(--s-c); } /* Add a slight glowing effect on focus */ .fAT button:focus { outline: none; color: var(--s-c); } .fAT .last { background: 0 0; border: none; list-style: none; } .fAT a.morefancy { padding: 15px; justify-items: center; color: var(--m-c); border-radius: 10px } .fAT a.morefancy:hover { background: #fff; } .fAT .new { display: block; position: absolute; left: 5px; top:-5px; background: red; font-weight: bold; color: #fff; padding: 4px 7px; border-radius: 10px } .fAT .btn { padding: 5px; display: flex; justify-content: center; justify-items: center; position: absolute; top: 0; right: 0 } .btn button:hover{ color: var(--m-c) } .fAT h2 { grid-column: span 2; margin-bottom: 10px; } #fancy-list p i { display: inline-block; padding: 5px 8px; margin: 3px; cursor: pointer; color: #000; font-style: normal } #fancy-list p i:hover { background: #fff; color: var(--m-c); border-color: var(--m-c) } #fancy-list h2 { padding: 0; margin: 0 2%; color: #000; } .loadmore { text-align: center; clear: both; margin: 15px; } label { margin: 5px 0 0 10px; color: #555; font-size: 14px; text-transform: uppercase; } input[type=number] { padding: 5px; border: 1px solid #ccc; border-radius: 0 10px; font-size: 17px; text-align: center; } .gen-settings { position: fixed; bottom: 260px; right: 0; z-index: 9999; padding: 5px; } .regenbutton { position: fixed; bottom: 208px; z-index: 999; text-align: center; right: 0; } #refreshit , .bB a{ display: inline-block; padding: 10px 15px; background-color: #fff; color: var(--m-c); font-size: 17px; text-align: center; text-decoration: none; border-radius: 15px 0 0 15px; box-shadow: 0 4px 20px 5px rgb(0 0 0 / 20%); transition: all 0.2s ease; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-weight: bold; text-transform: uppercase; } #refreshit:active { transform: scale(0.96); /* Slightly shrink on click */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduce shadow */ background-color: #f0f0f0; /* Optional: light click color */ } .textfaces { padding: 15px; display: none; } .textfaces i { display: inline-block; padding: 5px; border-radius: 10px; margin: 5px; color: #444; cursor: pointer; } .textfaces i:hover { background: #fff; } .load-more { text-align: center; } #lK { display: block; flex-wrap: wrap; justify-content: space-around } .lK a ,#othertools a,.loadmore button{ display: inline-block; color: #333; background: #d9d9d9; padding: 4px 14px; margin: 4px; font-size: 1em; transition: .3s; position: relative; cursor: pointer; border: none; border-radius: 20px } .loadmore button { padding: 15px 35px; font-size: 1.1em; height: auto; } #othertools a { color: #fff; background: var(--m-c); } #othertools a:hover { background: var(--s-c); } .lK a:hover, .lK a.active-link { color: var(--m-c); border-color: var(--m-c); } .bB a{ position: fixed; bottom: 15%; right: 0; z-index: 9999; } footer { text-align: center; } #footermenu .lK{ margin: 15px; } .pagination , .hideit{ display: none; } .info-text { padding: 10px; overflow: scroll; background: #f1f1f1; } .info-text img { width: 100%; height: auto; } #aB { display: block; visibility: hidden; z-index: 2147483647 !important; left: 0; top: 15%; width: 100%; padding: 1%; overflow: scroll; } .aC{ position: relative; border-radius: 5px; overflow: hidden; box-shadow: var(--box-shadow-left); } span.auto-close { background: #6130b0; padding: 2px 15px; border-radius: 10px; color: #fff; font-size: 11px; position: absolute; top: 0px; text-transform: uppercase; font-weight: bold; } @keyframes animatetop { from {top: -300px; opacity: 0} to {top: 0; opacity: 1} } #aB .the_copied_text{ font-weight: bold; font-size: 120%; width: 100%; border-radius: 5px; text-align: center; padding: 10px; } #aB .emphasis{ font-weight: bold; } #aB .the_copied_text_description{ font-weight: normal; background: #fff; color: #000; padding: 5px 10px; border-radius: 10px; font-size: 12px; } #ads_alert{ margin-left: auto; margin-right: auto; text-align: center; background: #fff; padding: 5px 0; min-height: 300px; max-height: 330px; } .alert-header { padding: 10px; background-color: var(--m-c); color: white; text-align: center; word-wrap: break-word; } #aB button { background-color: #dd2020; color: white; text-align: center; cursor: pointer; border: none; width: 100%; text-transform: uppercase; padding: 10px; font-size: 17px; box-shadow: var(--box-shadow); } .alert-header button { width: 40px !important; height: 40px; position: absolute; top: 0; right: 0; background: red !important; color: #fff !important; font-size: 1.3rem; border-radius: 30px; } #footermenu { clear: both; } .example { font-size: 1.2em; color: #e74c3c; margin: 10px 0; } .tip { background: #f1f1f1; padding: 15px; border-left: 4px solid var(--s-c); margin: 15px 0; } .cta { text-align: center; margin: 30px 0; } .cta a { background: var(--m-c); color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 1.2em; } .cta a:hover { background: var(--s-c); } @media (min-width: 968px) { #cB { top: 35px; } .lK, .random { overflow: auto; } .bB a { bottom: 5%; } .fAT li{ margin-bottom: 0; } .fAT { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; } .f-m { width: 400px; } .info-text img { width: 700px; } .boxedview { margin: 10% auto 0; } .fAT p { font-size: 22px; } .cT{ max-width: 1080px; } }