althindor

Pro for Lil Red Opal

Jun 21st, 2021
791
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Layout by Mule of CD-ARIAx3 */
  2. /* + Profile Code by AlthIndor */
  3.  
  4. html, body {
  5.   background: url('https://i.ibb.co/R9yK3Qr/lil-red-opal-wallpaper.jpg') top center / cover #FFFFFF;
  6.   min-height: 1100px;
  7.   overflow-x: hidden;
  8. }
  9.  
  10. body a {
  11.   text-decoration: none !important;
  12.   transition: color .5s ease-in-out;
  13. }
  14.  
  15. ::selection {
  16.   background: #A0FFFF;
  17.   color: #000040;
  18. }
  19.  
  20. /* Fonts */
  21.  
  22. @font-face {
  23.   font-family: 'Open Sans';
  24.   font-style: normal;
  25.   font-weight: 400;
  26.   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  27. }
  28.  
  29. @font-face {
  30.   font-family: 'Open Sans';
  31.   font-style: normal;
  32.   font-weight: 700;
  33.   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
  34. }
  35.  
  36. @font-face {
  37.   font-family: 'Itim';
  38.   font-style: normal;
  39.   font-weight: 400;
  40.   src: local('Itim'), url('https://fonts.gstatic.com/s/itim/v5/0nknC9ziJOYe8ANAkA.woff2') format('woff2');
  41. }
  42.  
  43. @font-face {
  44.   font-family: 'Font Awesome 5 Free';
  45.   font-style: normal;
  46.   font-weight: 900;
  47.   font-display: block;
  48.   src: url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-solid-900.woff2') format('woff2'), url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-solid-900.woff') format('woff');
  49. }
  50.  
  51. /* Header */
  52.  
  53. #gaia_header, #header_left, #header_right {box-sizing: border-box;}
  54. #gaia_header li.spacer {display: none !important;}
  55.  
  56. #viewer #gaia_header {
  57.   background: darkslateblue !important;
  58.   height: 30px !important;
  59.   box-shadow: 0 3px 1px #6A5ACD40;
  60. }
  61.  
  62. #gaia_header #header_left, #gaia_header #header_right {
  63.   background: none !important;
  64.   font: 400 0/28px 'itim', cursive !important;
  65.   padding: 0 8px !important;
  66. }
  67. #gaia_header #header_right {float: right;}
  68.  
  69. #gaia_header img {
  70.  -webkit-mask: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 4px;
  71.   mask: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 4px;
  72.   background: #FFFFFF;
  73.   width: 0;
  74.   padding: 0 34px 0 0;
  75.   transition: background .5s ease-in-out;
  76. }
  77. #header_left li:nth-of-type(n+2) a:hover img {background: mistyrose;}
  78.  
  79. #gaia_header a {
  80.   color: #FFFFFF !important;
  81.   font-size: 12px !important;
  82.   font-weight: 400;
  83.   letter-spacing: .05em;
  84.   text-transform: lowercase;
  85. }
  86. #gaia_header a:hover {color: mistyrose !important;}
  87.  
  88. #header_left li:nth-of-type(n+3)::before, #header_right li:nth-of-type(n+2)::before {
  89.   content: '✮';
  90.   color: gold;
  91.   font-size: 10px;
  92.   margin: 0 6px;
  93. }
  94.  
  95. #header_right a[href*='edit'], #header_right a[href*='report'] {font-size: 0 !important;}
  96. #header_right a[href*='edit']::before, #header_right a[href*='report']::before {font-size: 12px;}
  97. #header_right a[href*='edit']::before {content: 'Edit My Profile';}
  98. #header_right a[href*='report']::before {content: 'Report Profile';}
  99.  
  100. /* Columns */
  101.  
  102. #columns, #columns .column {
  103.   float: none;
  104.   margin: 0;
  105. }
  106. #columns .column {position: absolute;}
  107.  
  108. #column_1, #column_2 {
  109.   width: 100%;
  110.   height: 100%;
  111.   top: 0;
  112.   left: 0;
  113. }
  114. #column_1 {display: block;}
  115.  
  116. #columns {
  117.   background: url('https://i.ibb.co/HrSdCDp/lil-red-opal-layout.png');
  118.   width: 1500px;
  119.   height: 1060px;
  120.   top: 30px;
  121.   left: calc(50% - 750px);
  122.   transform: translateZ(0);
  123. }
  124.  
  125. #column_3 {
  126.   width: 348px;
  127.   height: 412px;
  128.   top: 466px;
  129.   left: 805px;
  130.   box-sizing: border-box;
  131. }
  132.  
  133. /* Scrollbars */
  134.  
  135. #columns ::-webkit-scrollbar {
  136.   background: #6A5ACD40;
  137.   width: 6px;
  138. }
  139. #columns ::-webkit-scrollbar-thumb {background: slateblue;}
  140.  
  141. .panel, dl {
  142.   scrollbar-color: slateblue #6A5ACD40;
  143.   scrollbar-width: thin;
  144. }
  145.  
  146. #id_wishlist::-webkit-scrollbar {width: 0;}
  147. #id_wishlist {scrollbar-width: none;}
  148.  
  149. /* Panels */
  150.  
  151. .panel, .panel h2 {
  152.   background: none;
  153.   padding: 0;
  154.   margin: 0;
  155. }
  156.  
  157. .panel a {color: inherit;}
  158. .panel a:hover {color: slateblue;}
  159.  
  160. .panel {
  161.   color: #000040;
  162.   font: 10px/1.6 'Open Sans', sans-serif;
  163.   text-align: center;
  164.   position: absolute;
  165.   box-sizing: border-box;
  166.   overflow: hidden;
  167. }
  168.  
  169. #column_3 .panel {
  170.   width: 100%;
  171.   height: 100%;
  172.   top: -100%;
  173.   left: 0;
  174.   border: 30px solid transparent;
  175. }
  176. #column_3 .panel:hover {top: 0;}
  177.  
  178. #id_about, #id_comments dl, #id_signature {
  179.   padding-right: 10px;
  180.   overflow-y: scroll;
  181. }
  182.  
  183. #id_about, #id_comments {text-align: justify;}
  184. #id_about img, #id_comments .postcontent img {max-width: 100%;}
  185. #id_about a, #id_comments .postcontent a {text-decoration: dotted underline !important;}
  186.  
  187. /* Panel Headers */
  188.  
  189. .panel h2 {
  190.   color: #FFFCD8;
  191.   font: 700 0/1 'Itim', cursive;
  192.   text-transform: unset;
  193.   position: fixed;
  194. }
  195. #id_details h2, #id_contact h2, .media_panel h2 {display: none;}
  196.  
  197. .panel h2::before, .panel h2::after {
  198.   font-size: 18px;
  199.   letter-spacing: .05em;
  200.   white-space: nowrap;
  201.   position: absolute;
  202.   top: 0;
  203.   left: 0;
  204. }
  205.  
  206. .panel h2::before {
  207.  -webkit-text-stroke: 5px #F8C4AC;
  208.   color: #F8C4AC;
  209. }
  210.  
  211. #column_3 h2 {
  212.   width: 168px;
  213.   height: 108px;
  214.   right: 167px;
  215.   border-left: 0px solid transparent;
  216. }
  217. #column_3 .panel:hover h2 {border-left-width: 30px;}
  218.  
  219. #id_about h2 {top: 562px;}
  220. #id_comments h2 {top: 670px;}
  221. #id_signature h2 {top: 778px;}
  222.  
  223. #column_3 h2::before, #column_3 h2::after {
  224.   width: 100%;
  225.   font-size: 18px;
  226.   line-height: 130px;
  227.   text-align: center;
  228.   transition: all .5s ease-in-out;
  229. }
  230. #column_3 h2::before {text-shadow: 4px 4px #6A5ACD40;}
  231.  
  232. #column_3 .panel:hover h2::before {
  233.   color: lightcoral;
  234.   -webkit-text-stroke-color: lightcoral;
  235. }
  236. #column_3 .panel:hover h2::after {color: #FFFFFF;}
  237.  
  238. #id_about h2::before, #id_about h2::after {content: 'Know More!';}
  239. #id_comments h2::before, #id_comments h2::after {content: 'Talk To Me?';}
  240. #id_signature h2::before, #id_signature h2::after {content: 'My Siggy!';}
  241.  
  242. /* Details */
  243.  
  244. #id_details {
  245.   width: 120px;
  246.   top: 296px;
  247.   left: 413px;
  248. }
  249. #id_details .forum_userstatus {display: none;}
  250. #id_details p {margin: 0 0 5px 0;}
  251. #id_details p:nth-of-type(1) {margin-bottom: 30px;}
  252. #id_details p:nth-of-type(n+9) {display: none;}
  253. #id_details img {filter: drop-shadow(0 0 10px #FFFFFF);}
  254. #id_details strong {display: block;}
  255.  
  256. /* Contact */
  257.  
  258. #id_contact {
  259.   width: 44px;
  260.   height: 220px;
  261.   top: 306px;
  262.   left: 648px;
  263.   overflow: visible;
  264. }
  265.  
  266. #id_contact ul {
  267.   display: flex;
  268.   height: 100%;
  269.   flex-flow: column wrap;
  270.   justify-content: space-evenly;
  271.   align-content: center;
  272. }
  273.  
  274. #id_contact li {
  275.   font: 900 0/1 'Font Awesome 5 Free';
  276.   position: relative;
  277. }
  278. #id_contact li *::before, #id_contact li *::after {font-size: 28px;}
  279.  
  280. #id_contact li *::before {
  281.  -webkit-text-stroke: 3px rebeccapurple;
  282.   color: rebeccapurple;
  283.   text-shadow: 4px 4px #FF000030;
  284. }
  285.  
  286. #id_contact li *::after {
  287.   color: #ACFFE8;
  288.   position: absolute;
  289.   top: 0;
  290.   left: 0;
  291.   transition: color .5s ease-in-out;
  292. }
  293. #id_contact li *:hover::after {color: #FFFFFF;}
  294.  
  295. #id_contact li:nth-of-type(1) *::before, #id_contact li:nth-of-type(1) *::after {content: '';}
  296. #id_contact li:nth-of-type(2) *::before, #id_contact li:nth-of-type(2) *::after {content: '';}
  297. #id_contact li:nth-of-type(3) *::before, #id_contact li:nth-of-type(3) *::after {content: '';}
  298.  
  299. /* Comments */
  300.  
  301. #id_comments #alerts_banner {display: none;}
  302. #id_comments .postcontent, #id_comments dt {margin-left: 55px;}
  303. #id_comments .postcontent {padding-top: 41px;}
  304. #id_comments h2 ~ p {margin: 0;}
  305. #id_comments dd {margin: 0 0 20px 0;}
  306. #id_comments dd:last-of-type {margin: 0;}
  307.  
  308. #id_comments dl {
  309.   width: 100%;
  310.   height: calc(100% - 60px);
  311.   position: absolute;
  312.   bottom: 0;
  313.   box-sizing: border-box;
  314. }
  315.  
  316. #id_comments dt {
  317.   height: 0;
  318.   line-height: revert;
  319.   text-align: revert;
  320.   padding: 0;
  321.   position: relative;
  322.   top: 4px;
  323.   border: none;
  324. }
  325. #id_comments .date {opacity: .75;}
  326.  
  327. #id_comments .username {
  328.   float: none;
  329.   font-size: 12px;
  330. }
  331.  
  332. #id_comments .dropBox {
  333.   background: #FFFFFF;
  334.   width: 40px;
  335.   height: 40px;
  336.   margin: 0 10px 0 0;
  337.   border: 2px solid transparent;
  338.   border-radius: 50%;
  339.   box-shadow: 4px 4px #6A5ACD40;
  340.   overflow: hidden;
  341. }
  342.  
  343. #id_comments .dropBox img {
  344.   width: 60px;
  345.   height: 75px;
  346.   image-rendering: crisp-edges;
  347.   margin: -7px 0 0 -15px;
  348. }
  349.  
  350. /* Comments Links */
  351.  
  352. #id_comments h2 + div, #id_comments h2 ~ p {
  353.   background: slateblue content-box;
  354.   width: calc(50% - 5px);
  355.   height: 30px;
  356.   font-size: 0;
  357.   text-align: center;
  358.   position: relative;
  359.   border: 2px solid #6A5ACD40;
  360.   box-sizing: border-box;
  361.   transition: all .5s ease-in-out;
  362. }
  363. #id_comments h2 + div {float: left;}
  364. #id_comments h2 ~ p {float: right;}
  365.  
  366. #id_comments h2 + div:hover, #id_comments h2 ~ p:hover {
  367.   background: lightcoral content-box;
  368.   border-color: #F0808040;
  369. }
  370.  
  371. #alert_container {
  372.   float: none;
  373.   padding: 0;
  374. }
  375.  
  376. #id_comments h2 + div a, #id_comments h2 ~ p a {
  377.   display: block;
  378.   width: 100%;
  379.   height: 100%;
  380.   color: #FFFFFF;
  381. }
  382.  
  383. #id_comments h2 + div a::before, #id_comments h2 ~ p a::before {
  384.   font-size: 10px;
  385.   line-height: 26px;
  386.   text-transform: uppercase;
  387. }
  388. #id_comments h2 + div a::before {content: 'Post New Comment';}
  389. #id_comments h2 ~ p a::before {content: 'View All Comments';}
  390.  
  391. /* Wish List */
  392.  
  393. #id_wishlist {
  394.   height: 182px;
  395.   padding-right: 12px;
  396.   top: 323px;
  397.   left: 257px;
  398.   scroll-snap-type: y mandatory;
  399.   overflow-y: scroll;
  400. }
  401. .premium_sparkle {display: none;}
  402.  
  403. #id_wishlist h2 {
  404.   top: 312px;
  405.   left: 325px;
  406.   transform-origin: 0 0;
  407.   transform: rotate(90deg);
  408. }
  409. #id_wishlist h2::before, #id_wishlist h2::after {content: 'wishes';}
  410.  
  411. #id_wishlist .item {
  412.   float: none;
  413.   background: #FFFFFF80;
  414.   width: 30px;
  415.   height: 30px;
  416.   padding: 3px;
  417.   position: relative;
  418.   border: 1px dashed plum;
  419.   border-radius: 10px;
  420.   scroll-snap-align: start;
  421.   transition: all .5s ease-in-out;
  422. }
  423. #id_wishlist .item:nth-of-type(n+2) {margin-top: 10px;}
  424.  
  425. #id_wishlist .item:hover {
  426.   background: #FFFFFF;
  427.   border-color: rebeccapurple;
  428. }
  429.  
  430. .owner_checkmark {
  431.   margin: 0;
  432.   bottom: 5px;
  433.   left: 5px;
  434. }
  435.  
  436. /* Visitors */
  437.  
  438. #id_footprints {
  439.   width: 170px;
  440.   height: 87px;
  441.   line-height: 1.3;
  442.   top: 801px;
  443.   left: 297px;
  444.   scroll-snap-type: y proximity;
  445.   overflow-y: scroll;
  446. }
  447.  
  448. #id_footprints h2 {
  449.   top: 897px;
  450.   right: 1116px;
  451. }
  452. #id_footprints h2::before, #id_footprints h2::after {content: 'my stalkers';}
  453.  
  454. #id_footprints .item {
  455.   display: grid;
  456.   grid-template-columns: repeat(2, max-content);
  457.   grid-template-rows: repeat(2, 1fr);
  458.   justify-content: center;
  459.   scroll-snap-align: start;
  460. }
  461. #id_footprints .item:nth-of-type(n+2) {margin-top: 5px;}
  462. #id_footprints .item a {grid-area: 1 / 1 / 2 / 3;}
  463.  
  464. #id_footprints .item::before {
  465.   content: 'Visited ';
  466.   white-space: pre;
  467. }
  468.  
  469. /* Media */
  470.  
  471. .media_panel {
  472.   background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat #00000080;
  473.   width: 35px;
  474.   height: 35px !important;
  475.   top: 888px;
  476.   left: 780px;
  477.   border: 1px dashed #305030;
  478.   border-radius: 10px;
  479.   filter: invert(1);
  480. }
  481.  
  482. .media_panel iframe {
  483.   position: absolute;
  484.   bottom: 0;
  485.   left: -13px;
  486.   opacity: .001;
  487. }
  488.  
  489. /* Username Animation */
  490.  
  491. @keyframes FloatName {
  492.   from {transform: translateY(0);}
  493.   to {transform: translateY(-20px);}
  494. }
  495.  
  496. #columns::before, #columns::after {
  497.   content: '';
  498.   background: url('https://i.ibb.co/HrSdCDp/lil-red-opal-layout.png');
  499.   position: absolute;
  500.   pointer-events: none;
  501. }
  502.  
  503. #columns::before {
  504.   background-position: 0 -1080px;
  505.   width: 650px;
  506.   height: 375px;
  507.   left: 635px;
  508.   top: 145px;
  509.   animation: FloatName 3s ease-in-out infinite alternate;
  510. }
  511.  
  512. #columns::after {
  513.   background-position: right -1080px;
  514.   width: 720px;
  515.   height: 415px;
  516.   left: 565px;
  517.   top: 55px;
  518. }
  519.  
  520. /* Sparkles Animation */
  521.  
  522. @keyframes SpinStarLarge {
  523.   0% {transform: rotate(0turn) scale(0); opacity: 0;}
  524.   50% {opacity: 1;}
  525.   100% {transform: rotate(1turn) scale(1); opacity: 0;}
  526. }
  527.  
  528. @keyframes SpinStarSmall {
  529.   0% {transform: rotate(0turn) scale(0); opacity: 0;}
  530.   50% {opacity: 1;}
  531.   100% {transform: rotate(-1turn) scale(1); opacity: 0;}
  532. }
  533.  
  534. .custom_panel {
  535.   filter: drop-shadow(0 0 2px #FFFFFF);
  536.   overflow: visible;
  537. }
  538. .custom_panel b, .custom_panel b::before, .custom_panel b::after {position: absolute;}
  539.  
  540. .custom_panel b, .custom_panel b::before {
  541.   width: 40px;
  542.   height: 40px;
  543. }
  544.  
  545. .custom_panel b::before, .custom_panel b::after {
  546.   content: '';
  547.   background: #FFFFFF;
  548.   animation: SpinStarLarge 2.5s infinite;
  549.   animation-delay: inherit !important;
  550. }
  551.  
  552. .custom_panel b::before {
  553.   top: 0;
  554.   left: 0;
  555.   clip-path: polygon(50% 0%, calc(50% + 1px) calc(50% - 2px), 100% 0%, calc(50% + 2px) calc(50% - 1px), 100% 50%, calc(50% + 2px) calc(50% + 1px), 100% 100%, calc(50% + 1px) calc(50% + 2px), 50% 100%, calc(50% - 1px) calc(50% + 2px), 0% 100%, calc(50% - 2px) calc(50% + 1px), 0% 50%, calc(50% - 2px) calc(50% - 1px), 0% 0%, calc(50% - 1px) calc(50% - 2px));
  556. }
  557.  
  558. .custom_panel b::after {
  559.   width: 60px;
  560.   height: 60px;
  561.   top: -10px;
  562.   left: -10px;
  563.   animation-name: SpinStarSmall;
  564.   clip-path: polygon(50% 0%, calc(50% + 1px) calc(50% - 1px), 100% 50%, calc(50% + 1px) calc(50% + 1px), 50% 100%, calc(50% - 1px) calc(50% + 1px), 0% 50%, calc(50% - 1px) calc(50% - 1px));
  565. }
  566.  
  567. .custom_panel b:nth-of-type(001) {top: 125px; left: 1038px; transform: rotate(+24deg) scale(.80); animation-delay: -0.1s;}
  568. .custom_panel b:nth-of-type(002) {top: 139px; left: 1131px; transform: rotate(-04deg) scale(.46); animation-delay: -0.1s;}
  569. .custom_panel b:nth-of-type(003) {top: 129px; left: 1108px; transform: rotate(+02deg) scale(.16); animation-delay: -1.9s;}
  570. .custom_panel b:nth-of-type(004) {top: 052px; left: 0852px; transform: rotate(-32deg) scale(.49); animation-delay: -1.9s;}
  571. .custom_panel b:nth-of-type(005) {top: 034px; left: 1357px; transform: rotate(+28deg) scale(.84); animation-delay: -1.0s;}
  572. .custom_panel b:nth-of-type(006) {top: 197px; left: 0453px; transform: rotate(-02deg) scale(.71); animation-delay: -0.5s;}
  573. .custom_panel b:nth-of-type(007) {top: 092px; left: 1342px; transform: rotate(+38deg) scale(.64); animation-delay: -2.4s;}
  574. .custom_panel b:nth-of-type(008) {top: 156px; left: 0278px; transform: rotate(-26deg) scale(.34); animation-delay: -1.0s;}
  575. .custom_panel b:nth-of-type(009) {top: 060px; left: 0296px; transform: rotate(-41deg) scale(.39); animation-delay: -0.2s;}
  576. .custom_panel b:nth-of-type(010) {top: 111px; left: 0299px; transform: rotate(-41deg) scale(.78); animation-delay: -0.7s;}
  577. .custom_panel b:nth-of-type(011) {top: 210px; left: 1315px; transform: rotate(-21deg) scale(.99); animation-delay: -1.9s;}
  578. .custom_panel b:nth-of-type(012) {top: 166px; left: 0836px; transform: rotate(-14deg) scale(.55); animation-delay: -0.6s;}
  579. .custom_panel b:nth-of-type(013) {top: 032px; left: 1260px; transform: rotate(-23deg) scale(.50); animation-delay: -1.0s;}
  580. .custom_panel b:nth-of-type(014) {top: 147px; left: 0569px; transform: rotate(+09deg) scale(.94); animation-delay: -0.3s;}
  581. .custom_panel b:nth-of-type(015) {top: 002px; left: 1220px; transform: rotate(+21deg) scale(.36); animation-delay: -1.2s;}
  582. .custom_panel b:nth-of-type(016) {top: 021px; left: 1006px; transform: rotate(+18deg) scale(.70); animation-delay: -0.2s;}
  583. .custom_panel b:nth-of-type(017) {top: 185px; left: 1083px; transform: rotate(-29deg) scale(.77); animation-delay: -1.1s;}
  584. .custom_panel b:nth-of-type(018) {top: 030px; left: 0119px; transform: rotate(-30deg) scale(.13); animation-delay: -2.4s;}
  585. .custom_panel b:nth-of-type(019) {top: 079px; left: 0591px; transform: rotate(+44deg) scale(.43); animation-delay: -2.3s;}
  586. .custom_panel b:nth-of-type(020) {top: 003px; left: 1387px; transform: rotate(+15deg) scale(.97); animation-delay: -1.7s;}
  587. .custom_panel b:nth-of-type(021) {top: 199px; left: 0724px; transform: rotate(+38deg) scale(.90); animation-delay: -0.9s;}
  588. .custom_panel b:nth-of-type(022) {top: 047px; left: 1301px; transform: rotate(+27deg) scale(.36); animation-delay: -1.1s;}
  589. .custom_panel b:nth-of-type(023) {top: 012px; left: 0713px; transform: rotate(-23deg) scale(.77); animation-delay: -1.4s;}
  590. .custom_panel b:nth-of-type(024) {top: 209px; left: 0180px; transform: rotate(+29deg) scale(.49); animation-delay: -1.6s;}
  591. .custom_panel b:nth-of-type(025) {top: 108px; left: 0389px; transform: rotate(+15deg) scale(.60); animation-delay: -0.2s;}
  592. .custom_panel b:nth-of-type(026) {top: 005px; left: 0754px; transform: rotate(+30deg) scale(.36); animation-delay: -0.2s;}
  593. .custom_panel b:nth-of-type(027) {top: 093px; left: 0985px; transform: rotate(-44deg) scale(.27); animation-delay: -0.3s;}
  594. .custom_panel b:nth-of-type(028) {top: 203px; left: 1201px; transform: rotate(+31deg) scale(.83); animation-delay: -1.3s;}
  595. .custom_panel b:nth-of-type(029) {top: 074px; left: 1123px; transform: rotate(+20deg) scale(.60); animation-delay: -1.6s;}
  596. .custom_panel b:nth-of-type(030) {top: 023px; left: 0521px; transform: rotate(-08deg) scale(.38); animation-delay: -0.4s;}
  597. .custom_panel b:nth-of-type(031) {top: 042px; left: 0167px; transform: rotate(-44deg) scale(.77); animation-delay: -0.6s;}
  598. .custom_panel b:nth-of-type(032) {top: 053px; left: 1373px; transform: rotate(+29deg) scale(.45); animation-delay: -2.0s;}
  599. .custom_panel b:nth-of-type(033) {top: 084px; left: 1268px; transform: rotate(+18deg) scale(.64); animation-delay: -0.4s;}
  600. .custom_panel b:nth-of-type(034) {top: 005px; left: 0169px; transform: rotate(-34deg) scale(.90); animation-delay: -0.9s;}
  601. .custom_panel b:nth-of-type(035) {top: 024px; left: 0279px; transform: rotate(-20deg) scale(.68); animation-delay: -2.1s;}
  602. .custom_panel b:nth-of-type(036) {top: 169px; left: 1238px; transform: rotate(-44deg) scale(.31); animation-delay: -1.3s;}
  603. .custom_panel b:nth-of-type(037) {top: 133px; left: 0619px; transform: rotate(+16deg) scale(.32); animation-delay: -2.0s;}
  604. .custom_panel b:nth-of-type(038) {top: 087px; left: 0735px; transform: rotate(+27deg) scale(.28); animation-delay: -0.9s;}
  605. .custom_panel b:nth-of-type(039) {top: 022px; left: 0891px; transform: rotate(-42deg) scale(.91); animation-delay: -0.3s;}
  606. .custom_panel b:nth-of-type(040) {top: 141px; left: 0631px; transform: rotate(+06deg) scale(.56); animation-delay: -0.0s;}
  607. .custom_panel b:nth-of-type(041) {top: 213px; left: 0490px; transform: rotate(-42deg) scale(.26); animation-delay: -0.6s;}
  608. .custom_panel b:nth-of-type(042) {top: 200px; left: 1303px; transform: rotate(-29deg) scale(.88); animation-delay: -1.5s;}
  609. .custom_panel b:nth-of-type(043) {top: 048px; left: 0388px; transform: rotate(-20deg) scale(.99); animation-delay: -1.4s;}
  610. .custom_panel b:nth-of-type(044) {top: 155px; left: 0492px; transform: rotate(+37deg) scale(.20); animation-delay: -2.3s;}
  611. .custom_panel b:nth-of-type(045) {top: 049px; left: 0938px; transform: rotate(+24deg) scale(.35); animation-delay: -0.4s;}
  612. .custom_panel b:nth-of-type(046) {top: 015px; left: 0148px; transform: rotate(-33deg) scale(.31); animation-delay: -2.3s;}
  613. .custom_panel b:nth-of-type(047) {top: 044px; left: 0417px; transform: rotate(+44deg) scale(.94); animation-delay: -0.0s;}
  614. .custom_panel b:nth-of-type(048) {top: 122px; left: 0659px; transform: rotate(-08deg) scale(.38); animation-delay: -1.5s;}
  615. .custom_panel b:nth-of-type(049) {top: 045px; left: 0848px; transform: rotate(-27deg) scale(.99); animation-delay: -1.3s;}
  616. .custom_panel b:nth-of-type(050) {top: 179px; left: 0610px; transform: rotate(-02deg) scale(.65); animation-delay: -0.3s;}
  617. .custom_panel b:nth-of-type(051) {top: 161px; left: 1006px; transform: rotate(+15deg) scale(.88); animation-delay: -2.3s;}
  618. .custom_panel b:nth-of-type(052) {top: 045px; left: 0203px; transform: rotate(+35deg) scale(.23); animation-delay: -2.5s;}
  619. .custom_panel b:nth-of-type(053) {top: 169px; left: 1214px; transform: rotate(-22deg) scale(.66); animation-delay: -0.8s;}
  620. .custom_panel b:nth-of-type(054) {top: 050px; left: 0130px; transform: rotate(-22deg) scale(.61); animation-delay: -1.6s;}
  621. .custom_panel b:nth-of-type(055) {top: 063px; left: 1060px; transform: rotate(-19deg) scale(.58); animation-delay: -1.5s;}
  622. .custom_panel b:nth-of-type(056) {top: 001px; left: 0673px; transform: rotate(-23deg) scale(.90); animation-delay: -0.4s;}
  623. .custom_panel b:nth-of-type(057) {top: 128px; left: 0383px; transform: rotate(+45deg) scale(.58); animation-delay: -0.8s;}
  624. .custom_panel b:nth-of-type(058) {top: 117px; left: 0757px; transform: rotate(-40deg) scale(.88); animation-delay: -0.3s;}
  625. .custom_panel b:nth-of-type(059) {top: 147px; left: 0394px; transform: rotate(-05deg) scale(.51); animation-delay: -1.1s;}
  626. .custom_panel b:nth-of-type(060) {top: 205px; left: 1144px; transform: rotate(+34deg) scale(.97); animation-delay: -2.2s;}
  627. .custom_panel b:nth-of-type(061) {top: 120px; left: 0314px; transform: rotate(+34deg) scale(.88); animation-delay: -1.4s;}
  628. .custom_panel b:nth-of-type(062) {top: 095px; left: 0636px; transform: rotate(-39deg) scale(.48); animation-delay: -0.9s;}
  629. .custom_panel b:nth-of-type(063) {top: 208px; left: 0192px; transform: rotate(+19deg) scale(.94); animation-delay: -0.1s;}
  630. .custom_panel b:nth-of-type(064) {top: 169px; left: 0467px; transform: rotate(+42deg) scale(.21); animation-delay: -2.0s;}
  631. .custom_panel b:nth-of-type(065) {top: 034px; left: 0725px; transform: rotate(-35deg) scale(.41); animation-delay: -1.9s;}
  632. .custom_panel b:nth-of-type(066) {top: 185px; left: 0199px; transform: rotate(+32deg) scale(.76); animation-delay: -0.3s;}
  633. .custom_panel b:nth-of-type(067) {top: 030px; left: 0756px; transform: rotate(-11deg) scale(.76); animation-delay: -0.5s;}
  634. .custom_panel b:nth-of-type(068) {top: 156px; left: 0963px; transform: rotate(-07deg) scale(.21); animation-delay: -1.1s;}
  635. .custom_panel b:nth-of-type(069) {top: 099px; left: 0204px; transform: rotate(+18deg) scale(.82); animation-delay: -1.8s;}
  636. .custom_panel b:nth-of-type(070) {top: 210px; left: 0463px; transform: rotate(-12deg) scale(.26); animation-delay: -1.3s;}
  637. .custom_panel b:nth-of-type(071) {top: 214px; left: 0158px; transform: rotate(-40deg) scale(.54); animation-delay: -1.9s;}
  638. .custom_panel b:nth-of-type(072) {top: 093px; left: 0111px; transform: rotate(-35deg) scale(.81); animation-delay: -0.5s;}
  639. .custom_panel b:nth-of-type(073) {top: 127px; left: 0838px; transform: rotate(+41deg) scale(.93); animation-delay: -1.6s;}
  640. .custom_panel b:nth-of-type(074) {top: 123px; left: 1298px; transform: rotate(+01deg) scale(.34); animation-delay: -0.8s;}
  641. .custom_panel b:nth-of-type(075) {top: 075px; left: 0835px; transform: rotate(+01deg) scale(.14); animation-delay: -1.7s;}
  642. .custom_panel b:nth-of-type(076) {top: 100px; left: 0144px; transform: rotate(-09deg) scale(.16); animation-delay: -2.4s;}
  643. .custom_panel b:nth-of-type(077) {top: 103px; left: 0253px; transform: rotate(-15deg) scale(.72); animation-delay: -2.4s;}
  644. .custom_panel b:nth-of-type(078) {top: 015px; left: 0787px; transform: rotate(+12deg) scale(.76); animation-delay: -1.8s;}
  645. .custom_panel b:nth-of-type(079) {top: 129px; left: 0421px; transform: rotate(-28deg) scale(.60); animation-delay: -1.6s;}
  646. .custom_panel b:nth-of-type(080) {top: 109px; left: 0743px; transform: rotate(-40deg) scale(.88); animation-delay: -2.0s;}
  647. .custom_panel b:nth-of-type(081) {top: 097px; left: 1023px; transform: rotate(-43deg) scale(.65); animation-delay: -0.6s;}
  648. .custom_panel b:nth-of-type(082) {top: 100px; left: 1000px; transform: rotate(-10deg) scale(.52); animation-delay: -1.8s;}
  649. .custom_panel b:nth-of-type(083) {top: 003px; left: 0807px; transform: rotate(-30deg) scale(.71); animation-delay: -0.4s;}
  650. .custom_panel b:nth-of-type(084) {top: 051px; left: 0234px; transform: rotate(-46deg) scale(.45); animation-delay: -2.4s;}
  651. .custom_panel b:nth-of-type(085) {top: 204px; left: 1209px; transform: rotate(+28deg) scale(.12); animation-delay: -1.5s;}
  652. .custom_panel b:nth-of-type(086) {top: 031px; left: 1361px; transform: rotate(+34deg) scale(.59); animation-delay: -0.2s;}
  653. .custom_panel b:nth-of-type(087) {top: 085px; left: 0787px; transform: rotate(+11deg) scale(.42); animation-delay: -0.1s;}
  654. .custom_panel b:nth-of-type(088) {top: 096px; left: 0967px; transform: rotate(-36deg) scale(.10); animation-delay: -0.8s;}
  655. .custom_panel b:nth-of-type(089) {top: 149px; left: 0202px; transform: rotate(+39deg) scale(.27); animation-delay: -0.6s;}
  656. .custom_panel b:nth-of-type(090) {top: 089px; left: 0403px; transform: rotate(-42deg) scale(.51); animation-delay: -2.4s;}
  657. .custom_panel b:nth-of-type(091) {top: 107px; left: 0445px; transform: rotate(-34deg) scale(.11); animation-delay: -1.0s;}
  658. .custom_panel b:nth-of-type(092) {top: 138px; left: 1113px; transform: rotate(-07deg) scale(.67); animation-delay: -0.5s;}
  659. .custom_panel b:nth-of-type(093) {top: 127px; left: 0819px; transform: rotate(-21deg) scale(.94); animation-delay: -0.3s;}
  660. .custom_panel b:nth-of-type(094) {top: 086px; left: 0310px; transform: rotate(-36deg) scale(.11); animation-delay: -2.0s;}
  661. .custom_panel b:nth-of-type(095) {top: 026px; left: 0954px; transform: rotate(+15deg) scale(.39); animation-delay: -2.4s;}
  662. .custom_panel b:nth-of-type(096) {top: 000px; left: 0341px; transform: rotate(+07deg) scale(.82); animation-delay: -1.0s;}
  663. .custom_panel b:nth-of-type(097) {top: 020px; left: 0839px; transform: rotate(+38deg) scale(.36); animation-delay: -1.6s;}
  664. .custom_panel b:nth-of-type(098) {top: 056px; left: 0161px; transform: rotate(-25deg) scale(.61); animation-delay: -0.1s;}
  665. .custom_panel b:nth-of-type(099) {top: 001px; left: 0160px; transform: rotate(+37deg) scale(.50); animation-delay: -1.8s;}
  666. .custom_panel b:nth-of-type(100) {top: 087px; left: 0739px; transform: rotate(+25deg) scale(.13); animation-delay: -0.7s;}
  667.  
  668. /* Misc */
  669.  
  670. #pictures_container, #texts_container {
  671.   width: 0;
  672.   height: 0;
  673.   position: absolute;
  674.   top: 30px;
  675.   left: 50%;
  676. }
RAW Paste Data