SHARE
TWEET

stylesx

GoldLeej May 27th, 2016 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import url(https://fonts.googleapis.com/css?family=Cookie|Parisienne|Prata|Kite+one);
  2. @import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css");
  3. @import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
  4.  
  5.  
  6. /* Main Styles */
  7. body {
  8.  width: 100vw;
  9.  height: 100vh;
  10.  margin: 0;
  11.  overflow: hidden;
  12.  background-image: radial-gradient(center, ellipse cover, #27364f 0%, #112 50%, #112 100%);
  13.  background: -moz-radial-gradient(center, ellipse cover, #27364f 0%, #112 50%, #112 100%);
  14.  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #27364f), color-stop(50%, #112), color-stop(100%, #112));
  15.  background: -webkit-radial-gradient(center, ellipse cover, #27364f 0%, #112 50%, #112 100%);
  16.  background: -o-radial-gradient(center, ellipse cover, #27364f 0%, #112 50%, #112 100%);
  17.  background: -ms-radial-gradient(center, ellipse cover, #27364f 0%, #112 50%, #112 100%);
  18.  filter: 'progid:DXImageTransform.Microsoft.gradient( startColorstr=' #27364f ', endColorstr=' #112 ',GradientType=1 )';
  19.  background-position: 50% 0%;
  20.  background-size: 150vmax 150vmax;
  21.  background-repeat: no-repeat;
  22.  background-color: #112;
  23. }
  24.  
  25. /* Stars */
  26. .stars .container {
  27.  position: absolute;
  28.  animation: stars linear infinite;
  29. }
  30. .stars .container .star {
  31.  animation: twinkle linear infinite;
  32.  border-radius: 100%;
  33.  transform: translateZ(0);
  34. }
  35. .stars .container:nth-child(0) {
  36.  width: 1px;
  37.  height: 1px;
  38.  left: 21vw;
  39.  animation-delay: -986.4s;
  40.  animation-duration: 178s;
  41. }
  42. .stars .container:nth-child(0) .star {
  43.  width: inherit;
  44.  height: inherit;
  45.  animation-delay: -45.4s;
  46.  animation-duration: 10.5s;
  47.  background: rgba(216,227,200,0.7);
  48. }
  49. .stars .container:nth-child(1) {
  50.  width: 1px;
  51.  height: 1px;
  52.  left: 0.5vw;
  53.  animation-delay: -995s;
  54.  animation-duration: 220.2s;
  55. }
  56. .stars .container:nth-child(1) .star {
  57.  width: inherit;
  58.  height: inherit;
  59.  animation-delay: -41.8s;
  60.  animation-duration: 46.2s;
  61.  background: rgba(249,247,138,0.8);
  62. }
  63. .stars .container:nth-child(2) {
  64.  width: 2px;
  65.  height: 2px;
  66.  left: 99vw;
  67.  animation-delay: -992.9s;
  68.  animation-duration: 119s;
  69. }
  70. .stars .container:nth-child(2) .star {
  71.  width: inherit;
  72.  height: inherit;
  73.  animation-delay: -45.9s;
  74.  animation-duration: 8.9s;
  75.  background: rgba(233,201,106,0.9);
  76. }
  77. .stars .container:nth-child(3) {
  78.  width: 3px;
  79.  height: 3px;
  80.  left: 89.5vw;
  81.  animation-delay: -997.4s;
  82.  animation-duration: 128.66666666666666s;
  83. }
  84. .stars .container:nth-child(3) .star {
  85.  width: inherit;
  86.  height: inherit;
  87.  animation-delay: -46.8s;
  88.  animation-duration: 23.4s;
  89.  background: #fed76f;
  90. }
  91. .stars .container:nth-child(4) {
  92.  width: 1px;
  93.  height: 1px;
  94.  left: 94.5vw;
  95.  animation-delay: -997.6s;
  96.  animation-duration: 90s;
  97. }
  98. .stars .container:nth-child(4) .star {
  99.  width: inherit;
  100.  height: inherit;
  101.  animation-delay: -46.5s;
  102.  animation-duration: 7.1s;
  103.  background: #f2d372;
  104. }
  105. .stars .container:nth-child(5) {
  106.  width: 1px;
  107.  height: 1px;
  108.  left: 89vw;
  109.  animation-delay: -987.8s;
  110.  animation-duration: 133s;
  111. }
  112. .stars .container:nth-child(5) .star {
  113.  width: inherit;
  114.  height: inherit;
  115.  animation-delay: -46.5s;
  116.  animation-duration: 34.3s;
  117.  background: #cecbb1;
  118. }
  119. .stars .container:nth-child(6) {
  120.  width: 1px;
  121.  height: 1px;
  122.  left: 41.5vw;
  123.  animation-delay: -988s;
  124.  animation-duration: 368s;
  125. }
  126. .stars .container:nth-child(6) .star {
  127.  width: inherit;
  128.  height: inherit;
  129.  animation-delay: -49.5s;
  130.  animation-duration: 23.8s;
  131.  background: #f0acd8;
  132. }
  133. .stars .container:nth-child(7) {
  134.  width: 2px;
  135.  height: 2px;
  136.  left: 4.5vw;
  137.  animation-delay: -994.2s;
  138.  animation-duration: 63.6s;
  139. }
  140. .stars .container:nth-child(7) .star {
  141.  width: inherit;
  142.  height: inherit;
  143.  animation-delay: -43.7s;
  144.  animation-duration: 8.6s;
  145.  background: #f6f482;
  146. }
  147. .stars .container:nth-child(8) {
  148.  width: 1px;
  149.  height: 1px;
  150.  left: 31.5vw;
  151.  animation-delay: -980.2s;
  152.  animation-duration: 98.6s;
  153. }
  154. .stars .container:nth-child(8) .star {
  155.  width: inherit;
  156.  height: inherit;
  157.  animation-delay: -46.7s;
  158.  animation-duration: 22.8s;
  159.  background: rgba(203,235,216,0.9);
  160. }
  161. .stars .container:nth-child(9) {
  162.  width: 2px;
  163.  height: 2px;
  164.  left: 43vw;
  165.  animation-delay: -995.4s;
  166.  animation-duration: 24.9s;
  167. }
  168. .stars .container:nth-child(9) .star {
  169.  width: inherit;
  170.  height: inherit;
  171.  animation-delay: -44.5s;
  172.  animation-duration: 42.5s;
  173.  background: rgba(229,223,159,0.7);
  174. }
  175. .stars .container:nth-child(10) {
  176.  width: 3px;
  177.  height: 3px;
  178.  left: 41.5vw;
  179.  animation-delay: -998.9333333333333s;
  180.  animation-duration: 84.86666666666666s;
  181. }
  182. .stars .container:nth-child(10) .star {
  183.  width: inherit;
  184.  height: inherit;
  185.  animation-delay: -47.7s;
  186.  animation-duration: 49.4s;
  187.  background: rgba(211,243,250,0.7);
  188. }
  189. .stars .container:nth-child(11) {
  190.  width: 3px;
  191.  height: 3px;
  192.  left: 4.5vw;
  193.  animation-delay: -994.4s;
  194.  animation-duration: 67.46666666666667s;
  195. }
  196. .stars .container:nth-child(11) .star {
  197.  width: inherit;
  198.  height: inherit;
  199.  animation-delay: -49.9s;
  200.  animation-duration: 24.5s;
  201.  background: rgba(201,234,229,0.9);
  202. }
  203. .stars .container:nth-child(12) {
  204.  width: 2px;
  205.  height: 2px;
  206.  left: 21vw;
  207.  animation-delay: -990.5s;
  208.  animation-duration: 167.4s;
  209. }
  210. .stars .container:nth-child(12) .star {
  211.  width: inherit;
  212.  height: inherit;
  213.  animation-delay: -45.5s;
  214.  animation-duration: 15.6s;
  215.  background: #d9a069;
  216. }
  217. .stars .container:nth-child(13) {
  218.  width: 2px;
  219.  height: 2px;
  220.  left: 7vw;
  221.  animation-delay: -998.6s;
  222.  animation-duration: 191.5s;
  223. }
  224. .stars .container:nth-child(13) .star {
  225.  width: inherit;
  226.  height: inherit;
  227.  animation-delay: -41.2s;
  228.  animation-duration: 49.3s;
  229.  background: rgba(253,167,246,0.9);
  230. }
  231. .stars .container:nth-child(14) {
  232.  width: 1px;
  233.  height: 1px;
  234.  left: 18.5vw;
  235.  animation-delay: -982.4s;
  236.  animation-duration: 158s;
  237. }
  238. .stars .container:nth-child(14) .star {
  239.  width: inherit;
  240.  height: inherit;
  241.  animation-delay: -48.9s;
  242.  animation-duration: 47s;
  243.  background: #d7a5f6;
  244. }
  245. .stars .container:nth-child(15) {
  246.  width: 3px;
  247.  height: 3px;
  248.  left: 43.5vw;
  249.  animation-delay: -995.9333333333333s;
  250.  animation-duration: 15.200000000000001s;
  251. }
  252. .stars .container:nth-child(15) .star {
  253.  width: inherit;
  254.  height: inherit;
  255.  animation-delay: -43.4s;
  256.  animation-duration: 21s;
  257.  background: rgba(222,173,222,0.7);
  258. }
  259. .stars .container:nth-child(16) {
  260.  width: 3px;
  261.  height: 3px;
  262.  left: 44.5vw;
  263.  animation-delay: -995.6s;
  264.  animation-duration: 100.46666666666665s;
  265. }
  266. .stars .container:nth-child(16) .star {
  267.  width: inherit;
  268.  height: inherit;
  269.  animation-delay: -49.3s;
  270.  animation-duration: 27.7s;
  271.  background: rgba(221,210,203,0.9);
  272. }
  273. .stars .container:nth-child(17) {
  274.  width: 3px;
  275.  height: 3px;
  276.  left: 18vw;
  277.  animation-delay: -996.4666666666667s;
  278.  animation-duration: 131.53333333333333s;
  279. }
  280. .stars .container:nth-child(17) .star {
  281.  width: inherit;
  282.  height: inherit;
  283.  animation-delay: -43.5s;
  284.  animation-duration: 41.3s;
  285.  background: #cdda9d;
  286. }
  287. .stars .container:nth-child(18) {
  288.  width: 1px;
  289.  height: 1px;
  290.  left: 32vw;
  291.  animation-delay: -984.4s;
  292.  animation-duration: 123.6s;
  293. }
  294. .stars .container:nth-child(18) .star {
  295.  width: inherit;
  296.  height: inherit;
  297.  animation-delay: -44.6s;
  298.  animation-duration: 31.8s;
  299.  background: rgba(209,154,231,0.9);
  300. }
  301. .stars .container:nth-child(19) {
  302.  width: 3px;
  303.  height: 3px;
  304.  left: 70vw;
  305.  animation-delay: -996.4666666666667s;
  306.  animation-duration: 84.26666666666667s;
  307. }
  308. .stars .container:nth-child(19) .star {
  309.  width: inherit;
  310.  height: inherit;
  311.  animation-delay: -42.8s;
  312.  animation-duration: 9.5s;
  313.  background: rgba(252,179,121,0.9);
  314. }
  315. .stars .container:nth-child(20) {
  316.  width: 2px;
  317.  height: 2px;
  318.  left: 97vw;
  319.  animation-delay: -992.1s;
  320.  animation-duration: 47.9s;
  321. }
  322. .stars .container:nth-child(20) .star {
  323.  width: inherit;
  324.  height: inherit;
  325.  animation-delay: -40.2s;
  326.  animation-duration: 37.8s;
  327.  background: rgba(215,180,213,0.9);
  328. }
  329. .stars .container:nth-child(21) {
  330.  width: 3px;
  331.  height: 3px;
  332.  left: 4.5vw;
  333.  animation-delay: -995.0666666666667s;
  334.  animation-duration: 64.2s;
  335. }
  336. .stars .container:nth-child(21) .star {
  337.  width: inherit;
  338.  height: inherit;
  339.  animation-delay: -47.7s;
  340.  animation-duration: 29.9s;
  341.  background: rgba(241,161,164,0.8);
  342. }
  343. .stars .container:nth-child(22) {
  344.  width: 2px;
  345.  height: 2px;
  346.  left: 27.5vw;
  347.  animation-delay: -999.7s;
  348.  animation-duration: 51.9s;
  349. }
  350. .stars .container:nth-child(22) .star {
  351.  width: inherit;
  352.  height: inherit;
  353.  animation-delay: -47.6s;
  354.  animation-duration: 40s;
  355.  background: rgba(252,237,148,0.8);
  356. }
  357. .stars .container:nth-child(23) {
  358.  width: 1px;
  359.  height: 1px;
  360.  left: 57vw;
  361.  animation-delay: -983s;
  362.  animation-duration: 274.6s;
  363. }
  364. .stars .container:nth-child(23) .star {
  365.  width: inherit;
  366.  height: inherit;
  367.  animation-delay: -43.1s;
  368.  animation-duration: 24.2s;
  369.  background: rgba(240,212,230,0.7);
  370. }
  371. .stars .container:nth-child(24) {
  372.  width: 3px;
  373.  height: 3px;
  374.  left: 35.5vw;
  375.  animation-delay: -994.1333333333333s;
  376.  animation-duration: 46.666666666666664s;
  377. }
  378. .stars .container:nth-child(24) .star {
  379.  width: inherit;
  380.  height: inherit;
  381.  animation-delay: -47.1s;
  382.  animation-duration: 41.1s;
  383.  background: rgba(212,207,242,0.8);
  384. }
  385. .stars .container:nth-child(25) {
  386.  width: 2px;
  387.  height: 2px;
  388.  left: 94vw;
  389.  animation-delay: -998.3s;
  390.  animation-duration: 110.6s;
  391. }
  392. .stars .container:nth-child(25) .star {
  393.  width: inherit;
  394.  height: inherit;
  395.  animation-delay: -46s;
  396.  animation-duration: 11.5s;
  397.  background: #f496c5;
  398. }
  399. .stars .container:nth-child(26) {
  400.  width: 3px;
  401.  height: 3px;
  402.  left: 69.5vw;
  403.  animation-delay: -995.1333333333333s;
  404.  animation-duration: 26.2s;
  405. }
  406. .stars .container:nth-child(26) .star {
  407.  width: inherit;
  408.  height: inherit;
  409.  animation-delay: -47.1s;
  410.  animation-duration: 39s;
  411.  background: rgba(212,166,182,0.9);
  412. }
  413. .stars .container:nth-child(27) {
  414.  width: 3px;
  415.  height: 3px;
  416.  left: 92.5vw;
  417.  animation-delay: -995.4s;
  418.  animation-duration: 32.666666666666664s;
  419. }
  420. .stars .container:nth-child(27) .star {
  421.  width: inherit;
  422.  height: inherit;
  423.  animation-delay: -47s;
  424.  animation-duration: 29.8s;
  425.  background: rgba(220,156,227,0.9);
  426. }
  427. .stars .container:nth-child(28) {
  428.  width: 1px;
  429.  height: 1px;
  430.  left: 82vw;
  431.  animation-delay: -988.6s;
  432.  animation-duration: 88.8s;
  433. }
  434. .stars .container:nth-child(28) .star {
  435.  width: inherit;
  436.  height: inherit;
  437.  animation-delay: -44.7s;
  438.  animation-duration: 19.6s;
  439.  background: rgba(246,221,163,0.8);
  440. }
  441. .stars .container:nth-child(29) {
  442.  width: 2px;
  443.  height: 2px;
  444.  left: 10.5vw;
  445.  animation-delay: -998.8s;
  446.  animation-duration: 195.2s;
  447. }
  448. .stars .container:nth-child(29) .star {
  449.  width: inherit;
  450.  height: inherit;
  451.  animation-delay: -48.3s;
  452.  animation-duration: 42.5s;
  453.  background: rgba(231,194,196,0.7);
  454. }
  455. .stars .container:nth-child(30) {
  456.  width: 2px;
  457.  height: 2px;
  458.  left: 55.5vw;
  459.  animation-delay: -997.1s;
  460.  animation-duration: 67.6s;
  461. }
  462. .stars .container:nth-child(30) .star {
  463.  width: inherit;
  464.  height: inherit;
  465.  animation-delay: -42.9s;
  466.  animation-duration: 7.1s;
  467.  background: rgba(223,155,210,0.8);
  468. }
  469. .stars .container:nth-child(31) {
  470.  width: 1px;
  471.  height: 1px;
  472.  left: 11.5vw;
  473.  animation-delay: -994.6s;
  474.  animation-duration: 57.2s;
  475. }
  476. .stars .container:nth-child(31) .star {
  477.  width: inherit;
  478.  height: inherit;
  479.  animation-delay: -40.7s;
  480.  animation-duration: 17.7s;
  481.  background: rgba(242,156,214,0.7);
  482. }
  483. .stars .container:nth-child(32) {
  484.  width: 1px;
  485.  height: 1px;
  486.  left: 28vw;
  487.  animation-delay: -988.4s;
  488.  animation-duration: 209.2s;
  489. }
  490. .stars .container:nth-child(32) .star {
  491.  width: inherit;
  492.  height: inherit;
  493.  animation-delay: -43.4s;
  494.  animation-duration: 44.8s;
  495.  background: rgba(246,227,190,0.9);
  496. }
  497. .stars .container:nth-child(33) {
  498.  width: 1px;
  499.  height: 1px;
  500.  left: 49.5vw;
  501.  animation-delay: -993s;
  502.  animation-duration: 335.2s;
  503. }
  504. .stars .container:nth-child(33) .star {
  505.  width: inherit;
  506.  height: inherit;
  507.  animation-delay: -47.6s;
  508.  animation-duration: 7.6s;
  509.  background: rgba(213,226,186,0.9);
  510. }
  511. .stars .container:nth-child(34) {
  512.  width: 3px;
  513.  height: 3px;
  514.  left: 15.5vw;
  515.  animation-delay: -997.5333333333333s;
  516.  animation-duration: 33.733333333333334s;
  517. }
  518. .stars .container:nth-child(34) .star {
  519.  width: inherit;
  520.  height: inherit;
  521.  animation-delay: -44.5s;
  522.  animation-duration: 26.6s;
  523.  background: rgba(225,221,176,0.9);
  524. }
  525. .stars .container:nth-child(35) {
  526.  width: 3px;
  527.  height: 3px;
  528.  left: 54.5vw;
  529.  animation-delay: -999.5333333333333s;
  530.  animation-duration: 19.266666666666666s;
  531. }
  532. .stars .container:nth-child(35) .star {
  533.  width: inherit;
  534.  height: inherit;
  535.  animation-delay: -45s;
  536.  animation-duration: 34.1s;
  537.  background: rgba(245,164,241,0.7);
  538. }
  539. .stars .container:nth-child(36) {
  540.  width: 3px;
  541.  height: 3px;
  542.  left: 94.5vw;
  543.  animation-delay: -997.3333333333334s;
  544.  animation-duration: 34.733333333333334s;
  545. }
  546. .stars .container:nth-child(36) .star {
  547.  width: inherit;
  548.  height: inherit;
  549.  animation-delay: -48.3s;
  550.  animation-duration: 45.7s;
  551.  background: #d0ffc2;
  552. }
  553. .stars .container:nth-child(37) {
  554.  width: 2px;
  555.  height: 2px;
  556.  left: 16vw;
  557.  animation-delay: -991.4s;
  558.  animation-duration: 141.2s;
  559. }
  560. .stars .container:nth-child(37) .star {
  561.  width: inherit;
  562.  height: inherit;
  563.  animation-delay: -47.5s;
  564.  animation-duration: 48.1s;
  565.  background: rgba(248,226,110,0.8);
  566. }
  567. .stars .container:nth-child(38) {
  568.  width: 1px;
  569.  height: 1px;
  570.  left: 79.5vw;
  571.  animation-delay: -999s;
  572.  animation-duration: 318.2s;
  573. }
  574. .stars .container:nth-child(38) .star {
  575.  width: inherit;
  576.  height: inherit;
  577.  animation-delay: -44.8s;
  578.  animation-duration: 32.6s;
  579.  background: #f6ffc3;
  580. }
  581. .stars .container:nth-child(39) {
  582.  width: 3px;
  583.  height: 3px;
  584.  left: 46.5vw;
  585.  animation-delay: -999.4s;
  586.  animation-duration: 77.93333333333334s;
  587. }
  588. .stars .container:nth-child(39) .star {
  589.  width: inherit;
  590.  height: inherit;
  591.  animation-delay: -48.5s;
  592.  animation-duration: 32.3s;
  593.  background: rgba(229,201,117,0.8);
  594. }
  595. .stars .container:nth-child(40) {
  596.  width: 2px;
  597.  height: 2px;
  598.  left: 25.5vw;
  599.  animation-delay: -999.2s;
  600.  animation-duration: 133.7s;
  601. }
  602. .stars .container:nth-child(40) .star {
  603.  width: inherit;
  604.  height: inherit;
  605.  animation-delay: -46.2s;
  606.  animation-duration: 41.1s;
  607.  background: rgba(202,161,182,0.7);
  608. }
  609. .stars .container:nth-child(41) {
  610.  width: 3px;
  611.  height: 3px;
  612.  left: 46vw;
  613.  animation-delay: -999.8666666666667s;
  614.  animation-duration: 54.13333333333333s;
  615. }
  616. .stars .container:nth-child(41) .star {
  617.  width: inherit;
  618.  height: inherit;
  619.  animation-delay: -42.2s;
  620.  animation-duration: 26.6s;
  621.  background: #c898ae;
  622. }
  623. .stars .container:nth-child(42) {
  624.  width: 3px;
  625.  height: 3px;
  626.  left: 70vw;
  627.  animation-delay: -996.4s;
  628.  animation-duration: 14.6s;
  629. }
  630. .stars .container:nth-child(42) .star {
  631.  width: inherit;
  632.  height: inherit;
  633.  animation-delay: -45.5s;
  634.  animation-duration: 15.1s;
  635.  background: #fca074;
  636. }
  637. .stars .container:nth-child(43) {
  638.  width: 3px;
  639.  height: 3px;
  640.  left: 26vw;
  641.  animation-delay: -993.3333333333334s;
  642.  animation-duration: 18.8s;
  643. }
  644. .stars .container:nth-child(43) .star {
  645.  width: inherit;
  646.  height: inherit;
  647.  animation-delay: -48s;
  648.  animation-duration: 36.6s;
  649.  background: rgba(240,188,241,0.8);
  650. }
  651. .stars .container:nth-child(44) {
  652.  width: 2px;
  653.  height: 2px;
  654.  left: 48.5vw;
  655.  animation-delay: -995s;
  656.  animation-duration: 124.8s;
  657. }
  658. .stars .container:nth-child(44) .star {
  659.  width: inherit;
  660.  height: inherit;
  661.  animation-delay: -48s;
  662.  animation-duration: 38.1s;
  663.  background: rgba(209,217,217,0.7);
  664. }
  665. .stars .container:nth-child(45) {
  666.  width: 2px;
  667.  height: 2px;
  668.  left: 40vw;
  669.  animation-delay: -993.8s;
  670.  animation-duration: 85.5s;
  671. }
  672. .stars .container:nth-child(45) .star {
  673.  width: inherit;
  674.  height: inherit;
  675.  animation-delay: -44.8s;
  676.  animation-duration: 45.5s;
  677.  background: rgba(207,165,169,0.7);
  678. }
  679. .stars .container:nth-child(46) {
  680.  width: 1px;
  681.  height: 1px;
  682.  left: 90vw;
  683.  animation-delay: -986s;
  684.  animation-duration: 364.4s;
  685. }
  686. .stars .container:nth-child(46) .star {
  687.  width: inherit;
  688.  height: inherit;
  689.  animation-delay: -42.2s;
  690.  animation-duration: 6.1s;
  691.  background: rgba(224,197,159,0.8);
  692. }
  693. .stars .container:nth-child(47) {
  694.  width: 1px;
  695.  height: 1px;
  696.  left: 90.5vw;
  697.  animation-delay: -994.6s;
  698.  animation-duration: 218s;
  699. }
  700. .stars .container:nth-child(47) .star {
  701.  width: inherit;
  702.  height: inherit;
  703.  animation-delay: -46.3s;
  704.  animation-duration: 24.2s;
  705.  background: rgba(207,190,211,0.7);
  706. }
  707. .stars .container:nth-child(48) {
  708.  width: 3px;
  709.  height: 3px;
  710.  left: 50vw;
  711.  animation-delay: -996.8s;
  712.  animation-duration: 83.2s;
  713. }
  714. .stars .container:nth-child(48) .star {
  715.  width: inherit;
  716.  height: inherit;
  717.  animation-delay: -42.7s;
  718.  animation-duration: 20.6s;
  719.  background: #cfaa98;
  720. }
  721. .stars .container:nth-child(49) {
  722.  width: 3px;
  723.  height: 3px;
  724.  left: 25.5vw;
  725.  animation-delay: -998.0666666666667s;
  726.  animation-duration: 42.93333333333334s;
  727. }
  728. .stars .container:nth-child(49) .star {
  729.  width: inherit;
  730.  height: inherit;
  731.  animation-delay: -43.8s;
  732.  animation-duration: 21.4s;
  733.  background: rgba(232,250,206,0.9);
  734. }
  735. .stars .container:nth-child(50) {
  736.  width: 1px;
  737.  height: 1px;
  738.  left: 18.5vw;
  739.  animation-delay: -989.4s;
  740.  animation-duration: 72s;
  741. }
  742. .stars .container:nth-child(50) .star {
  743.  width: inherit;
  744.  height: inherit;
  745.  animation-delay: -45.6s;
  746.  animation-duration: 48s;
  747.  background: rgba(210,183,230,0.9);
  748. }
  749. .stars .container:nth-child(51) {
  750.  width: 1px;
  751.  height: 1px;
  752.  left: 82.5vw;
  753.  animation-delay: -994.6s;
  754.  animation-duration: 109.6s;
  755. }
  756. .stars .container:nth-child(51) .star {
  757.  width: inherit;
  758.  height: inherit;
  759.  animation-delay: -47.8s;
  760.  animation-duration: 31.5s;
  761.  background: rgba(226,158,161,0.9);
  762. }
  763. .stars .container:nth-child(52) {
  764.  width: 2px;
  765.  height: 2px;
  766.  left: 83vw;
  767.  animation-delay: -996.3s;
  768.  animation-duration: 132.6s;
  769. }
  770. .stars .container:nth-child(52) .star {
  771.  width: inherit;
  772.  height: inherit;
  773.  animation-delay: -42.3s;
  774.  animation-duration: 38.7s;
  775.  background: #d1dbd0;
  776. }
  777. .stars .container:nth-child(53) {
  778.  width: 1px;
  779.  height: 1px;
  780.  left: 63vw;
  781.  animation-delay: -985.6s;
  782.  animation-duration: 353.2s;
  783. }
  784. .stars .container:nth-child(53) .star {
  785.  width: inherit;
  786.  height: inherit;
  787.  animation-delay: -46.1s;
  788.  animation-duration: 8.4s;
  789.  background: rgba(211,158,164,0.8);
  790. }
  791. .stars .container:nth-child(54) {
  792.  width: 1px;
  793.  height: 1px;
  794.  left: 33vw;
  795.  animation-delay: -981.4s;
  796.  animation-duration: 145.6s;
  797. }
  798. .stars .container:nth-child(54) .star {
  799.  width: inherit;
  800.  height: inherit;
  801.  animation-delay: -44s;
  802.  animation-duration: 43.4s;
  803.  background: rgba(215,254,174,0.7);
  804. }
  805. .stars .container:nth-child(55) {
  806.  width: 2px;
  807.  height: 2px;
  808.  left: 27.5vw;
  809.  animation-delay: -992.9s;
  810.  animation-duration: 172.2s;
  811. }
  812. .stars .container:nth-child(55) .star {
  813.  width: inherit;
  814.  height: inherit;
  815.  animation-delay: -41.2s;
  816.  animation-duration: 32.5s;
  817.  background: #f4b3f0;
  818. }
  819. .stars .container:nth-child(56) {
  820.  width: 2px;
  821.  height: 2px;
  822.  left: 2vw;
  823.  animation-delay: -997.1s;
  824.  animation-duration: 82.9s;
  825. }
  826. .stars .container:nth-child(56) .star {
  827.  width: inherit;
  828.  height: inherit;
  829.  animation-delay: -45.2s;
  830.  animation-duration: 22.4s;
  831.  background: rgba(210,185,198,0.7);
  832. }
  833. .stars .container:nth-child(57) {
  834.  width: 2px;
  835.  height: 2px;
  836.  left: 58vw;
  837.  animation-delay: -994.6s;
  838.  animation-duration: 160.9s;
  839. }
  840. .stars .container:nth-child(57) .star {
  841.  width: inherit;
  842.  height: inherit;
  843.  animation-delay: -42.3s;
  844.  animation-duration: 11.7s;
  845.  background: rgba(222,227,255,0.9);
  846. }
  847. .stars .container:nth-child(58) {
  848.  width: 3px;
  849.  height: 3px;
  850.  left: 71.5vw;
  851.  animation-delay: -996.0666666666667s;
  852.  animation-duration: 26.2s;
  853. }
  854. .stars .container:nth-child(58) .star {
  855.  width: inherit;
  856.  height: inherit;
  857.  animation-delay: -45.8s;
  858.  animation-duration: 9.6s;
  859.  background: rgba(247,164,100,0.8);
  860. }
  861. .stars .container:nth-child(59) {
  862.  width: 3px;
  863.  height: 3px;
  864.  left: 24vw;
  865.  animation-delay: -998.0666666666667s;
  866.  animation-duration: 77s;
  867. }
  868. .stars .container:nth-child(59) .star {
  869.  width: inherit;
  870.  height: inherit;
  871.  animation-delay: -45.6s;
  872.  animation-duration: 35.2s;
  873.  background: rgba(207,158,238,0.9);
  874. }
  875. .stars .container:nth-child(60) {
  876.  width: 1px;
  877.  height: 1px;
  878.  left: 91.5vw;
  879.  animation-delay: -989s;
  880.  animation-duration: 102.2s;
  881. }
  882. .stars .container:nth-child(60) .star {
  883.  width: inherit;
  884.  height: inherit;
  885.  animation-delay: -49.3s;
  886.  animation-duration: 9s;
  887.  background: rgba(239,192,230,0.7);
  888. }
  889. .stars .container:nth-child(61) {
  890.  width: 1px;
  891.  height: 1px;
  892.  left: 13.5vw;
  893.  animation-delay: -989.2s;
  894.  animation-duration: 342.6s;
  895. }
  896. .stars .container:nth-child(61) .star {
  897.  width: inherit;
  898.  height: inherit;
  899.  animation-delay: -40.7s;
  900.  animation-duration: 14.5s;
  901.  background: rgba(200,208,146,0.8);
  902. }
  903. .stars .container:nth-child(62) {
  904.  width: 2px;
  905.  height: 2px;
  906.  left: 7vw;
  907.  animation-delay: -995.6s;
  908.  animation-duration: 166s;
  909. }
  910. .stars .container:nth-child(62) .star {
  911.  width: inherit;
  912.  height: inherit;
  913.  animation-delay: -49.9s;
  914.  animation-duration: 20.6s;
  915.  background: rgba(239,174,222,0.9);
  916. }
  917. .stars .container:nth-child(63) {
  918.  width: 2px;
  919.  height: 2px;
  920.  left: 29vw;
  921.  animation-delay: -990.1s;
  922.  animation-duration: 149.9s;
  923. }
  924. .stars .container:nth-child(63) .star {
  925.  width: inherit;
  926.  height: inherit;
  927.  animation-delay: -41.6s;
  928.  animation-duration: 23.6s;
  929.  background: rgba(227,242,194,0.9);
  930. }
  931. .stars .container:nth-child(64) {
  932.  width: 2px;
  933.  height: 2px;
  934.  left: 57.5vw;
  935.  animation-delay: -997.7s;
  936.  animation-duration: 28.8s;
  937. }
  938. .stars .container:nth-child(64) .star {
  939.  width: inherit;
  940.  height: inherit;
  941.  animation-delay: -49.1s;
  942.  animation-duration: 6s;
  943.  background: rgba(247,244,143,0.7);
  944. }
  945. .stars .container:nth-child(65) {
  946.  width: 2px;
  947.  height: 2px;
  948.  left: 41.5vw;
  949.  animation-delay: -991.3s;
  950.  animation-duration: 86.2s;
  951. }
  952. .stars .container:nth-child(65) .star {
  953.  width: inherit;
  954.  height: inherit;
  955.  animation-delay: -41.3s;
  956.  animation-duration: 34.1s;
  957.  background: #deaeab;
  958. }
  959. .stars .container:nth-child(66) {
  960.  width: 3px;
  961.  height: 3px;
  962.  left: 47vw;
  963.  animation-delay: -997.3333333333334s;
  964.  animation-duration: 50.26666666666667s;
  965. }
  966. .stars .container:nth-child(66) .star {
  967.  width: inherit;
  968.  height: inherit;
  969.  animation-delay: -45.6s;
  970.  animation-duration: 32.5s;
  971.  background: rgba(231,255,247,0.8);
  972. }
  973. .stars .container:nth-child(67) {
  974.  width: 3px;
  975.  height: 3px;
  976.  left: 23vw;
  977.  animation-delay: -997.9333333333333s;
  978.  animation-duration: 121.60000000000001s;
  979. }
  980. .stars .container:nth-child(67) .star {
  981.  width: inherit;
  982.  height: inherit;
  983.  animation-delay: -48s;
  984.  animation-duration: 33.6s;
  985.  background: rgba(237,206,110,0.9);
  986. }
  987. .stars .container:nth-child(68) {
  988.  width: 1px;
  989.  height: 1px;
  990.  left: 64.5vw;
  991.  animation-delay: -998.6s;
  992.  animation-duration: 206.2s;
  993. }
  994. .stars .container:nth-child(68) .star {
  995.  width: inherit;
  996.  height: inherit;
  997.  animation-delay: -45.4s;
  998.  animation-duration: 18.7s;
  999.  background: #c8cdca;
  1000. }
  1001. .stars .container:nth-child(69) {
  1002.  width: 2px;
  1003.  height: 2px;
  1004.  left: 81.5vw;
  1005.  animation-delay: -996.3s;
  1006.  animation-duration: 30.4s;
  1007. }
  1008. .stars .container:nth-child(69) .star {
  1009.  width: inherit;
  1010.  height: inherit;
  1011.  animation-delay: -46.2s;
  1012.  animation-duration: 27.5s;
  1013.  background: rgba(226,211,201,0.9);
  1014. }
  1015. .stars .container:nth-child(70) {
  1016.  width: 3px;
  1017.  height: 3px;
  1018.  left: 99.5vw;
  1019.  animation-delay: -996.0666666666667s;
  1020.  animation-duration: 83.93333333333334s;
  1021. }
  1022. .stars .container:nth-child(70) .star {
  1023.  width: inherit;
  1024.  height: inherit;
  1025.  animation-delay: -48.3s;
  1026.  animation-duration: 46.3s;
  1027.  background: rgba(209,189,115,0.8);
  1028. }
  1029. .stars .container:nth-child(71) {
  1030.  width: 2px;
  1031.  height: 2px;
  1032.  left: 17vw;
  1033.  animation-delay: -995s;
  1034.  animation-duration: 60.4s;
  1035. }
  1036. .stars .container:nth-child(71) .star {
  1037.  width: inherit;
  1038.  height: inherit;
  1039.  animation-delay: -45s;
  1040.  animation-duration: 30.5s;
  1041.  background: #f6fefa;
  1042. }
  1043. .stars .container:nth-child(72) {
  1044.  width: 2px;
  1045.  height: 2px;
  1046.  left: 3vw;
  1047.  animation-delay: -997s;
  1048.  animation-duration: 36.6s;
  1049. }
  1050. .stars .container:nth-child(72) .star {
  1051.  width: inherit;
  1052.  height: inherit;
  1053.  animation-delay: -48.2s;
  1054.  animation-duration: 43.8s;
  1055.  background: rgba(234,158,112,0.8);
  1056. }
  1057. .stars .container:nth-child(73) {
  1058.  width: 2px;
  1059.  height: 2px;
  1060.  left: 73vw;
  1061.  animation-delay: -993.5s;
  1062.  animation-duration: 59.3s;
  1063. }
  1064. .stars .container:nth-child(73) .star {
  1065.  width: inherit;
  1066.  height: inherit;
  1067.  animation-delay: -43.8s;
  1068.  animation-duration: 39.9s;
  1069.  background: rgba(215,173,199,0.7);
  1070. }
  1071. .stars .container:nth-child(74) {
  1072.  width: 2px;
  1073.  height: 2px;
  1074.  left: 74.5vw;
  1075.  animation-delay: -994.4s;
  1076.  animation-duration: 20.7s;
  1077. }
  1078. .stars .container:nth-child(74) .star {
  1079.  width: inherit;
  1080.  height: inherit;
  1081.  animation-delay: -42.8s;
  1082.  animation-duration: 22.9s;
  1083.  background: rgba(215,197,203,0.7);
  1084. }
  1085. .stars .container:nth-child(75) {
  1086.  width: 3px;
  1087.  height: 3px;
  1088.  left: 20vw;
  1089.  animation-delay: -995.2666666666667s;
  1090.  animation-duration: 53.06666666666666s;
  1091. }
  1092. .stars .container:nth-child(75) .star {
  1093.  width: inherit;
  1094.  height: inherit;
  1095.  animation-delay: -47s;
  1096.  animation-duration: 32s;
  1097.  background: rgba(211,229,239,0.7);
  1098. }
  1099. .stars .container:nth-child(76) {
  1100.  width: 1px;
  1101.  height: 1px;
  1102.  left: 72vw;
  1103.  animation-delay: -988.2s;
  1104.  animation-duration: 71.4s;
  1105. }
  1106. .stars .container:nth-child(76) .star {
  1107.  width: inherit;
  1108.  height: inherit;
  1109.  animation-delay: -48s;
  1110.  animation-duration: 47.1s;
  1111.  background: #cfd987;
  1112. }
  1113. .stars .container:nth-child(77) {
  1114.  width: 1px;
  1115.  height: 1px;
  1116.  left: 80.5vw;
  1117.  animation-delay: -982.4s;
  1118.  animation-duration: 235s;
  1119. }
  1120. .stars .container:nth-child(77) .star {
  1121.  width: inherit;
  1122.  height: inherit;
  1123.  animation-delay: -41.3s;
  1124.  animation-duration: 41s;
  1125.  background: rgba(215,241,184,0.7);
  1126. }
  1127. .stars .container:nth-child(78) {
  1128.  width: 1px;
  1129.  height: 1px;
  1130.  left: 20.5vw;
  1131.  animation-delay: -991.8s;
  1132.  animation-duration: 315.8s;
  1133. }
  1134. .stars .container:nth-child(78) .star {
  1135.  width: inherit;
  1136.  height: inherit;
  1137.  animation-delay: -42s;
  1138.  animation-duration: 37.5s;
  1139.  background: rgba(214,228,181,0.8);
  1140. }
  1141. .stars .container:nth-child(79) {
  1142.  width: 2px;
  1143.  height: 2px;
  1144.  left: 55.5vw;
  1145.  animation-delay: -990.9s;
  1146.  animation-duration: 142.3s;
  1147. }
  1148. .stars .container:nth-child(79) .star {
  1149.  width: inherit;
  1150.  height: inherit;
  1151.  animation-delay: -46.7s;
  1152.  animation-duration: 40.5s;
  1153.  background: rgba(229,223,241,0.8);
  1154. }
  1155. .stars .container:nth-child(80) {
  1156.  width: 1px;
  1157.  height: 1px;
  1158.  left: 77vw;
  1159.  animation-delay: -988.4s;
  1160.  animation-duration: 238.6s;
  1161. }
  1162. .stars .container:nth-child(80) .star {
  1163.  width: inherit;
  1164.  height: inherit;
  1165.  animation-delay: -47.3s;
  1166.  animation-duration: 9.1s;
  1167.  background: rgba(240,195,139,0.9);
  1168. }
  1169. .stars .container:nth-child(81) {
  1170.  width: 3px;
  1171.  height: 3px;
  1172.  left: 35.5vw;
  1173.  animation-delay: -999.5333333333333s;
  1174.  animation-duration: 118.06666666666666s;
  1175. }
  1176. .stars .container:nth-child(81) .star {
  1177.  width: inherit;
  1178.  height: inherit;
  1179.  animation-delay: -44.8s;
  1180.  animation-duration: 26s;
  1181.  background: rgba(212,210,162,0.7);
  1182. }
  1183. .stars .container:nth-child(82) {
  1184.  width: 2px;
  1185.  height: 2px;
  1186.  left: 58vw;
  1187.  animation-delay: -998.1s;
  1188.  animation-duration: 57.7s;
  1189. }
  1190. .stars .container:nth-child(82) .star {
  1191.  width: inherit;
  1192.  height: inherit;
  1193.  animation-delay: -45.1s;
  1194.  animation-duration: 32.4s;
  1195.  background: #f5ccff;
  1196. }
  1197. .stars .container:nth-child(83) {
  1198.  width: 2px;
  1199.  height: 2px;
  1200.  left: 35vw;
  1201.  animation-delay: -998.6s;
  1202.  animation-duration: 55.1s;
  1203. }
  1204. .stars .container:nth-child(83) .star {
  1205.  width: inherit;
  1206.  height: inherit;
  1207.  animation-delay: -48s;
  1208.  animation-duration: 7.2s;
  1209.  background: rgba(243,150,102,0.7);
  1210. }
  1211. .stars .container:nth-child(84) {
  1212.  width: 2px;
  1213.  height: 2px;
  1214.  left: 56vw;
  1215.  animation-delay: -999s;
  1216.  animation-duration: 127.5s;
  1217. }
  1218. .stars .container:nth-child(84) .star {
  1219.  width: inherit;
  1220.  height: inherit;
  1221.  animation-delay: -44.6s;
  1222.  animation-duration: 37.3s;
  1223.  background: rgba(205,213,223,0.7);
  1224. }
  1225. .stars .container:nth-child(85) {
  1226.  width: 3px;
  1227.  height: 3px;
  1228.  left: 71vw;
  1229.  animation-delay: -999.4666666666667s;
  1230.  animation-duration: 104.73333333333333s;
  1231. }
  1232. .stars .container:nth-child(85) .star {
  1233.  width: inherit;
  1234.  height: inherit;
  1235.  animation-delay: -47.1s;
  1236.  animation-duration: 14.5s;
  1237.  background: rgba(248,220,213,0.7);
  1238. }
  1239. .stars .container:nth-child(86) {
  1240.  width: 2px;
  1241.  height: 2px;
  1242.  left: 20.5vw;
  1243.  animation-delay: -992.5s;
  1244.  animation-duration: 58.5s;
  1245. }
  1246. .stars .container:nth-child(86) .star {
  1247.  width: inherit;
  1248.  height: inherit;
  1249.  animation-delay: -47.7s;
  1250.  animation-duration: 6.4s;
  1251.  background: #f1e0e8;
  1252. }
  1253. .stars .container:nth-child(87) {
  1254.  width: 2px;
  1255.  height: 2px;
  1256.  left: 36.5vw;
  1257.  animation-delay: -998.4s;
  1258.  animation-duration: 170.7s;
  1259. }
  1260. .stars .container:nth-child(87) .star {
  1261.  width: inherit;
  1262.  height: inherit;
  1263.  animation-delay: -43s;
  1264.  animation-duration: 34.7s;
  1265.  background: #cdea8f;
  1266. }
  1267. .stars .container:nth-child(88) {
  1268.  width: 3px;
  1269.  height: 3px;
  1270.  left: 100vw;
  1271.  animation-delay: -993.6666666666666s;
  1272.  animation-duration: 31.46666666666667s;
  1273. }
  1274. .stars .container:nth-child(88) .star {
  1275.  width: inherit;
  1276.  height: inherit;
  1277.  animation-delay: -46.3s;
  1278.  animation-duration: 32.1s;
  1279.  background: rgba(200,215,255,0.8);
  1280. }
  1281. .stars .container:nth-child(89) {
  1282.  width: 3px;
  1283.  height: 3px;
  1284.  left: 30.5vw;
  1285.  animation-delay: -995.8666666666667s;
  1286.  animation-duration: 16s;
  1287. }
  1288. .stars .container:nth-child(89) .star {
  1289.  width: inherit;
  1290.  height: inherit;
  1291.  animation-delay: -46.3s;
  1292.  animation-duration: 31.2s;
  1293.  background: rgba(246,214,235,0.8);
  1294. }
  1295. .stars .container:nth-child(90) {
  1296.  width: 1px;
  1297.  height: 1px;
  1298.  left: 37.5vw;
  1299.  animation-delay: -999.6s;
  1300.  animation-duration: 272.6s;
  1301. }
  1302. .stars .container:nth-child(90) .star {
  1303.  width: inherit;
  1304.  height: inherit;
  1305.  animation-delay: -49.8s;
  1306.  animation-duration: 16.7s;
  1307.  background: rgba(216,227,106,0.9);
  1308. }
  1309. .stars .container:nth-child(91) {
  1310.  width: 1px;
  1311.  height: 1px;
  1312.  left: 99vw;
  1313.  animation-delay: -990s;
  1314.  animation-duration: 66.8s;
  1315. }
  1316. .stars .container:nth-child(91) .star {
  1317.  width: inherit;
  1318.  height: inherit;
  1319.  animation-delay: -48.5s;
  1320.  animation-duration: 41.8s;
  1321.  background: rgba(228,217,202,0.7);
  1322. }
  1323. .stars .container:nth-child(92) {
  1324.  width: 3px;
  1325.  height: 3px;
  1326.  left: 86vw;
  1327.  animation-delay: -995.6s;
  1328.  animation-duration: 27.066666666666666s;
  1329. }
  1330. .stars .container:nth-child(92) .star {
  1331.  width: inherit;
  1332.  height: inherit;
  1333.  animation-delay: -46.8s;
  1334.  animation-duration: 12.3s;
  1335.  background: rgba(242,192,240,0.8);
  1336. }
  1337. .stars .container:nth-child(93) {
  1338.  width: 1px;
  1339.  height: 1px;
  1340.  left: 52.5vw;
  1341.  animation-delay: -993s;
  1342.  animation-duration: 335s;
  1343. }
  1344. .stars .container:nth-child(93) .star {
  1345.  width: inherit;
  1346.  height: inherit;
  1347.  animation-delay: -40.3s;
  1348.  animation-duration: 35.6s;
  1349.  background: rgba(225,193,194,0.9);
  1350. }
  1351. .stars .container:nth-child(94) {
  1352.  width: 3px;
  1353.  height: 3px;
  1354.  left: 73.5vw;
  1355.  animation-delay: -999.5333333333333s;
  1356.  animation-duration: 121.46666666666665s;
  1357. }
  1358. .stars .container:nth-child(94) .star {
  1359.  width: inherit;
  1360.  height: inherit;
  1361.  animation-delay: -42.6s;
  1362.  animation-duration: 50s;
  1363.  background: #e4c5b2;
  1364. }
  1365. .stars .container:nth-child(95) {
  1366.  width: 2px;
  1367.  height: 2px;
  1368.  left: 32vw;
  1369.  animation-delay: -990.3s;
  1370.  animation-duration: 117.7s;
  1371. }
  1372. .stars .container:nth-child(95) .star {
  1373.  width: inherit;
  1374.  height: inherit;
  1375.  animation-delay: -47.3s;
  1376.  animation-duration: 19.9s;
  1377.  background: #e1c0af;
  1378. }
  1379. .stars .container:nth-child(96) {
  1380.  width: 1px;
  1381.  height: 1px;
  1382.  left: 32vw;
  1383.  animation-delay: -996.4s;
  1384.  animation-duration: 326s;
  1385. }
  1386. .stars .container:nth-child(96) .star {
  1387.  width: inherit;
  1388.  height: inherit;
  1389.  animation-delay: -44s;
  1390.  animation-duration: 45.6s;
  1391.  background: #eed46e;
  1392. }
  1393. .stars .container:nth-child(97) {
  1394.  width: 3px;
  1395.  height: 3px;
  1396.  left: 30vw;
  1397.  animation-delay: -994.4s;
  1398.  animation-duration: 73.73333333333333s;
  1399. }
  1400. .stars .container:nth-child(97) .star {
  1401.  width: inherit;
  1402.  height: inherit;
  1403.  animation-delay: -43.8s;
  1404.  animation-duration: 22.4s;
  1405.  background: rgba(253,230,187,0.7);
  1406. }
  1407. .stars .container:nth-child(98) {
  1408.  width: 3px;
  1409.  height: 3px;
  1410.  left: 83.5vw;
  1411.  animation-delay: -998.5333333333333s;
  1412.  animation-duration: 15.666666666666666s;
  1413. }
  1414. .stars .container:nth-child(98) .star {
  1415.  width: inherit;
  1416.  height: inherit;
  1417.  animation-delay: -48.8s;
  1418.  animation-duration: 19.5s;
  1419.  background: rgba(209,209,188,0.9);
  1420. }
  1421. .stars .container:nth-child(99) {
  1422.  width: 1px;
  1423.  height: 1px;
  1424.  left: 62.5vw;
  1425.  animation-delay: -999.2s;
  1426.  animation-duration: 294.4s;
  1427. }
  1428. .stars .container:nth-child(99) .star {
  1429.  width: inherit;
  1430.  height: inherit;
  1431.  animation-delay: -43.8s;
  1432.  animation-duration: 48.9s;
  1433.  background: #d3e7f9;
  1434. }
  1435. .stars .container:nth-child(100) {
  1436.  width: 3px;
  1437.  height: 3px;
  1438.  left: 35.5vw;
  1439.  animation-delay: -993.8666666666667s;
  1440.  animation-duration: 58.06666666666666s;
  1441. }
  1442. .stars .container:nth-child(100) .star {
  1443.  width: inherit;
  1444.  height: inherit;
  1445.  animation-delay: -45.1s;
  1446.  animation-duration: 26.5s;
  1447.  background: #ebdfa5;
  1448. }
  1449. @-moz-keyframes stars {
  1450.  0% {
  1451.  top: 110vh;
  1452.  }
  1453.  100% {
  1454.  top: -10vh;
  1455.  }
  1456. }
  1457. @-webkit-keyframes stars {
  1458.  0% {
  1459.  top: 110vh;
  1460.  }
  1461.  100% {
  1462.  top: -10vh;
  1463.  }
  1464. }
  1465. @-o-keyframes stars {
  1466.  0% {
  1467.  top: 110vh;
  1468.  }
  1469.  100% {
  1470.  top: -10vh;
  1471.  }
  1472. }
  1473. @keyframes stars {
  1474.  0% {
  1475.  top: 110vh;
  1476.  }
  1477.  100% {
  1478.  top: -10vh;
  1479.  }
  1480. }
  1481. @-moz-keyframes twinkle {
  1482.  0%, 80%, 100% {
  1483.  opacity: 0.7;
  1484.  box-shadow: 0 0 0 #fff, 0 0 0 #fff;
  1485.  }
  1486.  95% {
  1487.  opacity: 1;
  1488.  box-shadow: 0 0 2px #fff, 0 0 4px #fff;
  1489.  }
  1490. }
  1491. @-webkit-keyframes twinkle {
  1492.  0%, 80%, 100% {
  1493.  opacity: 0.7;
  1494.  box-shadow: 0 0 0 #fff, 0 0 0 #fff;
  1495.  }
  1496.  95% {
  1497.  opacity: 1;
  1498.  box-shadow: 0 0 2px #fff, 0 0 4px #fff;
  1499.  }
  1500. }
  1501. @-o-keyframes twinkle {
  1502.  0%, 80%, 100% {
  1503.  opacity: 0.7;
  1504.  box-shadow: 0 0 0 #fff, 0 0 0 #fff;
  1505.  }
  1506.  95% {
  1507.  opacity: 1;
  1508.  box-shadow: 0 0 2px #fff, 0 0 4px #fff;
  1509.  }
  1510. }
  1511. @keyframes twinkle {
  1512.  0%, 80%, 100% {
  1513.  opacity: 0.7;
  1514.  box-shadow: 0 0 0 #fff, 0 0 0 #fff;
  1515.  }
  1516.  95% {
  1517.  opacity: 1;
  1518.  box-shadow: 0 0 2px #fff, 0 0 4px #fff;
  1519.  }
  1520. }
  1521.  
  1522. /* Stars End */
  1523.  
  1524.  
  1525. /*Don't touch anything but the image url */
  1526. #main{
  1527.     background:url('http://puu.sh/p7uE7.png') no-repeat;
  1528. background-size: 403px 600px;
  1529.     background-position: right bottom;
  1530. height: 95%;
  1531. width: 100%;
  1532.  
  1533.  
  1534. }
  1535.  
  1536. /* Header yaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaay */
  1537. h1{
  1538.  font-size:50pt;
  1539.  font-family: Cookie;
  1540.  background: -webkit-gradient(linear, left top, left bottom, from(#edddde), to(#e36046));
  1541.  -webkit-background-clip: text;
  1542.  -webkit-text-fill-color: transparent;
  1543.  opacity: 0.5;
  1544.  left: 0;
  1545.  top: 50%;
  1546.  width: 100%;
  1547.  text-align: center;
  1548. }
  1549. h1:hover {
  1550.  font-size:50pt;
  1551. -webkit-transition-duration: .90s;
  1552.  opacity: 2;
  1553.  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  1554. }
  1555.  
  1556. /*End header*/
  1557.  
  1558.  
  1559. /*Heartbeat duh, no touch u man ho*/
  1560. @-webkit-keyframes heartbeat {
  1561.  0% {
  1562.  -moz-transform: rotate(45deg) scale(1);
  1563.  -ms-transform: rotate(45deg) scale(1);
  1564.  -webkit-transform: rotate(45deg) scale(1);
  1565.  transform: rotate(45deg) scale(1);
  1566.  }
  1567.  14% {
  1568.  -moz-transform: rotate(45deg) scale(1.3);
  1569.  -ms-transform: rotate(45deg) scale(1.3);
  1570.  -webkit-transform: rotate(45deg) scale(1.3);
  1571.  transform: rotate(45deg) scale(1.3);
  1572.  }
  1573.  28% {
  1574.  -moz-transform: rotate(45deg) scale(1);
  1575.  -ms-transform: rotate(45deg) scale(1);
  1576.  -webkit-transform: rotate(45deg) scale(1);
  1577.  transform: rotate(45deg) scale(1);
  1578.  }
  1579.  42% {
  1580.  -moz-transform: rotate(45deg) scale(1.3);
  1581.  -ms-transform: rotate(45deg) scale(1.3);
  1582.  -webkit-transform: rotate(45deg) scale(1.3);
  1583.  transform: rotate(45deg) scale(1.3);
  1584.  }
  1585.  70% {
  1586.  -moz-transform: rotate(45deg) scale(1);
  1587.  -ms-transform: rotate(45deg) scale(1);
  1588.  -webkit-transform: rotate(45deg) scale(1);
  1589.  transform: rotate(45deg) scale(1);
  1590.  }
  1591. }
  1592. @-moz-keyframes heartbeat {
  1593.  0% {
  1594.  -moz-transform: rotate(45deg) scale(1);
  1595.  -ms-transform: rotate(45deg) scale(1);
  1596.  -webkit-transform: rotate(45deg) scale(1);
  1597.  transform: rotate(45deg) scale(1);
  1598.  }
  1599.  14% {
  1600.  -moz-transform: rotate(45deg) scale(1.3);
  1601.  -ms-transform: rotate(45deg) scale(1.3);
  1602.  -webkit-transform: rotate(45deg) scale(1.3);
  1603.  transform: rotate(45deg) scale(1.3);
  1604.  }
  1605.  28% {
  1606.  -moz-transform: rotate(45deg) scale(1);
  1607.  -ms-transform: rotate(45deg) scale(1);
  1608.  -webkit-transform: rotate(45deg) scale(1);
  1609.  transform: rotate(45deg) scale(1);
  1610.  }
  1611.  42% {
  1612.  -moz-transform: rotate(45deg) scale(1.3);
  1613.  -ms-transform: rotate(45deg) scale(1.3);
  1614.  -webkit-transform: rotate(45deg) scale(1.3);
  1615.  transform: rotate(45deg) scale(1.3);
  1616.  }
  1617.  70% {
  1618.  -moz-transform: rotate(45deg) scale(1);
  1619.  -ms-transform: rotate(45deg) scale(1);
  1620.  -webkit-transform: rotate(45deg) scale(1);
  1621.  transform: rotate(45deg) scale(1);
  1622.  }
  1623. }
  1624. @-o-keyframes heartbeat {
  1625.  0% {
  1626.  -moz-transform: rotate(45deg) scale(1);
  1627.  -ms-transform: rotate(45deg) scale(1);
  1628.  -webkit-transform: rotate(45deg) scale(1);
  1629.  transform: rotate(45deg) scale(1);
  1630.  }
  1631.  14% {
  1632.  -moz-transform: rotate(45deg) scale(1.3);
  1633.  -ms-transform: rotate(45deg) scale(1.3);
  1634.  -webkit-transform: rotate(45deg) scale(1.3);
  1635.  transform: rotate(45deg) scale(1.3);
  1636.  }
  1637.  28% {
  1638.  -moz-transform: rotate(45deg) scale(1);
  1639.  -ms-transform: rotate(45deg) scale(1);
  1640.  -webkit-transform: rotate(45deg) scale(1);
  1641.  transform: rotate(45deg) scale(1);
  1642.  }
  1643.  42% {
  1644.  -moz-transform: rotate(45deg) scale(1.3);
  1645.  -ms-transform: rotate(45deg) scale(1.3);
  1646.  -webkit-transform: rotate(45deg) scale(1.3);
  1647.  transform: rotate(45deg) scale(1.3);
  1648.  }
  1649.  70% {
  1650.  -moz-transform: rotate(45deg) scale(1);
  1651.  -ms-transform: rotate(45deg) scale(1);
  1652.  -webkit-transform: rotate(45deg) scale(1);
  1653.  transform: rotate(45deg) scale(1);
  1654.  }
  1655. }
  1656. @keyframes heartbeat {
  1657.  0% {
  1658.  -moz-transform: rotate(45deg) scale(1);
  1659.  -ms-transform: rotate(45deg) scale(1);
  1660.  -webkit-transform: rotate(45deg) scale(1);
  1661.  transform: rotate(45deg) scale(1);
  1662.  }
  1663.  14% {
  1664.  -moz-transform: rotate(45deg) scale(1.3);
  1665.  -ms-transform: rotate(45deg) scale(1.3);
  1666.  -webkit-transform: rotate(45deg) scale(1.3);
  1667.  transform: rotate(45deg) scale(1.3);
  1668.  }
  1669.  28% {
  1670.  -moz-transform: rotate(45deg) scale(1);
  1671.  -ms-transform: rotate(45deg) scale(1);
  1672.  -webkit-transform: rotate(45deg) scale(1);
  1673.  transform: rotate(45deg) scale(1);
  1674.  }
  1675.  42% {
  1676.  -moz-transform: rotate(45deg) scale(1.3);
  1677.  -ms-transform: rotate(45deg) scale(1.3);
  1678.  -webkit-transform: rotate(45deg) scale(1.3);
  1679.  transform: rotate(45deg) scale(1.3);
  1680.  }
  1681.  70% {
  1682.  -moz-transform: rotate(45deg) scale(1);
  1683.  -ms-transform: rotate(45deg) scale(1);
  1684.  -webkit-transform: rotate(45deg) scale(1);
  1685.  transform: rotate(45deg) scale(1);
  1686.  }
  1687. }
  1688. body {
  1689.  text-align: center;
  1690.  padding: 50px;
  1691. }
  1692.  
  1693. /* Styles for old versions of IE */
  1694. .heartbeat {
  1695.  font-family: sans-serif;
  1696.  font-weight: 100;
  1697. }
  1698.  
  1699. /* :not(:required) hides this rule from IE9 and below */
  1700. .heartbeat:not(:required) {
  1701.  -webkit-animation: heartbeat 1300ms ease 0s infinite normal;
  1702.  -khtml-animation: heartbeat 1300ms ease 0s infinite normal;
  1703.  -moz-animation: heartbeat 1300ms ease 0s infinite normal;
  1704.  -ms-animation: heartbeat 1300ms ease 0s infinite normal;
  1705.  -o-animation: heartbeat 1300ms ease 0s infinite normal;
  1706.  animation: heartbeat 1300ms ease 0s infinite normal;
  1707.  display: inline-block;
  1708.  position: relative;
  1709.  overflow: hidden;
  1710.  text-indent: -9999px;
  1711.  width: 36px;
  1712.  height: 36px;
  1713.  -moz-transform: rotate(45deg) scale(1);
  1714.  -ms-transform: rotate(45deg) scale(1);
  1715.  -webkit-transform: rotate(45deg) scale(1);
  1716.  transform: rotate(45deg) scale(1);
  1717.  -moz-transform-origin: 50% 50%;
  1718.  -ms-transform-origin: 50% 50%;
  1719.  -webkit-transform-origin: 50% 50%;
  1720.  transform-origin: 50% 50%;
  1721. }
  1722. .heartbeat:not(:required):after, .heartbeat:not(:required):before {
  1723.  position: absolute;
  1724.  content: "";
  1725.  background: #e87;
  1726. }
  1727. .heartbeat:not(:required):before {
  1728.  -moz-border-radius-topleft: 12px;
  1729.  -webkit-border-top-left-radius: 12px;
  1730.  border-top-left-radius: 12px;
  1731.  -moz-border-radius-bottomleft: 12px;
  1732.  -webkit-border-bottom-left-radius: 12px;
  1733.  border-bottom-left-radius: 12px;
  1734.  top: 12px;
  1735.  left: 0;
  1736.  width: 36px;
  1737.  height: 24px;
  1738. }
  1739. .heartbeat:not(:required):after {
  1740.  -moz-border-radius-topleft: 12px;
  1741.  -webkit-border-top-left-radius: 12px;
  1742.  border-top-left-radius: 12px;
  1743.  -moz-border-radius-topright: 12px;
  1744.  -webkit-border-top-right-radius: 12px;
  1745.  border-top-right-radius: 12px;
  1746.  top: 0;
  1747.  left: 12px;
  1748.  width: 24px;
  1749.  height: 12px;
  1750. }
  1751.  
  1752. /* End heart beat stuff. */
  1753.  
  1754. /*About box styling, don't touch anything not a photo, or colors. :v */
  1755.  
  1756. .about-me {
  1757.  position: fixed;
  1758.  top: 10%;
  1759.  left: 15%;
  1760.  width: 250px;
  1761.  height: 550px;
  1762.  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/greyzz.png);
  1763.  border: 2px solid pink;
  1764.  outline: 5px dashed pink;
  1765.  outline-offset: 10px;
  1766.  padding: 1em;
  1767.  margin: 35px; /* added to offset from Codepen edge */
  1768. }
  1769.  
  1770.  
  1771. .about-me h2 {
  1772.  font-family: 'Parisienne', sans-serif;
  1773.  text-align: center;
  1774.  font-size: 3em;
  1775.  margin: 0;
  1776.  color: pink;
  1777.  text-shadow: 1px 1px 0px rgba(0,0,0, .2);
  1778. }
  1779.  
  1780. .about-me img {
  1781.  border: 5px solid pink;
  1782.  border-radius: 50%;
  1783.  box-shadow: 1px 1px 1px gray;
  1784.  display: block;
  1785.  margin: 0 auto;
  1786. }
  1787.  
  1788. .about-me p {
  1789.  text-align: justify;
  1790.  line-height: 1.5;
  1791.  font-family: 'Prata', serif;
  1792. }
  1793.  
  1794. /*end box*/
  1795.  
  1796.  
  1797. /*Make the navigation work*/
  1798. .onclick {
  1799.     /* text boxes*/
  1800.  position: fixed;
  1801.  top: 16%;
  1802.  left: 16%;
  1803.  width: 240px;
  1804.  height: 500px;
  1805.     opacity: 0;
  1806.     margin: 10px;
  1807.     color: #20141a;
  1808.      font-family: 'Parisienne', sans-serif;font-size: 15px;
  1809.     line-height: 23px;
  1810.     text-transform: none;
  1811.     text-indent: 2px;
  1812.     text-align: justify;
  1813.     text-shadow: 0px 0px 15px #fefefe;
  1814.     letter-spacing: 0em;
  1815.     font-variant: normal;
  1816.     padding: 10px 10px 0px 10px;
  1817.     overflow: auto;
  1818.     visibility: hidden;
  1819.     transition: 0.5s ease-in-out;
  1820.     z-index: 100;
  1821.     }
  1822.  
  1823. .onclick:target {
  1824.     /* Bring panels into view. */
  1825.     opacity: 1;/*NO TOUCH*/
  1826.     visibility: visible;
  1827.     transition: .2s ease-in-out; /*Yeah you ease in and out you filthy whore.*/
  1828.     overflow-x: hidden;
  1829.     overflow-y: auto;
  1830.  
  1831.     }
  1832.    
  1833.     /*Who lives in a navigation under the sea*/
  1834. #navigation {
  1835.     /* Navigation position */
  1836.  position: fixed;
  1837.  top: 80;
  1838.  left: -38;
  1839.  height: 100%;
  1840.  list-style-type: none;
  1841.  margin: 0;
  1842.  padding: 0;
  1843.  background: transparent;
  1844.     }
  1845. #navigation li a{
  1846.  display:block;
  1847.  height:em;
  1848.  width:5em;
  1849.  text-indent:-500em;
  1850.  line-height:5em;
  1851.  text-align:center;
  1852.  color: #edddde;
  1853.  background: transparent;
  1854.  position: relative;
  1855.  border-bottom: 1px solid #ffe2e3;
  1856.  transition: background 0.3s ease-in-out;
  1857. }
  1858. #navigation li a:before {
  1859.  font-family: FontAwesome;
  1860.  speak: none;
  1861.  text-indent: 0em;
  1862.  position: absolute;
  1863.  top: 0;
  1864.  left: 0;
  1865.  width: 100%;
  1866.  height: 100%;
  1867.  font-size: 1.4em;
  1868. }
  1869. navigation li a.pressplay:hover {
  1870.  color: #f9cfaf ;
  1871.  content: "\f001";}
  1872. #navigation li a.search:before {
  1873.  content: "\f002";
  1874. }
  1875. #navigation li audio.music:before {
  1876.  content: "\f001";
  1877. }
  1878. #navigation li a.pencil:before {
  1879.  content: "\f040";
  1880. }
  1881. #navigation li a.contact:before {
  1882.  content: "\f003";
  1883. }
  1884. #navigation li a.about:before {
  1885.  content: "\f007";
  1886. }
  1887. #navigation li a.home:before {
  1888.  content: "\f015";
  1889. }
  1890. #navigation li a:hover{
  1891.  background: #ff5c62;
  1892.  color: #fff;
  1893. }
  1894. #navigation li.current a {
  1895.  background: #ff5e5e;
  1896.  color: #fff;
  1897. }
  1898. #navigation li a.active {
  1899.  background: transparent;
  1900.  color: #fff;
  1901. }
  1902. #navigation li a.active:after{
  1903.  position:absolute;
  1904.  left:5em;
  1905.  top:0;
  1906.  content:"";
  1907.  border:2.5em solid transparent;
  1908.  border-left-color:#ff5c62;
  1909.  border-width: 2.5em 1em
  1910. }
  1911. #navigation li{
  1912.  position:relative;
  1913. }
  1914. #navigation li:after{
  1915.  content: attr(title);
  1916.  position:absolute;
  1917.  left:5em;
  1918.  top:0;
  1919.  height:5em;
  1920.  -webkit-box-sizing: border-box;
  1921.  -moz-box-sizing: border-box;
  1922.  box-sizing: border-box;
  1923.  text-transform:uppercase;
  1924.  background:transparent;
  1925.  color: #edddde;
  1926.  padding:2em;
  1927.  transition: all 0.3s ease-in-out;
  1928.  visibility:hidden;
  1929.  opacity:0;
  1930. }
  1931. #navigation li:hover:after{
  1932.  visibility:visible;
  1933.  opacity:1;
  1934. }
  1935. @media screen and (max-height: 34em){
  1936.  #navigation li{
  1937.  font-size:70%;
  1938.  }
  1939. }
  1940. /*Furry profiles!*/
  1941. #audiobox{
  1942. background-image:url('http://puu.sh/p1Uth.png');
  1943. background-size: contain;
  1944. background-position: center;
  1945. background-repeat: no-repeat;
  1946. position: inherit;
  1947. left: 2%;
  1948. width: 30px;height: 30px;
  1949. color: #fefefe;
  1950. z-index:98;
  1951.  margin: 0;
  1952.  padding: 0;
  1953. }
RAW Paste Data
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
 
Top