API tools faq
paste
Velvet_RidingHood

Aesop Sharp Themed

Velvet_RidingHood
Aug 10th, 2026
28
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.27 KB | Source Code | 0 0
raw download clone embed print report
  1. <style>
  2. .css-1wfbrwg div:first-child:hover{
  3. box-shadow: none!important;
  4. }
  5. </style>
  6.  
  7. <style>
  8. .css-1uodvt1 {
  9. display: flex !important;
  10. flex-direction: column !important;
  11. align-items: center !important;
  12. gap: 15px !important;
  13. text-align: center !important;
  14. }
  15.  
  16. .css-18bnokj {
  17. order: 1 !important;
  18. }
  19.  
  20. .css-o5an2m,
  21. .css-hjkukh {
  22. order: 2 !important;
  23. }
  24.  
  25. .css-1x04uxb {
  26. order: 3 !important;
  27. }
  28.  
  29. .css-18bnokj {
  30. width: 300px !important;
  31. height: 300px !important;
  32. border: 5px solid #0284c7 !important;
  33. border-radius: 50% !important;
  34. object-fit: cover !important;
  35. padding: 5px !important;
  36. background-color: #080d1a !important;
  37. box-shadow: 0 0 25px rgba(2, 132, 199, 0.8), 0 0 12px rgba(56, 189, 248, 0.6) !important;
  38. }
  39. </style>
  40.  
  41. <style>
  42. .profile-title-heading {
  43. color: #ffffff !important;
  44. text-shadow: 0 0 10px #0284c7, 2px 2px 0px #080d1a !important;
  45. font-size: 1.6rem !important;
  46. text-align: center !important;
  47.  
  48. background: #080d1a !important;
  49. padding: 12px 11px !important;
  50. border-radius: 19px !important;
  51. border: 2px solid #0284c7 !important;
  52. display: inline-block !important;
  53. margin-top: 10px !important;
  54. }
  55. </style>
  56.  
  57. <style>
  58. .profile-title-heading {
  59. font-family: 'Cinzel', 'Georgia', serif !important;
  60. font-weight: 600 !important;
  61. text-transform: uppercase !important;
  62. letter-spacing: 2px !important;
  63. }
  64. </style>
  65.  
  66. <style>
  67. .css-1uodvt1 {
  68. padding-top: 0px;
  69. flex-direction: column;
  70. justify-items: center;
  71. text-align: center;
  72. }
  73. </style>
  74.  
  75. <style>
  76. .profile-title-heading::after {
  77. content: " | 🧪🗡️📜" !important;
  78. display: inline-block !important;
  79. font-size: 1.5rem !important;
  80. margin-left: 4px !important;
  81. vertical-align: middle !important;
  82. }
  83. </style>
  84.  
  85. <style>
  86. .character-list-pagination-flex {
  87. align-items: center;
  88. flex-direction: column;
  89. gap: 12px;
  90. }
  91.  
  92. .profile-badge-flex-outer {
  93. background: #080d1a;
  94. color: #38bdf8 !important;
  95. border: 2px solid #0284c7 !important;
  96. border-radius: 6px;
  97. font-family: 'Cinzel', 'Georgia', serif;
  98. box-shadow: 0 0 12px rgba(2, 132, 199, 0.5);
  99. text-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
  100. }
  101.  
  102. .profile-character-search-input {
  103. background: #0f172a;
  104. color: #ffffff;
  105. caret-color: #0284c7;
  106. font-family: 'Cinzel', 'Georgia', serif;
  107. }
  108.  
  109. .profile-character-search-input,
  110. .profile-character-search-input:is(:hover, :focus) {
  111. border: 2px solid #0284c7;
  112. border-radius: 8px 0 0 8px;
  113. box-shadow: 0 0 10px rgba(2, 132, 199, 0.7);
  114. }
  115.  
  116. .profile-character-search-input::placeholder {
  117. color: #0284c7a0;
  118. }
  119.  
  120. .profile-character-search-input ~ div svg {
  121. color: #0284c7 !important;
  122. transform: scale(1.3);
  123. }
  124.  
  125. .profile-filter-button {
  126. background: #0f172a !important;
  127. border: 2px solid #0284c7;
  128. border-radius: 6px;
  129. }
  130.  
  131. .profile-filter-button svg {
  132. color: #0284c7 !important;
  133. }
  134.  
  135. #root ~ *:has(> .profile-filter-modal-modal-overlay)
  136. [data-focus-lock-disabled] > * > * {
  137. background: #080d1a !important;
  138. border: 2px solid #0284c7;
  139. box-shadow: 0 0 20px rgba(2, 132, 199, 0.7);
  140. }
  141.  
  142. .profile-filter-modal-body-tags-flex-box-heading {
  143. text-align: center;
  144. font-family: 'Cinzel', 'Georgia', serif;
  145. color: #ffffff;
  146. letter-spacing: 1px;
  147. }
  148.  
  149. [class*="_tagsContainer_"] {
  150. background: #080d1a;
  151. border: 2px solid #0284c7;
  152. }
  153.  
  154. [class*="_collapsedContainer_"] [class*="_tag_"] {
  155. border: 1px solid #0284c7;
  156. background: #0f172a;
  157. color: #ffffff;
  158. }
  159.  
  160. [class*="_collapsedContainer_"] [class*="_tag_"]:not([class*="_tagSelected_"]):hover {
  161. background: #0284c7;
  162. color: #ffffff;
  163. box-shadow: 0 0 8px rgba(2, 132, 199, 0.8);
  164. }
  165.  
  166. [class*="_collapsedContainer_"] [class*="_tagSelected_"] {
  167. background: #38bdf8;
  168. color: #080d1a;
  169. box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
  170. }
  171.  
  172. [class*="_navigationButton"] {
  173. background: #0f172a;
  174. border: 1px solid #0284c7;
  175. color: #ffffff;
  176. }
  177.  
  178. #root .react-select__control {
  179. background: #0f172a;
  180. border: 2px solid #0284c7 !important;
  181. }
  182.  
  183. #root .react-select__single-value {
  184. color: #ffffff;
  185. font-family: 'Cinzel', 'Georgia', serif;
  186. }
  187.  
  188. #root .react-select__dropdown-indicator svg {
  189. color: #0284c7;
  190. }
  191.  
  192. .profile-pagination-prev-hstack svg {
  193. color: #0284c7;
  194. }
  195.  
  196. .profile-badge-flex-outer {
  197. height: 45px;
  198. background: #080d1a !important;
  199. color: #0284c7 !important;
  200. box-shadow: 0 0 12px rgba(2, 132, 199, 0.4);
  201. border: none !important;
  202. border-bottom: 3px solid #38bdf8 !important;
  203. border-radius: 0;
  204. font-family: 'Cinzel', 'Georgia', serif;
  205. letter-spacing: 1px;
  206. text-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
  207. }
  208.  
  209. .profile-badge-flex-outer,
  210. .profile-badge-total-text::after {
  211. font-size: 1.0rem !important;
  212. }
  213.  
  214. .profile-badge-total-text {
  215. font-size: 0 !important;
  216. }
  217.  
  218. .profile-badge-total-text::after {
  219. content: "Potions Master Sanctum 🧪";
  220. letter-spacing: 1px;
  221. color: #ffffff;
  222. }
  223.  
  224. .profile-tabs-wrapper {
  225. visibility: hidden !important;
  226. }
  227. </style>
  228.  
  229. <style>
  230. .torn-paper {
  231. background-color: #080d1a !important;
  232. color: #ffffff !important;
  233. padding: 30px !important;
  234. border-radius: 6px !important;
  235. font-family: 'Georgia', serif !important;
  236. position: relative !important;
  237. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6) !important;
  238. margin: -9px auto !important;
  239. max-width: 100% !important;
  240. border: 3px solid #0284c7 !important;
  241. }
  242.  
  243. .torn-paper h3 {
  244. text-transform: uppercase !important;
  245. border-bottom: 2px solid #38bdf8 !important;
  246. margin-bottom: 15px !important;
  247. padding-bottom: 5px !important;
  248. color: #0284c7 !important;
  249. font-family: 'Cinzel', serif !important;
  250. }
  251. </style>
  252.  
  253. <div class="torn-paper">
  254. <h3>Experience is the Ultimate Teacher 🧪</h3>
  255. <p>In potion-making, as in combat, hesitation is fatal and foolishness is punished instantly. Follow the instructions precisely, respect the ingredients, and do not make me repeat myself. 🧪🗡️📜</p>
  256. </div>
  257.  
  258. <style>
  259. .torn-paper {
  260. position: relative !important;
  261. }
  262.  
  263. .torn-paper::before {
  264. content: "🧪🗡️ ˚₊‧" !important;
  265. position: absolute !important;
  266. top: 5px !important;
  267. left: 5px !important;
  268. font-size: 1.2rem !important;
  269. z-index: 1 !important;
  270. }
  271.  
  272. .torn-paper::after {
  273. content: "˙✧˖°📜 AUROR VIGILANCE! ༘ ⋆｡˚" !important;
  274. position: absolute !important;
  275. bottom: 5px !important;
  276. right: 5px !important;
  277. font-size: 1.2rem !important;
  278. z-index: 1 !important;
  279. }
  280. </style>
  281.  
  282. <div class="cafe-button-container">
  283. <a href="#" class="cafe-btn">Button</a>
  284. <a href="#" class="cafe-btn">Button</a>
  285. <a href="#" class="cafe-btn">Button</a>
  286. </div>
  287.  
  288. <style>
  289. .cafe-button-container {
  290. display: flex;
  291. justify-content: center;
  292. gap: 15px;
  293. margin: 20px 0;
  294. }
  295.  
  296. .cafe-btn {
  297. background: #080d1a !important;
  298. color: #0284c7 !important;
  299. padding: 10px 25px !important;
  300. border: 2px solid #0284c7 !important;
  301. border-radius: 25px !important;
  302. font-family: 'Cinzel', 'Georgia', serif !important;
  303. font-weight: bold !important;
  304. text-decoration: none !important;
  305. transition: 0.3s !important;
  306. box-shadow: 2px 4px 6px rgba(0,0,0,0.5) !important;
  307. }
  308.  
  309. .cafe-btn:hover {
  310. background: #0284c7 !important;
  311. color: #ffffff !important;
  312. border: 2px solid #38bdf8 !important;
  313. transform: translateY(-3px) !important;
  314. box-shadow: 0 0 15px rgba(2, 132, 199, 0.9) !important;
  315. cursor: pointer;
  316. }
  317. </style>
  318.  
  319. <div class="wood-divider"></div>
  320. <style>
  321. .wood-divider {
  322. width: 80%;
  323. height: 12px;
  324. margin: 20px auto;
  325. border-radius: 6px;
  326. background: repeating-linear-gradient(
  327. -45deg,
  328. #080d1a,
  329. #080d1a 12px,
  330. #0284c7 12px,
  331. #0284c7 24px,
  332. #38bdf8 24px,
  333. #38bdf8 36px
  334. );
  335. box-shadow: 0 2px 8px rgba(2, 132, 199, 0.6);
  336. }
  337. </style>
  338.  
  339. <div class="cork-board">
  340. <h2 class="board-title">Auror Directives & Potions Notes</h2>
  341. <div class="pinned-note">
  342. <p><strong>Classroom Protocol</strong><br>Keep dragonhide gloves equipped during brewing. Explosions due to carelessness will cost house points.</p>
  343. </div>
  344. <div class="pinned-note">
  345. <p><strong>Combat Readiness</strong><br>A potion is useless if you lack the composure to drink it under pressure. Train your mind as sharply as your wand.</p>
  346. </div>
  347. <div class="pinned-note">
  348. <p><strong>Auror Field Experience</strong><br>Dark wizards rarely offer second chances. Constant vigilance and preparation are non-negotiable.</p>
  349. </div>
  350. </div>
  351.  
  352. <style>
  353. .cork-board {
  354. background-color: #080d1a !important;
  355. border: 4px solid #0284c7 !important;
  356. padding: 20px !important;
  357. margin: 20px auto !important;
  358. max-width: 500px !important;
  359. box-shadow: 0 0 20px rgba(2, 132, 199, 0.7) !important;
  360. border-radius: 12px !important;
  361. }
  362.  
  363. .cork-board h2 {
  364. font-family: 'Cinzel', 'Georgia', serif !important;
  365. color: #0284c7 !important;
  366. font-size: 1.8rem !important;
  367. text-transform: uppercase !important;
  368. letter-spacing: 2px !important;
  369. text-align: center !important;
  370. text-shadow: 2px 2px #38bdf8 !important;
  371. margin: 0 !important;
  372. padding: 10px 0 !important;
  373. background: transparent !important;
  374. }
  375.  
  376. .pinned-note {
  377. background-color: #0f172a !important;
  378. color: #ffffff !important;
  379. padding: 15px !important;
  380. margin: 10px 0 !important;
  381. border-radius: 8px !important;
  382. font-family: 'Georgia', serif !important;
  383. border-left: 5px solid #38bdf8 !important;
  384. position: relative !important;
  385. box-shadow: 3px 3px 5px rgba(0,0,0,0.5) !important;
  386. }
  387.  
  388. .pinned-note::before {
  389. content: "🧪" !important;
  390. position: absolute !important;
  391. top: -12px !important;
  392. right: 15px !important;
  393. font-size: 1rem !important;
  394. }
  395. </style>
  396.  
  397. <div class="status-indicator">
  398. <div class="status-dot"></div>
  399. <span class="status-text">CAULDRON TEMPERATURE: OPTIMAL 🧪</span>
  400. </div>
  401.  
  402. <style>
  403. .status-indicator {
  404. position: absolute !important;
  405. top: 300px !important;
  406. left: 60px !important;
  407. display: flex !important;
  408. align-items: center !important;
  409. gap: 5px !important;
  410. background: rgba(8, 13, 26, 0.95) !important;
  411. padding: 6px 12px !important;
  412. border-radius: 15px !important;
  413. border: 1px solid #0284c7 !important;
  414. z-index: 10 !important;
  415. box-shadow: 0 0 12px rgba(2, 132, 199, 0.8) !important;
  416. }
  417.  
  418. .status-dot {
  419. width: 10px !important;
  420. height: 10px !important;
  421. background-color: #0284c7 !important;
  422. border-radius: 50% !important;
  423. box-shadow: 0 0 8px #0284c7 !important;
  424. }
  425.  
  426. .status-text {
  427. color: #ffffff !important;
  428. font-family: 'Cinzel', 'Georgia', serif !important;
  429. font-weight: bold !important;
  430. font-size: 0.8rem !important;
  431. }
  432.  
  433. @media (max-width: 768px) {
  434. .status-indicator {
  435. top: 300px !important;
  436. left: 5px !important;
  437. padding: 3px 6px !important;
  438. }
  439. .status-text {
  440. font-size: 0.7rem !important;
  441. }
  442. }
  443. </style>
  444.  
  445. <div class="wood-divider"></div>
  446.  
  447. <style>
  448. .profile-character-card-wrapper {
  449. margin-bottom: 0.5rem;
  450. transition: 500ms ease;
  451. }
  452. .profile-character-card-wrapper, .profile-character-card-wrapper > div:empty {
  453. background: transparent !important;
  454. box-shadow: none;
  455. }
  456. .profile-character-card-wrapper:hover {
  457. box-shadow: none;
  458. transform: translateY(-4px) scale(1.01);
  459. }
  460. .profile-character-card-stack {
  461. background: #080d1a;
  462. border: 2px solid #0284c7;
  463. border-radius: 15px;
  464. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  465. }
  466. .profile-character-card-stack-link-component {
  467. display: flex;
  468. flex-direction: column-reverse;
  469. flex-wrap: nowrap;
  470. justify-content: center;
  471. }
  472.  
  473. .profile-character-card-name-box {
  474. color: #0284c7;
  475. font-family: 'Cinzel', serif;
  476. font-size: 1.1rem;
  477. letter-spacing: 1px;
  478. text-transform: uppercase;
  479. text-shadow: 1px 1px 2px #38bdf8;
  480. text-align: center;
  481. }
  482.  
  483. .profile-character-card-stats-box {
  484. position: absolute;
  485. display: flex;
  486. top: -0.75rem;
  487. right: unset;
  488. align-content: center;
  489. align-items: center;
  490. justify-content: center;
  491. width: 100%;
  492. }
  493. .profile-character-card-stats-box * {
  494. width: 100%;
  495. }
  496. .profile-character-card-ribbon {
  497. position: static;
  498. overflow: visible;
  499. filter: none;
  500. }
  501. .profile-character-card-ribbon-wrap {
  502. padding: 0;
  503. clip-path: polygon(25% 0, 75% 0, 70% 50%, 75% 100%, 25% 100%, 30% 50%);
  504. box-shadow: none;
  505. background: #38bdf8;
  506. overflow: visible;
  507. border-radius: 0;
  508. transition: all 500ms;
  509. }
  510. .profile-character-cards-chat-count-tbmessages {
  511. display: none;
  512. }
  513. .profile-character-card-chats-count::before {
  514. content: "| 🧪 ";
  515. font-weight: normal;
  516. }
  517. .profile-character-card-chats-count::after {
  518. content: " Lessons |";
  519. font-weight: normal;
  520. }
  521. .profile-character-card-chats-count {
  522. text-align: center;
  523. color: #080d1a;
  524. font-family: 'Cinzel', 'Georgia', serif;
  525. font-weight: bold;
  526. }
  527.  
  528. .profile-character-card-avatar-aspect-ratio {
  529. margin: 10px;
  530. }
  531. .profile-character-card-avatar-image {
  532. border-radius: 8px;
  533. border: 2px solid #0284c7;
  534. }
  535.  
  536. .profile-character-card-creator-name-link {
  537. display: none;
  538. }
  539.  
  540. .profile-character-card-description-markdown-container * {
  541. font-family: 'Georgia', serif;
  542. color: #ffffff !important;
  543. text-align: center !important;
  544. }
  545.  
  546. .profile-character-card-star-line {
  547. border-color: #0284c7;
  548. }
  549. .profile-character-card-star {
  550. display: none;
  551. }
  552. .profile-character-card-star-line::after {
  553. content: "🧪🗡️";
  554. position: absolute;
  555. color: #0284c7;
  556. font-size: 0.9rem;
  557. right: -25px;
  558. top: -15px;
  559. }
  560.  
  561. .profile-character-card-tags ul {
  562. justify-content: center;
  563. padding-bottom: 10px;
  564. }
  565. .profile-character-card-tags-wrap:has(.profile-character-card-tag-limitless), .profile-character-card-tag-limitless {
  566. flex: 1 1 100%;
  567. width: 100%;
  568. }
  569. .profile-character-card-tags-wrap:has(.profile-character-card-tag-limitless) {
  570. padding-top: 2px;
  571. padding-bottom: 2px;
  572. background: rgba(2, 132, 199, 0.3);
  573. border-radius: 20px;
  574. }
  575. .profile-character-card-tag-limitless {
  576. border: none;
  577. font-size: 0;
  578. background: transparent;
  579. }
  580. .profile-character-card-tag-limitless::before, .profile-character-card-tag-limitless::after {
  581. font-size: 0.9rem;
  582. font-family: 'Cinzel', 'Georgia', serif;
  583. font-weight: bold;
  584. color: #0284c7;
  585. text-align: center;
  586. position: absolute;
  587. transition: opacity 500ms ease;
  588. }
  589. .profile-character-card-tag-limitless::before {
  590. content: "🧪 Master Potioneer Mastery";
  591. }
  592. .profile-character-card-tag-limitless::after {
  593. content: "🗡️ FORMER MINISTRY AUROR!";
  594. opacity: 0;
  595. }
  596. .profile-character-card-wrapper:hover .profile-character-card-tag-limitless::before {
  597. opacity: 0;
  598. }
  599. .profile-character-card-wrapper:hover .profile-character-card-tag-limitless::after {
  600. opacity: 1;
  601. transition-delay: 250ms;
  602. }
  603. .profile-character-card-tags-wrap:not(:has(.profile-character-card-tag-limitless)) {
  604. border: 1px solid #0284c7;
  605. border-radius: 15px;
  606. }
  607. .profile-character-card-tags-wrap a {
  608. display: flex;
  609. }
  610. .pp-cc-tags-regular {
  611. font-size: 0;
  612. display: inline;
  613. border: none !important;
  614. }
  615. .pp-cc-tags-regular::first-letter {
  616. font-size: 0.9rem;
  617. }
  618. .pp-cc-tags-item:hover:not(.profile-character-card-tag-limitless) {
  619. background: rgba(2, 132, 199, 0.3);
  620. }
  621. .pp-cc-tags-custom {
  622. border: none !important;
  623. color: #0284c7;
  624. font-family: 'Cinzel', 'Georgia', serif;
  625. font-weight: 600;
  626. }
  627.  
  628. .profile-character-card-tokens-count {
  629. color: #0284c7;
  630. text-shadow: none;
  631. font-family: 'Georgia', serif;
  632. font-weight: 500;
  633. }
  634.  
  635. .profile-character-card-box ~ div {
  636. display: none;
  637. }
  638. </style>
  639.  
  640. <div class="cafe-chalkboard-menu">
  641. <div class="chalkboard-frame">
  642. <div class="chalkboard-surface">
  643. <h3 class="chalk-title">Potions Master's Reserve ☕</h3>
  644. <ul class="chalk-items">
  645. <li>☕ Strong Black Coffee (Unsweetened)</li>
  646. <li>🧪 Vigorous Wiggenweld Tonic</li>
  647. <li>🥩 Thyme & Garlic Roasted Beef</li>
  648. <li>🍞 Crusty Dark Rye Bread</li>
  649. <li>🧀 Aged Sharp Cheddar Cheese</li>
  650. <li>🍵 Bittersweet Herbal Infusion</li>
  651. </ul>
  652. <div class="chalk-footer">"No nonsense. No distractions."</div>
  653. </div>
  654. </div>
  655. </div>
  656.  
  657. <style>
  658. .css-p641ht {
  659. background-color: #080d1a !important;
  660. border-bottom: 4px solid #0284c7 !important;
  661. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6) !important;
  662. }
  663.  
  664. .css-1qj3ulc {
  665. font-size: 0 !important;
  666. visibility: hidden !important;
  667. position: relative !important;
  668. display: inline-block !important;
  669. }
  670.  
  671. .css-1qj3ulc::after {
  672. content: "Prof.Sharp 🧪" !important;
  673. visibility: visible !important;
  674. font-family: 'Cinzel', serif !important;
  675. font-size: 1.6rem !important;
  676. font-weight: bold !important;
  677. color: #0284c7 !important;
  678. letter-spacing: 2px !important;
  679. text-shadow: 2px 2px 0px #38bdf8 !important;
  680. position: absolute !important;
  681. left: 0 !important;
  682. top: 50% !important;
  683. transform: translateY(-50%) !important;
  684. white-space: nowrap !important;
  685. }
  686.  
  687. .cafe-page-doll {
  688. position: fixed !important;
  689. bottom: 30px !important;
  690. right: 30px !important;
  691. z-index: 9999 !important;
  692. display: flex !important;
  693. flex-direction: column !important;
  694. align-items: center !important;
  695. pointer-events: auto !important;
  696. user-select: none !important;
  697. }
  698.  
  699. .doll-graphic {
  700. font-size: 3rem !important;
  701. line-height: 1 !important;
  702. filter: drop-shadow(3px 3px 0px #080d1a) !important;
  703. animation: dollFloat 3s ease-in-out infinite !important;
  704. }
  705.  
  706. .doll-steam {
  707. color: #0284c7 !important;
  708. font-family: Arial, sans-serif !important;
  709. font-size: 1.5rem !important;
  710. font-weight: bold !important;
  711. opacity: 0 !important;
  712. transform: translateY(10px) !important;
  713. animation: dollSteam 3s ease-in-out infinite !important;
  714. }
  715.  
  716. .doll-shadow {
  717. width: 30px !important;
  718. height: 6px !important;
  719. background: rgba(2, 132, 199, 0.5) !important;
  720. border-radius: 50% !important;
  721. margin-top: 5px !important;
  722. animation: dollShadow 3s ease-in-out infinite !important;
  723. }
  724.  
  725. @keyframes dollFloat {
  726. 0%, 100% { transform: translateY(0); }
  727. 50% { transform: translateY(-12px); }
  728. }
  729.  
  730. @keyframes dollShadow {
  731. 0%, 100% { transform: scale(1); opacity: 0.5; }
  732. 50% { transform: scale(0.7); opacity: 0.2; }
  733. }
  734.  
  735. @keyframes dollSteam {
  736. 0% { transform: translateY(5px) scale(0.8); opacity: 0; }
  737. 50% { opacity: 0.8; }
  738. 100% { transform: translateY(-15px) scale(1.2); opacity: 0; }
  739. }
  740.  
  741. .cafe-chalkboard-menu {
  742. margin: 25px auto !important;
  743. max-width: 480px !important;
  744. width: 300% !important;
  745. box-sizing: border-box !important;
  746. }
  747.  
  748. .chalkboard-frame {
  749. background: #080d1a !important;
  750. border: 4px solid #0284c7 !important;
  751. border-radius: 8px !important;
  752. padding: 10px !important;
  753. box-shadow: 0 0 15px rgba(2, 132, 199, 0.5) !important;
  754. }
  755.  
  756. .chalkboard-surface {
  757. background: #0f172a !important;
  758. border: 1px dashed #0284c7 !important;
  759. padding: 15px !important;
  760. text-align: center !important;
  761. }
  762.  
  763. .chalk-title {
  764. color: #0284c7 !important;
  765. font-family: 'Cinzel', serif !important;
  766. font-size: 1.2rem !important;
  767. text-transform: uppercase !important;
  768. letter-spacing: 1px !important;
  769. border-bottom: 1px solid rgba(56, 189, 248, 0.6) !important;
  770. padding-bottom: 8px !important;
  771. margin-bottom: 12px !important;
  772. }
  773.  
  774. .chalk-items {
  775. list-style: none !important;
  776. padding: 0 !important;
  777. margin: 0 !important;
  778. }
  779.  
  780. .chalk-items li {
  781. color: #ffffff !important;
  782. font-family: 'Georgia', serif !important;
  783. font-size: 0.95rem !important;
  784. margin: 8px 0 !important;
  785. text-align: left !important;
  786. }
  787.  
  788. .chalk-footer {
  789. color: #38bdf8 !important;
  790. font-family: 'Georgia', serif !important;
  791. font-size: 0.85rem !important;
  792. font-style: italic !important;
  793. margin-top: 15px !important;
  794. }
  795.  
  796. @media (max-width: 768px) {
  797.  
  798. .css-1qj3ulc::after {
  799. font-size: 1.3rem !important;
  800. }
  801.  
  802. .cafe-page-doll {
  803. bottom: 15px !important;
  804. right: 15px !important;
  805. transform: scale(0.8) !important;
  806. opacity: 0.8 !important;
  807. }
  808.  
  809. .cafe-chalkboard-menu {
  810. max-width: 90% !important;
  811. padding: 0 10px !important;
  812. }
  813. }
  814. </style>
  815.  
  816. <style>
  817. .profile-top-bar {
  818. background: rgba(8, 13, 26, 0.95);
  819. backdrop-filter: blur(5px);
  820. box-shadow: none;
  821. border-bottom: 3px solid #0284c7;
  822. }
  823. .profile-top-box-flex-inner, .profile-top-bar-logo-box {
  824. min-width: fit-content;
  825. }
  826.  
  827. .profile-top-bar-logo-name:hover { text-shadow: none; }
  828. .profile-top-bar-logo { background: transparent; }
  829.  
  830. .pp-uc-followers-count span + span { font-size:0; }
  831.  
  832. .pp-uc-followers-count span + span::after {
  833. content: "Auror Recruits";
  834. font-size:1rem;
  835. }
  836.  
  837. .sonner-toast-container [data-sonner-toast][data-type=success]{
  838. background: #080d1a!important;
  839. color: #0284c7!important;
  840. border: 2px solid #38bdf8!important;
  841. }
  842. </style>
Tags: hogwarts legacy 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!