API tools faq
paste
Guest User

Untitled

a guest
Nov 14th, 2025
56
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.48 KB | Source Code | 0 0
raw download clone embed print report
  1. /* ------------------------------
  2.    GLOBAL STYLES & BACKGROUND
  3. ------------------------------ */
  4.  
  5. /* Set custom cursor and apply layered background images (animated + static) */
  6. body {
  7.   cursor: url("https://img.itch.zone/aW1nLzIzNjU3NTc1LnBuZw==/original/T1p4KV.png"), auto;
  8.   background-image:
  9.     url('https://img.itch.zone/aW1nLzIyNjYzNzAyLmdpZg==/original/4iy%2Bz9.gif'), /* Top animated layer */
  10.     url('https://img.itch.zone/aW1nLzIyNjYzNDYzLmpwZw==/original/scC%2BSI.jpg');  /* Base static layer */
  11.   background-size:
  12.     calc(max(100vw, 1920px)) calc(max(100vh, 1080px)), /* Ensure minimum Full HD scaling */
  13.     calc(max(100vw, 1920px)) calc(max(100vh, 1080px));
  14.   background-attachment: fixed, fixed;
  15.   background-position: center, center;
  16.   background-repeat: no-repeat, no-repeat;
  17. }
  18.  
  19. /* Adjust background layout for smaller screens */
  20. @media (max-width: 600px) {
  21.   body {
  22.     background-position: center top;
  23.     background-size:
  24.       cover, /* Top layer fills screen */
  25.       calc(max(100vw, 1920px)) calc(max(100vh, 1080px)); /* Base layer remains fixed */
  26.   }
  27. }
  28.  
  29. /* Overlay top layer image above all content */
  30. body::before {
  31.   content: "";
  32.   position: fixed;
  33.   top: 0;
  34.   left: 0;
  35.   width: 100vw;
  36.   height: 100vh;
  37.   background-image: url('https://img.itch.zone/aW1nLzI0MDg0MjQ0LnBuZw==/original/H1AlPz.png');
  38.   background-size: calc(max(100vw, 1920px)) calc(max(100vh, 1080px));
  39.   background-attachment: fixed;
  40.   background-position: center;
  41.   background-repeat: no-repeat;
  42.   z-index: 1;
  43.   pointer-events: none; /* Prevents blocking interaction with content below */
  44. }
  45.  
  46.  
  47. /* ------------------------------
  48.    USER LINK STYLING
  49. ------------------------------ */
  50.  
  51. /* Layout for user links container */
  52. .user_links {
  53.   display: flex;
  54.   justify-content: center;
  55.   flex-wrap: wrap;
  56.   gap: 10px;
  57. }
  58.  
  59. /* Styling for individual user links */
  60. .user_links a {
  61.   display: inline-block;
  62.   margin: 0 5px;
  63.   text-decoration: none;
  64.   transition: transform 200ms ease, filter 150ms ease;
  65.   cursor: url("https://img.itch.zone/aW1nLzIzNjU3NTgxLnBuZw==/original/wVvaPK.png"), pointer;
  66. }
  67.  
  68. /* Hover and active effects for links */
  69. .user_links a:hover,
  70. a:hover {
  71.   cursor: url("https://img.itch.zone/aW1nLzIzNjU3NTgxLnBuZw==/original/wVvaPK.png"), pointer;
  72.   transform: scale(1.05);
  73.   filter: brightness(1.02);
  74. }
  75.  
  76. .user_links a:active,
  77. a:active {
  78.   cursor: grabbing;
  79.   transform: scale(1.02);
  80. }
  81.  
  82.  
  83. /* ------------------------------
  84.    IMAGE HOVER EFFECTS
  85. ------------------------------ */
  86.  
  87. /* Slight zoom effect when hovering over images */
  88. .formatted img:hover {
  89.   z-index: 2;
  90.   transition: transform 200ms ease;
  91.   transform: scale(1.04);
  92. }
  93.  
  94.  
  95. /* ------------------------------
  96.    TEXT SPLIT LAYOUT
  97. ------------------------------ */
  98.  
  99. /* Wrapper for 30/70 text layout */
  100. .custom-text-split-wrapper {
  101.   text-align: center;
  102.   max-width: 1000px;
  103.   margin: 1px auto;
  104.   padding: 1px;
  105.   box-sizing: border-box;
  106. }
  107.  
  108. /* Left and right column styles */
  109. .custom-text-split-left,
  110. .custom-text-split-right {
  111.   display: inline-block;
  112.   vertical-align: top;
  113.   box-sizing: border-box;
  114.   padding: 1px;
  115.   text-align: center;
  116. }
  117.  
  118. /* Widths for desktop layout */
  119. .custom-text-split-left { width: 30%; }
  120. .custom-text-split-right { width: 65%; }
  121.  
  122. /* Add spacing between columns on wider screens */
  123. @media (min-width: 760px) {
  124.   .custom-text-split-left { margin-right: 4%; }
  125. }
  126.  
  127.  
  128. /* ------------------------------
  129.    READ MORE TOGGLE
  130. ------------------------------ */
  131.  
  132. /* Mask content when spoiler is collapsed */
  133. .custom-read-more:has(> details:not([open])) > .custom-content {
  134.   max-height: 5.5em;
  135.   --mask: linear-gradient(to bottom, black 50%, transparent);
  136.   -webkit-mask-image: var(--mask);
  137.   mask-image: var(--mask);
  138. }
  139.  
  140. /* Reveal full content when spoiler is open */
  141. .custom-read-more:has(> details[open]) > .custom-content {
  142.   max-height: unset !important;
  143. }
  144.  
  145. /* Summary styling for read-more toggle */
  146. .custom-read-more > details > summary {
  147.   display: flex;
  148.   width: min-content;
  149.   margin-top: 0.5em;
  150.   white-space: nowrap;
  151.   color: var(--l);
  152.   text-decoration: 1px underline;
  153.   cursor: pointer;
  154. }
  155.  
  156. /* Remove default triangle marker */
  157. .custom-read-more > details > summary::-webkit-details-marker {
  158.   display: none;
  159. }
  160.  
  161. /* Custom label for collapsed state */
  162. .custom-read-more > details > summary::after {
  163.   content: var(--read-more-cls, "Read more...");
  164. }
  165.  
  166. /* Custom label for expanded state */
  167. .custom-read-more > details[open] > summary::after {
  168.   content: var(--read-more-opn, "Read less...");
  169. }
  170.  
  171. /* Indent summary if preceded by a list */
  172. .custom-read-more > .custom-tl-list + details > summary {
  173.   padding-left: 1em;
  174. }
  175.  
  176. /* Center summary toggle */
  177. .custom-read-more.custom-center > details > summary {
  178.   margin-left: auto;
  179.   margin-right: auto;
  180. }
  181.  
  182. /* Right-align summary toggle */
  183. .custom-read-more.custom-right > details > summary {
  184.   margin-left: auto;
  185. }
  186.  
  187. /* Hide toggle after opening once */
  188. .custom-read-more.custom-once > details[open] {
  189.   display: none;
  190. }
  191.  
  192.  
  193. /* ------------------------------
  194.    SPOILER TOGGLE
  195. ------------------------------ */
  196.  
  197. /* Remove triangle and center image toggle */
  198. .custom-spoiler summary {
  199.   list-style: none;
  200.   cursor: pointer;
  201.   text-align: center;
  202. }
  203.  
  204. /* Visual cue when spoiler is open */
  205. .custom-spoiler[open] summary img {
  206.   filter: brightness(0.8);
  207.   transform: scale(0.98);
  208.   transition: all 200ms ease;
  209. }
  210.  
  211. /* Remove triangle globally */
  212. summary {
  213.   list-style: none;
  214. }
  215.  
  216.  
  217. /* ------------------------------
  218.    CODE BLOCK STYLING
  219. ------------------------------ */
  220.  
  221. /* Style for displaying code snippets */
  222. .custom-code-block {
  223.   background: rgba(0, 0, 0, 0.7);
  224.   color: #e0e0e0;
  225.   font-family: monospace;
  226.   font-size: 0.9em;
  227.   padding: 1em;
  228.   border-radius: 6px;
  229.   overflow-x: auto;
  230.   white-space: pre-wrap;
  231.   word-break: break-word;
  232.   margin: 1em auto;
  233.   max-width: 90%;
  234.   box-shadow: 0 0 8px rgba(0,0,0,0.4);
  235. }
  236.  
  237.  
  238. /* ------------------------------
  239.    MOBILE TEXT SPLIT ADJUSTMENTS
  240. ------------------------------ */
  241.  
  242. @media (max-width: 759px) {
  243.   .custom-text-split-left,
  244.   .custom-text-split-right {
  245.     display: block;
  246.     width: 92%;
  247.     margin: 0 auto 18px auto;
  248.     text-align: center;
  249.   }
  250.  
  251.   .custom-text-split-left p,
  252.   .custom-text-split-right p {
  253.     text-align: left;
  254.     margin: 0 4%;
  255.   }
  256.  
  257.   .custom-text-split-left h1,
  258.   .custom-text-split-right h1,
  259.   .custom-text-split-left h2,
  260.   .custom-text-split-right h2 {
  261.     text-align: center;
  262.   }
  263. }
  264.  
Tags: CSS itch
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!