API tools faq
paste
Advertisement
Zeppasaurus

Cherry Blossom CSS

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