API tools faq
paste
Zeppasaurus

Dissolve Me CSS

Zeppasaurus
Feb 14th, 2022 (edited)
141
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.98 KB | None | 0 0
raw download clone embed print report
  1. @import url('https://fonts.googleapis.com/css2?family=Chonburi&display=swap'); /* NAMEFONT AND H1FONT */
  2. @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap'); /* BODYFONT AND SANS FONT */
  3. @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap'); /* SERIFFONT */
  4. @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@100&display=swap'); /* H2FONT AND H3FONT */
  5. @import url('https://fonts.googleapis.com/css2?family=Philosopher:ital@1&display=swap'); /* H4FONT */
  6. @import url('https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap'); /* H5FONT */
  7. @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300&display=swap'); /* H6FONT MONOFONT EMPHASIS TOOLTIPFONT */
  8. /* NEW FONTS GO ABOVE THIS LINE */
  9.  
  10.  
  11. /* VARIABLES FOR EASY STYLING */
  12. :root {
  13. --mainbgcolor: #d3d7db;
  14. --mainbgimg: url(https://img.nickpic.host/ut7QDp.jpg);
  15.  
  16. --scrollbar: #d3d7db;
  17. --scrollbartrack: rgba(86, 110, 125, .5);
  18.  
  19. --boxborder: 5px solid #566e7d;
  20. --boxbg: #d3d7db;
  21.  
  22. --bodyfont: 'Nunito Sans', sans-serif;
  23. --bodycolor: #000000;
  24. --bodyletter: 1.1px;
  25.  
  26. --linkcolor: #6aa7c4;
  27. --linkhovercolor: #27576e;
  28.  
  29. --nameflex: 150%;
  30. --namefont: 'Chonburi', cursive;
  31. --namecolor: rgba(255, 255, 255, 1);
  32. --nameoomph: uppercase;
  33. --nameletter: 3px;
  34.  
  35. --h1flex: 3vh;
  36. --h1font: 'Chonburi', cursive;
  37. --h1color: rgba(29, 31, 35, .7);
  38. --h1oomph: uppercase;
  39. --h1letter: 2px;
  40.  
  41. --h2font: 'Libre Franklin', sans-serif;
  42. --h2color: #566e7d;
  43. --h2border: 1px solid rgba(86, 110, 125, .5);
  44. --h2oomph: uppercase;
  45. --h2letter: 3px;
  46.  
  47. --h3font: 'Libre Franklin', sans-serif;
  48. --h3color: #566e7d;
  49. --h3border: 1px solid rgba(86, 110, 125, .5);
  50. --h3oomph: uppercase;
  51. --h3letter: 3px;
  52.  
  53. --h4font: 'Philosopher', sans-serif;
  54. --h4color: rgba(77, 99, 113, .7);
  55. --h4oomph: uppercase;
  56. --h4letter: 2px;
  57.  
  58. --h5font: 'Teko', sans-serif;
  59. --h5color: rgba(77, 99, 113, .7);
  60. --h5oomph: uppercase;
  61. --h5letter: 1.5px;
  62.  
  63. --h6font: 'IBM Plex Mono', monospace;
  64. --h6color: rgba(77, 99, 113, .85);
  65. --h6oomph: uppercase;
  66. --h6letter: 1.5px;
  67.  
  68. --fontxxxxl: 15pt;
  69. --fontxxxl: 14pt;
  70. --fontxxl: 13pt;
  71. --fontxl: 12pt;
  72. --fontl: 11pt;
  73. --fontm: 10pt;
  74. --fonts: 9pt;
  75. --fontxs: 8pt;
  76. --fontxxs: 7pt;
  77.  
  78. --sansfont: 'Nunito Sans', sans-serif;
  79. --seriffont: 'Merriweather', serif;
  80. --monofont: 'IBM Plex Mono', monospace;
  81. --emphasis: 'IBM Plex Mono', monospace;
  82. --strong: uppercase;
  83. --hr: 1px solid #566e7d;
  84.  
  85. --tooltipbg: #FFFFFF;
  86. --tooltipfont: 'IBM Plex Mono', monospace;
  87. --tooltipcolor: #000000;
  88. --tooltiphover: #72909f;
  89. --tooltipspan: 'IBM Plex Mono', monospace;
  90. --tooltipspancolor: #000000;
  91. --tooltipletter: 1px;
  92.  
  93. --tooltipimgtop: 560px;
  94. --tooltipimgleft: 170%;
  95. --tooltiptop: 545px;
  96. }
  97.  
  98.  
  99. /* THE ACTUAL CSS */
  100. body {
  101. background-color: var(--mainbgcolor);
  102. background-image: var(--mainbgimg);
  103. background-repeat: no-repeat;
  104. background-attachment: fixed;
  105. background-size: contain;
  106. background-size: cover;
  107. position: fixed;
  108. color: var(--bodycolor);
  109. text-align: center;
  110. font-family: var(--bodyfont);
  111. font-size: var(--fontxl);
  112. }
  113.  
  114. a:link, a:visited, a:active {
  115. color: var(--linkcolor);
  116. }
  117.  
  118. a:hover {
  119. text-decoration: none;
  120. color: var(--linkhovercolor);
  121. }
  122.  
  123. h1 {
  124. font-family: var(--h1font);
  125. font-size: var(--h1flex);
  126. color: var(--h1color);
  127. font-style: bold;
  128. letter-spacing: var(--h1letter);
  129. margin-top: -10px;
  130. text-transform: var(--h1oomph);
  131. text-align: center;
  132. }
  133.  
  134. h2 {
  135. font-family: var(--h2font);
  136. font-size: var(--fonts);
  137. color: var(--h2color);
  138. text-transform: var(--h2oomph);
  139. font-weight: 650;
  140. letter-spacing: var(--h2letter);
  141. border-bottom: var(--h2border);
  142. padding: 0px 0px;
  143. text-align: left;
  144. }
  145.  
  146. h3 {
  147. display: flex;
  148. font-size: var(--fonts);
  149. align-items: center;
  150. font-family: var(--h3font);
  151. color: var(--h3color);
  152. line-height: 160%;
  153. font-weight: 650;
  154. text-transform: var(--h3oomph);
  155. letter-spacing: var(--h3letter);
  156. margin: 12px 0px;
  157. width: fit-content;
  158. width: -moz-fit-content;
  159. position: relative;
  160. text-align: left;
  161. }
  162.  
  163. h3::before {
  164. content: '';
  165. border-bottom: var(--h3border);
  166. position: absolute;
  167. width: calc(100%);
  168. bottom: 0px;
  169. left: 0px;
  170. }
  171.  
  172. h4 {
  173. font-family: var(--h4font);
  174. font-size: var(--fontxl);
  175. color: var(--h4color);
  176. text-transform: var(--h4oomph);
  177. margin: 5px 0px;
  178. margin-left: -2px;
  179. letter-spacing: var(--h4letter);
  180. }
  181.  
  182. h5 {
  183. font-family: var(--h5font);
  184. font-size: var(--fontxxxl);
  185. color: var(--h5color);
  186. text-transform: var(--h5oomph);
  187. margin: 5px 0px;
  188. letter-spacing: var(--h5letter);
  189. }
  190.  
  191. h6 {
  192. font-family: var(--h6font);
  193. font-size: var(--fonts);
  194. color: var(--h6color);
  195. text-transform: var(--h6oomph);
  196. margin: 5px 0px;
  197. letter-spacing: var(--h6letter);
  198. }
  199.  
  200. emphasis, em {
  201. font-family: var(--emphasis);
  202. }
  203.  
  204. strong {
  205. text-transform: var(--strong);
  206. }
  207.  
  208. .serif {
  209. font-family: var(--seriffont);
  210. font-size: var(--fonts);
  211. }
  212.  
  213. hr {
  214. border: var(--hr);
  215. }
  216.  
  217. .box1::-webkit-scrollbar, .box2::-webkit-scrollbar, .box3::-webkit-scrollbar {
  218. width: 12px;
  219. }
  220.  
  221. .box1::-webkit-scrollbar-track, .box2::-webkit-scrollbar-track, .box3::-webkit-scrollbar-track {
  222. background: var(--scrollbar);
  223. }
  224.  
  225. .box1::-webkit-scrollbar-thumb, .box2::-webkit-scrollbar-thumb, .box3::-webkit-scrollbar-thumb {
  226. background-color: var(--scrollbartrack);
  227. }
  228.  
  229. .container {
  230. position: fixed;
  231. top: 7%;
  232. bottom: 5%;
  233. left: 5%;
  234. right: 5%;
  235. margin: auto;
  236. width: 70%;
  237. height: 85%;
  238. }
  239.  
  240. .name {
  241. margin-top: -10px;
  242. margin-left: 0px;
  243. position: absolute;
  244. padding: 22px;
  245. width: 1%;
  246. max-height: 550px;
  247. }
  248.  
  249. .name p {
  250. font-family: var(--namefont);
  251. font-size: var(--nameflex);
  252. color: var(--namecolor);
  253. letter-spacing: var(--nameletter);
  254. text-transform: var(--nameoomph);
  255. writing-mode: vertical-rl;
  256. transform: rotate(-180deg);
  257. margin-left: 90%;
  258. }
  259.  
  260. .box1 {
  261. font-family: var(--bodyfont);
  262. font-size: var(--fontm);
  263. text-align: justify;
  264. margin-top: -17px;
  265. margin-left: 62px;
  266. margin-right: 36%;
  267. letter-spacing: var(--bodyletter);
  268. background-color: var(--boxbg);
  269. border: var(--boxborder);
  270. position: absolute;
  271. padding: 40px;
  272. overflow: auto;
  273. max-width: 100%;
  274. height: 525px;
  275. }
  276.  
  277. .box2 {
  278. font-family: var(--bodyfont);
  279. font-size: var(--fontm);
  280. text-align: justify;
  281. margin-left: 65%;
  282. margin-top: -17px;
  283. margin-bottom: 14px;
  284. letter-spacing: var(--bodyletter);
  285. background-color: var(--boxbg);
  286. border: var(--boxborder);
  287. position: sticky;
  288. padding: 40px;
  289. overflow-x: hidden;
  290. overflow-y: auto;
  291. max-width: auto;
  292. height: 212px;
  293. }
  294.  
  295. .box2 img {
  296. display: block;
  297. margin-left: auto;
  298. margin-right: auto;
  299. margin-top: 13px;
  300. margin-bottom: 23px;
  301. border-radius: 50%;
  302. width: 42%;
  303. }
  304.  
  305. .box3 {
  306. font-family: var(--bodyfont);
  307. font-size: var(--fontm);
  308. text-align: justify;
  309. margin-top: 9px;
  310. margin-left: 65%;
  311. letter-spacing: var(--bodyletter);
  312. background-color: var(--boxbg);
  313. border: var(--boxborder);
  314. position: sticky;
  315. padding: 40px;
  316. overflow-x: hidden;
  317. overflow-y: auto;
  318. max-width: auto;
  319. height: 209px;
  320. }
  321.  
  322. .box3 img {
  323. width: 31%;
  324. margin-left: 3%;
  325. height: auto;
  326. padding: 10px;
  327. float: left;
  328. border-radius: 50%;
  329. }
  330.  
  331. .box3alt img {
  332. width: 31%;
  333. margin-right: 3%;
  334. height: auto;
  335. padding: 10px;
  336. float: right;
  337. border-radius: 50%;
  338. }
  339.  
  340. .tooltip {
  341. position: relative;
  342. display: inline-block;
  343. position: fixed;
  344. top: 45px;
  345. left: 10%;
  346. width: 4%;
  347. height: auto;
  348. z-index: 1 !important;
  349. }
  350.  
  351. .tooltip img {
  352. max-width: 70px;
  353. margin-top: var(--tooltipimgtop);
  354. margin-left: var(--tooltipimgleft);
  355. height: auto;
  356. position: absolute;
  357. z-index: 1 !important;
  358. opacity: .9;
  359. }
  360.  
  361. .tooltip .tooltiptext {
  362. margin-top: var(--tooltiptop);
  363. visibility: hidden;
  364. width: 160px;
  365. background-color: var(--tooltipbg);
  366. color: var(--tooltipcolor);
  367. text-align: center;
  368. padding: 5px 5px;
  369. border-radius: 6px;
  370. position: absolute;
  371. z-index: 1;
  372. }
  373.  
  374. .tooltip a:link, .tooltip a:visited, .tooltip a:active {
  375. font-family: var(--tooltipfont);
  376. font-size: 7pt;
  377. text-align: center;
  378. text-decoration: none;
  379. letter-spacing: var(--tooltipletter);
  380. color: var(--tooltipcolor);
  381. }
  382.  
  383. .tooltip a:hover {
  384. text-decoration: underline;
  385. color: var(--tooltiphover);
  386. }
  387.  
  388. .tooltip span {
  389. font-family: var(--tooltipspan);
  390. font-size: 7pt;
  391. text-align: center;
  392. text-decoration: none;
  393. letter-spacing: var(--tooltipletter);
  394. color: var(--tooltipspancolor);
  395. }
  396.  
  397. .tooltip:hover .tooltiptext {
  398. visibility: visible;
  399. }
  400.  
  401. div#fpaw_layout_column_2 {
  402. overflow: visible;
  403. }
  404.  
  405. div#fpaw_layout_holder {
  406. top: -11350px;
  407. float: none;
  408. position: relative;
  409. margin: 0px 0px 0px 0px;
  410. left: 0px;
  411. float: left;
  412. }
  413.  
  414. .text_logout, #fpaw_layout_column_1, fpaw_layout_column_3, #top_bar, #fpaw_layout_footer, #fpaw_layout_inner_footer, #fpaw_layout_footer_text, .footer_legal, fpaw_layout_footer_section, .fpaw_layout_footer_subsection {
  415. display: none;
  416. }
  417.  
  418. @media only screen and (max-height: 600px) {
  419. .box1 {
  420. height: 440px;
  421. }
  422. .box2 {
  423. height: 168px;
  424. }
  425. .box3 {
  426. height: 169px;
  427. }
  428. }
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!