API tools faq
paste
Velvet_RidingHood

Juzo Honenuki (Class B)

Velvet_RidingHood
Aug 9th, 2026
13
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.58 KB | Source Code | 0 0
raw download clone embed print report
  1. Note: The base for this isn't mine! I did tweek it and add new things to it. Here is the link to the base of it I used.
  2.  
  3. Link: https://janitorai.com/characters/2e3e3206-787c-4779-816d-20a48d078f5c_character-coffee-shop-free-css-theme
  4.  
  5. <style>
  6. .css-1wfbrwg div:first-child:hover{
  7. box-shadow: none!important;
  8. }
  9. </style>
  10.  
  11. <style>
  12. .css-1uodvt1 {
  13. display: flex !important;
  14. flex-direction: column !important;
  15. align-items: center !important;
  16. gap: 15px !important;
  17. text-align: center !important;
  18. }
  19.  
  20. .css-18bnokj {
  21. order: 1 !important;
  22. }
  23.  
  24. .css-o5an2m,
  25. .css-hjkukh {
  26. order: 2 !important;
  27. }
  28.  
  29. .css-1x04uxb {
  30. order: 3 !important;
  31. }
  32.  
  33. .css-18bnokj {
  34. width: 300px !important;
  35. height: 300px !important;
  36. border: 5px solid #8b5a2b !important;
  37. border-radius: 50% !important;
  38. object-fit: cover !important;
  39. padding: 5px !important;
  40. background-color: #1c1917 !important;
  41. box-shadow: 0 0 25px rgba(139, 90, 43, 0.8), 0 0 12px rgba(212, 163, 115, 0.7) !important;
  42. }
  43. </style>
  44.  
  45. <style>
  46. .profile-title-heading {
  47. color: #ffffff !important;
  48. text-shadow: 0 0 10px #8b5a2b, 2px 2px 0px #1c1917 !important;
  49. font-size: 1.6rem !important;
  50. text-align: center !important;
  51.  
  52. background: #1c1917 !important;
  53. padding: 12px 11px !important;
  54. border-radius: 19px !important;
  55. border: 2px solid #8b5a2b !important;
  56. display: inline-block !important;
  57. margin-top: 10px !important;
  58. }
  59. </style>
  60.  
  61. <style>
  62. .profile-title-heading {
  63. font-family: 'Impact', 'Trebuchet MS', sans-serif !important;
  64. font-weight: 500 !important;
  65. text-transform: uppercase !important;
  66. letter-spacing: 1.5px !important;
  67. }
  68. </style>
  69.  
  70. <style>
  71. .css-1uodvt1 {
  72. padding-top: 0px;
  73. flex-direction: column;
  74. justify-items: center;
  75. text-align: center;
  76. }
  77. </style>
  78.  
  79. <style>
  80. .profile-title-heading::after {
  81. content: " | ๐Ÿชจ๐ŸŒŠ๐Ÿฆด" !important;
  82. display: inline-block !important;
  83. font-size: 1.5rem !important;
  84. margin-left: 4px !important;
  85. vertical-align: middle !important;
  86. }
  87. </style>
  88.  
  89. <style>
  90. .character-list-pagination-flex {
  91. align-items: center;
  92. flex-direction: column;
  93. gap: 12px;
  94. }
  95.  
  96. .profile-badge-flex-outer {
  97. background: #1c1917;
  98. color: #8b5a2b !important;
  99. border: 2px solid #8b5a2b !important;
  100. border-radius: 6px;
  101. font-family: 'Trebuchet MS', sans-serif;
  102. box-shadow: 0 0 12px rgba(139, 90, 43, 0.5);
  103. text-shadow: 0 0 6px rgba(212, 163, 115, 0.6);
  104. }
  105.  
  106. .profile-character-search-input {
  107. background: #292524;
  108. color: #ffffff;
  109. caret-color: #8b5a2b;
  110. font-family: 'Trebuchet MS', sans-serif;
  111. }
  112.  
  113. .profile-character-search-input,
  114. .profile-character-search-input:is(:hover, :focus) {
  115. border: 2px solid #8b5a2b;
  116. border-radius: 8px 0 0 8px;
  117. box-shadow: 0 0 10px rgba(139, 90, 43, 0.7);
  118. }
  119.  
  120. .profile-character-search-input::placeholder {
  121. color: #8b5a2ba0;
  122. }
  123.  
  124. .profile-character-search-input ~ div svg {
  125. color: #8b5a2b !important;
  126. transform: scale(1.3);
  127. }
  128.  
  129. .profile-filter-button {
  130. background: #292524 !important;
  131. border: 2px solid #8b5a2b;
  132. border-radius: 6px;
  133. }
  134.  
  135. .profile-filter-button svg {
  136. color: #8b5a2b !important;
  137. }
  138.  
  139. #root ~ *:has(> .profile-filter-modal-modal-overlay)
  140. [data-focus-lock-disabled] > * > * {
  141. background: #1c1917 !important;
  142. border: 2px solid #8b5a2b;
  143. box-shadow: 0 0 20px rgba(139, 90, 43, 0.7);
  144. }
  145.  
  146. .profile-filter-modal-body-tags-flex-box-heading {
  147. text-align: center;
  148. font-family: 'Trebuchet MS', sans-serif;
  149. color: #ffffff;
  150. letter-spacing: 1px;
  151. }
  152.  
  153. [class*="_tagsContainer_"] {
  154. background: #1c1917;
  155. border: 2px solid #8b5a2b;
  156. }
  157.  
  158. [class*="_collapsedContainer_"] [class*="_tag_"] {
  159. border: 1px solid #8b5a2b;
  160. background: #292524;
  161. color: #ffffff;
  162. }
  163.  
  164. [class*="_collapsedContainer_"] [class*="_tag_"]:not([class*="_tagSelected_"]):hover {
  165. background: #8b5a2b;
  166. color: #ffffff;
  167. box-shadow: 0 0 8px rgba(139, 90, 43, 0.8);
  168. }
  169.  
  170. [class*="_collapsedContainer_"] [class*="_tagSelected_"] {
  171. background: #d4a373;
  172. color: #1c1917;
  173. box-shadow: 0 0 10px rgba(212, 163, 115, 0.8);
  174. }
  175.  
  176. [class*="_navigationButton"] {
  177. background: #292524;
  178. border: 1px solid #8b5a2b;
  179. color: #ffffff;
  180. }
  181.  
  182. #root .react-select__control {
  183. background: #292524;
  184. border: 2px solid #8b5a2b !important;
  185. }
  186.  
  187. #root .react-select__single-value {
  188. color: #ffffff;
  189. font-family: 'Trebuchet MS', sans-serif;
  190. }
  191.  
  192. #root .react-select__dropdown-indicator svg {
  193. color: #8b5a2b;
  194. }
  195.  
  196. .profile-pagination-prev-hstack svg {
  197. color: #8b5a2b;
  198. }
  199.  
  200. .profile-badge-flex-outer {
  201. height: 45px;
  202. background: #1c1917 !important;
  203. color: #8b5a2b !important;
  204. box-shadow: 0 0 12px rgba(139, 90, 43, 0.4);
  205. border: none !important;
  206. border-bottom: 3px solid #d4a373 !important;
  207. border-radius: 0;
  208. font-family: 'Trebuchet MS', sans-serif;
  209. letter-spacing: 1px;
  210. text-shadow: 0 0 6px rgba(212, 163, 115, 0.5);
  211. }
  212.  
  213. .profile-badge-flex-outer,
  214. .profile-badge-total-text::after {
  215. font-size: 1.0rem !important;
  216. }
  217.  
  218. .profile-badge-total-text {
  219. font-size: 0 !important;
  220. }
  221.  
  222. .profile-badge-total-text::after {
  223. content: "Class 1-B Ground Zero ๐Ÿชจ";
  224. letter-spacing: 1px;
  225. color: #ffffff;
  226. }
  227.  
  228. .profile-tabs-wrapper {
  229. visibility: hidden !important;
  230. }
  231. </style>
  232.  
  233. <style>
  234. .torn-paper {
  235. background-color: #1c1917 !important;
  236. color: #ffffff !important;
  237. padding: 30px !important;
  238. border-radius: 6px !important;
  239. font-family: 'Trebuchet MS', sans-serif !important;
  240. position: relative !important;
  241. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6) !important;
  242. margin: -9px auto !important;
  243. max-width: 100% !important;
  244. border: 3px solid #8b5a2b !important;
  245. }
  246.  
  247. .torn-paper h3 {
  248. text-transform: uppercase !important;
  249. border-bottom: 2px solid #d4a373 !important;
  250. margin-bottom: 15px !important;
  251. padding-bottom: 5px !important;
  252. color: #8b5a2b !important;
  253. }
  254. </style>
  255.  
  256. <div class="torn-paper">
  257. <h3>Softening The Field ๐Ÿชจ</h3>
  258. <p>In battle, flexibility beats brute force every time. Touch the ground, turn solid footing into liquid mud, and sink the opposition before they even realize they've lost their balance. Stay cool, adapt, and keep Class 1-B ahead. ๐Ÿฆด๐ŸŒŠ</p>
  259. </div>
  260.  
  261. <style>
  262. .torn-paper {
  263. position: relative !important;
  264. }
  265.  
  266. .torn-paper::before {
  267. content: "๐Ÿชจ๐ŸŒŠ หšโ‚Šโ€ง" !important;
  268. position: absolute !important;
  269. top: 5px !important;
  270. left: 5px !important;
  271. font-size: 1.2rem !important;
  272. z-index: 1 !important;
  273. }
  274.  
  275. .torn-paper::after {
  276. content: "ห™โœงห–ยฐ๐Ÿฆด MUDMAN SURGE! เผ˜ โ‹†๏ฝกหš" !important;
  277. position: absolute !important;
  278. bottom: 5px !important;
  279. right: 5px !important;
  280. font-size: 1.2rem !important;
  281. z-index: 1 !important;
  282. }
  283. </style>
  284.  
  285. <div class="cafe-button-container">
  286. <a href="#" class="cafe-btn">Button</a>
  287. <a href="#" class="cafe-btn">Button</a>
  288. <a href="#" class="cafe-btn">Button</a>
  289. </div>
  290.  
  291. <style>
  292. .cafe-button-container {
  293. display: flex;
  294. justify-content: center;
  295. gap: 15px;
  296. margin: 20px 0;
  297. }
  298.  
  299. .cafe-btn {
  300. background: #1c1917 !important;
  301. color: #8b5a2b !important;
  302. padding: 10px 25px !important;
  303. border: 2px solid #8b5a2b !important;
  304. border-radius: 25px !important;
  305. font-family: 'Trebuchet MS', sans-serif !important;
  306. font-weight: bold !important;
  307. text-decoration: none !important;
  308. transition: 0.3s !important;
  309. box-shadow: 2px 4px 6px rgba(0,0,0,0.5) !important;
  310. }
  311.  
  312. .cafe-btn:hover {
  313. background: #8b5a2b !important;
  314. color: #ffffff !important;
  315. border: 2px solid #d4a373 !important;
  316. transform: translateY(-3px) !important;
  317. box-shadow: 0 0 15px rgba(139, 90, 43, 0.9) !important;
  318. cursor: pointer;
  319. }
  320. </style>
  321.  
  322. <div class="wood-divider"></div>
  323. <style>
  324. .wood-divider {
  325. width: 80%;
  326. height: 12px;
  327. margin: 20px auto;
  328. border-radius: 6px;
  329. background: repeating-linear-gradient(
  330. -45deg,
  331. #1c1917,
  332. #1c1917 12px,
  333. #8b5a2b 12px,
  334. #8b5a2b 24px,
  335. #d4a373 24px,
  336. #d4a373 36px
  337. );
  338. box-shadow: 0 2px 8px rgba(139, 90, 43, 0.6);
  339. }
  340. </style>
  341.  
  342. <div class="cork-board">
  343. <h2 class="board-title">Tactical Field Notes</h2>
  344. <div class="pinned-note">
  345. <p><strong>Softening Quirk</strong><br>Can liquefy any non-organic material I touch. Re-softening already softened ground keeps opponents trapped indefinitely.</p>
  346. </div>
  347. <div class="pinned-note">
  348. <p><strong>Recommended Student Duty</strong><br>Keep cool under pressure. Adapt instantly to enemy tactics and support team mobility from below.</p>
  349. </div>
  350. <div class="pinned-note">
  351. <p><strong>Class 1-B Strategy</strong><br>Coordinate with Tetsutetsu and Kendo to trap high-speed attackers before they hit full momentum.</p>
  352. </div>
  353. </div>
  354.  
  355. <style>
  356. .cork-board {
  357. background-color: #1c1917 !important;
  358. border: 4px solid #8b5a2b !important;
  359. padding: 20px !important;
  360. margin: 20px auto !important;
  361. max-width: 500px !important;
  362. box-shadow: 0 0 20px rgba(139, 90, 43, 0.7) !important;
  363. border-radius: 12px !important;
  364. }
  365.  
  366. .cork-board h2 {
  367. font-family: 'Impact', sans-serif !important;
  368. color: #8b5a2b !important;
  369. font-size: 2rem !important;
  370. text-transform: uppercase !important;
  371. letter-spacing: 3px !important;
  372. text-align: center !important;
  373. text-shadow: 2px 2px #d4a373 !important;
  374. margin: 0 !important;
  375. padding: 10px 0 !important;
  376. background: transparent !important;
  377. }
  378.  
  379. .pinned-note {
  380. background-color: #292524 !important;
  381. color: #ffffff !important;
  382. padding: 15px !important;
  383. margin: 10px 0 !important;
  384. border-radius: 8px !important;
  385. font-family: 'Trebuchet MS', sans-serif !important;
  386. border-left: 5px solid #d4a373 !important;
  387. position: relative !important;
  388. box-shadow: 3px 3px 5px rgba(0,0,0,0.5) !important;
  389. }
  390.  
  391. .pinned-note::before {
  392. content: "๐Ÿฆด" !important;
  393. position: absolute !important;
  394. top: -12px !important;
  395. right: 15px !important;
  396. font-size: 1rem !important;
  397. }
  398. </style>
  399.  
  400. <div class="status-indicator">
  401. <div class="status-dot"></div>
  402. <span class="status-text">GROUND SOFTENED: 100% ๐Ÿชจ</span>
  403. </div>
  404.  
  405. <style>
  406. .status-indicator {
  407. position: absolute !important;
  408. top: 300px !important;
  409. left: 60px !important;
  410. display: flex !important;
  411. align-items: center !important;
  412. gap: 5px !important;
  413. background: rgba(28, 25, 23, 0.95) !important;
  414. padding: 6px 12px !important;
  415. border-radius: 15px !important;
  416. border: 1px solid #8b5a2b !important;
  417. z-index: 10 !important;
  418. box-shadow: 0 0 12px rgba(139, 90, 43, 0.8) !important;
  419. }
  420.  
  421. .status-dot {
  422. width: 10px !important;
  423. height: 10px !important;
  424. background-color: #8b5a2b !important;
  425. border-radius: 50% !important;
  426. box-shadow: 0 0 8px #8b5a2b !important;
  427. }
  428.  
  429. .status-text {
  430. color: #ffffff !important;
  431. font-family: 'Trebuchet MS', sans-serif !important;
  432. font-weight: bold !important;
  433. font-size: 0.8rem !important;
  434. }
  435.  
  436. @media (max-width: 768px) {
  437. .status-indicator {
  438. top: 300px !important;
  439. left: 5px !important;
  440. padding: 3px 6px !important;
  441. }
  442. .status-text {
  443. font-size: 0.7rem !important;
  444. }
  445. }
  446. </style>
  447.  
  448. <div class="wood-divider"></div>
  449.  
  450. <style>
  451. .profile-character-card-wrapper {
  452. margin-bottom: 0.5rem;
  453. transition: 500ms ease;
  454. }
  455. .profile-character-card-wrapper, .profile-character-card-wrapper > div:empty {
  456. background: transparent !important;
  457. box-shadow: none;
  458. }
  459. .profile-character-card-wrapper:hover {
  460. box-shadow: none;
  461. transform: translateY(-4px) scale(1.01);
  462. }
  463. .profile-character-card-stack {
  464. background: #1c1917;
  465. border: 2px solid #8b5a2b;
  466. border-radius: 15px;
  467. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  468. }
  469. .profile-character-card-stack-link-component {
  470. display: flex;
  471. flex-direction: column-reverse;
  472. flex-wrap: nowrap;
  473. justify-content: center;
  474. }
  475.  
  476. .profile-character-card-name-box {
  477. color: #8b5a2b;
  478. font-family: 'Impact', sans-serif;
  479. font-size: 1.1rem;
  480. letter-spacing: 1px;
  481. text-transform: uppercase;
  482. text-shadow: 1px 1px 2px #d4a373;
  483. text-align: center;
  484. }
  485.  
  486. .profile-character-card-stats-box {
  487. position: absolute;
  488. display: flex;
  489. top: -0.75rem;
  490. right: unset;
  491. align-content: center;
  492. align-items: center;
  493. justify-content: center;
  494. width: 100%;
  495. }
  496. .profile-character-card-stats-box * {
  497. width: 100%;
  498. }
  499. .profile-character-card-ribbon {
  500. position: static;
  501. overflow: visible;
  502. filter: none;
  503. }
  504. .profile-character-card-ribbon-wrap {
  505. padding: 0;
  506. clip-path: polygon(25% 0, 75% 0, 70% 50%, 75% 100%, 25% 100%, 30% 50%);
  507. box-shadow: none;
  508. background: #d4a373;
  509. overflow: visible;
  510. border-radius: 0;
  511. transition: all 500ms;
  512. }
  513. .profile-character-cards-chat-count-tbmessages {
  514. display: none;
  515. }
  516. .profile-character-card-chats-count::before {
  517. content: "| ๐Ÿฆด ";
  518. font-weight: normal;
  519. }
  520. .profile-character-card-chats-count::after {
  521. content: " Soft Traps |";
  522. font-weight: normal;
  523. }
  524. .profile-character-card-chats-count {
  525. text-align: center;
  526. color: #1c1917;
  527. font-family: 'Trebuchet MS', sans-serif;
  528. font-weight: bold;
  529. }
  530.  
  531. .profile-character-card-avatar-aspect-ratio {
  532. margin: 10px;
  533. }
  534. .profile-character-card-avatar-image {
  535. border-radius: 8px;
  536. border: 2px solid #8b5a2b;
  537. }
  538.  
  539. .profile-character-card-creator-name-link {
  540. display: none;
  541. }
  542.  
  543. .profile-character-card-description-markdown-container * {
  544. font-family: 'Trebuchet MS', sans-serif;
  545. color: #ffffff !important;
  546. text-align: center !important;
  547. }
  548.  
  549. .profile-character-card-star-line {
  550. border-color: #8b5a2b;
  551. }
  552. .profile-character-card-star {
  553. display: none;
  554. }
  555. .profile-character-card-star-line::after {
  556. content: "๐Ÿชจ๐ŸŒŠ";
  557. position: absolute;
  558. color: #8b5a2b;
  559. font-size: 0.9rem;
  560. right: -25px;
  561. top: -15px;
  562. }
  563.  
  564. .profile-character-card-tags ul {
  565. justify-content: center;
  566. padding-bottom: 10px;
  567. }
  568. .profile-character-card-tags-wrap:has(.profile-character-card-tag-limitless), .profile-character-card-tag-limitless {
  569. flex: 1 1 100%;
  570. width: 100%;
  571. }
  572. .profile-character-card-tags-wrap:has(.profile-character-card-tag-limitless) {
  573. padding-top: 2px;
  574. padding-bottom: 2px;
  575. background: rgba(139, 90, 43, 0.3);
  576. border-radius: 20px;
  577. }
  578. .profile-character-card-tag-limitless {
  579. border: none;
  580. font-size: 0;
  581. background: transparent;
  582. }
  583. .profile-character-card-tag-limitless::before, .profile-character-card-tag-limitless::after {
  584. font-size: 0.9rem;
  585. font-family: 'Trebuchet MS', sans-serif;
  586. font-weight: bold;
  587. color: #8b5a2b;
  588. text-align: center;
  589. position: absolute;
  590. transition: opacity 500ms ease;
  591. }
  592. .profile-character-card-tag-limitless::before {
  593. content: "๐Ÿชจ Sub-Surface Swimming";
  594. }
  595. .profile-character-card-tag-limitless::after {
  596. content: "๐ŸŒŠ EARTH LIQUEFACTION AMBUSH!!";
  597. opacity: 0;
  598. }
  599. .profile-character-card-wrapper:hover .profile-character-card-tag-limitless::before {
  600. opacity: 0;
  601. }
  602. .profile-character-card-wrapper:hover .profile-character-card-tag-limitless::after {
  603. opacity: 1;
  604. transition-delay: 250ms;
  605. }
  606. .profile-character-card-tags-wrap:not(:has(.profile-character-card-tag-limitless)) {
  607. border: 1px solid #8b5a2b;
  608. border-radius: 15px;
  609. }
  610. .profile-character-card-tags-wrap a {
  611. display: flex;
  612. }
  613. .pp-cc-tags-regular {
  614. font-size: 0;
  615. display: inline;
  616. border: none !important;
  617. }
  618. .pp-cc-tags-regular::first-letter {
  619. font-size: 0.9rem;
  620. }
  621. .pp-cc-tags-item:hover:not(.profile-character-card-tag-limitless) {
  622. background: rgba(139, 90, 43, 0.3);
  623. }
  624. .pp-cc-tags-custom {
  625. border: none !important;
  626. color: #8b5a2b;
  627. font-family: 'Trebuchet MS', sans-serif;
  628. font-weight: 600;
  629. }
  630.  
  631. .profile-character-card-tokens-count {
  632. color: #8b5a2b;
  633. text-shadow: none;
  634. font-family: 'Trebuchet MS', sans-serif;
  635. font-weight: 500;
  636. }
  637.  
  638. .profile-character-card-box ~ div {
  639. display: none;
  640. }
  641. </style>
  642.  
  643. <div class="cafe-chalkboard-menu">
  644. <div class="chalkboard-frame">
  645. <div class="chalkboard-surface">
  646. <h3 class="chalk-title">Class 1-B Training Rations ๐Ÿฒ</h3>
  647. <ul class="chalk-items">
  648. <li>๐Ÿฒ Hearty Earthy Root Vegetable Stew</li>
  649. <li>๐Ÿต Hot Roasted Barley Tea (Mugicha)</li>
  650. <li>๐ŸฅŸ Pan-Seared Pork & Chive Gyoza</li>
  651. <li>๐Ÿฑ Steamed White Rice with Furikake</li>
  652. <li>๐Ÿก Chewy Brown Sugar Kinako Mochi</li>
  653. <li>๐Ÿฅฃ Warm Savory Miso Soup with Tofu</li>
  654. </ul>
  655. <div class="chalk-footer">"Consistency and endurance wins the battle."</div>
  656. </div>
  657. </div>
  658. </div>
  659.  
  660. <style>
  661. .css-p641ht {
  662. background-color: #1c1917 !important;
  663. border-bottom: 4px solid #8b5a2b !important;
  664. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6) !important;
  665. }
  666.  
  667. .css-1qj3ulc {
  668. font-size: 0 !important;
  669. visibility: hidden !important;
  670. position: relative !important;
  671. display: inline-block !important;
  672. }
  673.  
  674. .css-1qj3ulc::after {
  675. content: "Mudman.Juzo ๐Ÿฆด" !important;
  676. visibility: visible !important;
  677. font-family: 'Impact', sans-serif !important;
  678. font-size: 1.6rem !important;
  679. font-weight: bold !important;
  680. color: #8b5a2b !important;
  681. letter-spacing: 2px !important;
  682. text-shadow: 2px 2px 0px #d4a373 !important;
  683. position: absolute !important;
  684. left: 0 !important;
  685. top: 50% !important;
  686. transform: translateY(-50%) !important;
  687. white-space: nowrap !important;
  688. }
  689.  
  690. .cafe-page-doll {
  691. position: fixed !important;
  692. bottom: 30px !important;
  693. right: 30px !important;
  694. z-index: 9999 !important;
  695. display: flex !important;
  696. flex-direction: column !important;
  697. align-items: center !important;
  698. pointer-events: auto !important;
  699. user-select: none !important;
  700. }
  701.  
  702. .doll-graphic {
  703. font-size: 3rem !important;
  704. line-height: 1 !important;
  705. filter: drop-shadow(3px 3px 0px #1c1917) !important;
  706. animation: dollFloat 3s ease-in-out infinite !important;
  707. }
  708.  
  709. .doll-steam {
  710. color: #8b5a2b !important;
  711. font-family: Arial, sans-serif !important;
  712. font-size: 1.5rem !important;
  713. font-weight: bold !important;
  714. opacity: 0 !important;
  715. transform: translateY(10px) !important;
  716. animation: dollSteam 3s ease-in-out infinite !important;
  717. }
  718.  
  719. .doll-shadow {
  720. width: 30px !important;
  721. height: 6px !important;
  722. background: rgba(139, 90, 43, 0.5) !important;
  723. border-radius: 50% !important;
  724. margin-top: 5px !important;
  725. animation: dollShadow 3s ease-in-out infinite !important;
  726. }
  727.  
  728. @keyframes dollFloat {
  729. 0%, 100% { transform: translateY(0); }
  730. 50% { transform: translateY(-12px); }
  731. }
  732.  
  733. @keyframes dollShadow {
  734. 0%, 100% { transform: scale(1); opacity: 0.5; }
  735. 50% { transform: scale(0.7); opacity: 0.2; }
  736. }
  737.  
  738. @keyframes dollSteam {
  739. 0% { transform: translateY(5px) scale(0.8); opacity: 0; }
  740. 50% { opacity: 0.8; }
  741. 100% { transform: translateY(-15px) scale(1.2); opacity: 0; }
  742. }
  743.  
  744. .cafe-chalkboard-menu {
  745. margin: 25px auto !important;
  746. max-width: 480px !important;
  747. width: 300% !important;
  748. box-sizing: border-box !important;
  749. }
  750.  
  751. .chalkboard-frame {
  752. background: #1c1917 !important;
  753. border: 4px solid #8b5a2b !important;
  754. border-radius: 8px !important;
  755. padding: 10px !important;
  756. box-shadow: 0 0 15px rgba(139, 90, 43, 0.5) !important;
  757. }
  758.  
  759. .chalkboard-surface {
  760. background: #292524 !important;
  761. border: 1px dashed #8b5a2b !important;
  762. padding: 15px !important;
  763. text-align: center !important;
  764. }
  765.  
  766. .chalk-title {
  767. color: #8b5a2b !important;
  768. font-family: 'Impact', sans-serif !important;
  769. font-size: 1.3rem !important;
  770. text-transform: uppercase !important;
  771. letter-spacing: 1px !important;
  772. border-bottom: 1px solid rgba(212, 163, 115, 0.6) !important;
  773. padding-bottom: 8px !important;
  774. margin-bottom: 12px !important;
  775. }
  776.  
  777. .chalk-items {
  778. list-style: none !important;
  779. padding: 0 !important;
  780. margin: 0 !important;
  781. }
  782.  
  783. .chalk-items li {
  784. color: #ffffff !important;
  785. font-family: 'Trebuchet MS', sans-serif !important;
  786. font-size: 0.95rem !important;
  787. margin: 8px 0 !important;
  788. text-align: left !important;
  789. }
  790.  
  791. .chalk-footer {
  792. color: #d4a373 !important;
  793. font-family: 'Trebuchet MS', sans-serif !important;
  794. font-size: 0.85rem !important;
  795. font-style: italic !important;
  796. margin-top: 15px !important;
  797. }
  798.  
  799. @media (max-width: 768px) {
  800.  
  801. .css-1qj3ulc::after {
  802. font-size: 1.3rem !important;
  803. }
  804.  
  805. .cafe-page-doll {
  806. bottom: 15px !important;
  807. right: 15px !important;
  808. transform: scale(0.8) !important;
  809. opacity: 0.8 !important;
  810. }
  811.  
  812. .cafe-chalkboard-menu {
  813. max-width: 90% !important;
  814. padding: 0 10px !important;
  815. }
  816. }
  817. </style>
  818.  
  819. <style>
  820. .profile-top-bar {
  821. background: rgba(28, 25, 23, 0.95);
  822. backdrop-filter: blur(5px);
  823. box-shadow: none;
  824. border-bottom: 3px solid #8b5a2b;
  825. }
  826. .profile-top-box-flex-inner, .profile-top-bar-logo-box {
  827. min-width: fit-content;
  828. }
  829.  
  830. .profile-top-bar-logo-name:hover { text-shadow: none; }
  831. .profile-top-bar-logo { background: transparent; }
  832.  
  833. .pp-uc-followers-count span + span { font-size:0; }
  834.  
  835. .pp-uc-followers-count span + span::after {
  836. content: "Class 1-B Allies";
  837. font-size:1rem;
  838. }
  839.  
  840. .sonner-toast-container [data-sonner-toast][data-type=success]{
  841. background: #1c1917!important;
  842. color: #8b5a2b!important;
  843. border: 2px solid #d4a373!important;
  844. }
  845. </style>
Tags: Mha CSS Code janitor.ai
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!