CC#49 Fireflies

CC#49ENC: Fireflies +

CSS

/* Last Update: 07/24/19 */

/* PAGE BACKGROUND, FONT, AND COLORS */
body {
background:#333 center / cover no-repeat fixed;
background-image:radial-gradient(circle at 50% 30%,transparent,#000 80%),url('');
background-image:-o-radial-gradient(50% 30%,circle,transparent,#000 80%),url('');
background-image:-moz-radial-gradient(50% 30%,circle,transparent,#000 80%),url('');
background-image:-webkit-radial-gradient(50% 30%,circle,transparent,#000 80%),url('');
font-family:'Elsie',monospace;
font-size:16px;
color:#85bb3a;
text-shadow:0 0 10px #a2f330, 0 0 20px #a2f330;
}
img {
filter:drop-shadow(0 0 10px #a2f330, 0 0 20px #a2f330);
-webkit-filter:drop-shadow(0 0 10px #a2f330, 0 0 20px #a2f330);
}
b {
color:#9fd554;
}
a {
color:#cce5a9;
}
a:hover {
color:#aaa;
}

/* THE UNGODLY FIREFLY FIELD! */
#c, #c2, #c3, #c4 {
box-shadow:
1vw 1vh 4px #85bb3a, 1vw 1vh 10px #a2f330, 1vw 1vh 20px #a2f330,
1vw 76.2vh 4px #85bb3a, 1vw 76.2vh 10px #a2f330, 1vw 76.2vh 20px #a2f330,
7vw 12vh 4px #85bb3a, 7vw 12vh 10px #a2f330, 7vw 12vh 20px #a2f330,
9vw 63vh 4px #85bb3a, 9vw 63vh 10px #a2f330, 9vw 63vh 20px #a2f330,
12vw 29vh 4px #85bb3a, 12vw 29vh 10px #a2f330, 12vw 29vh 20px #a2f330,
13vw 6vh 4px #85bb3a, 13vw 6vh 10px #a2f330, 13vw 6vh 20px #a2f330,
15vw 56vh 4px #85bb3a, 15vw 56vh 10px #a2f330, 15vw 56vh 20px #a2f330,
18vw 23vh 4px #85bb3a, 18vw 23vh 10px #a2f330, 18vw 23vh 20px #a2f330,
21vw 8vh 4px #85bb3a, 21vw 8vh 10px #a2f330, 21vw 8vh 20px #a2f330,
21vw 80vh 4px #85bb3a, 21vw 80vh 10px #a2f330, 21vw 80vh 20px #a2f330,


27vw 81vh 4px #85bb3a, 27vw 81vh 10px #a2f330, 27vw 81vh 20px #a2f330,
30vw 64vh 4px #85bb3a, 30vw 64vh 10px #a2f330, 30vw 64vh 20px #a2f330,
33.3vw 73vh 4px #85bb3a, 33.3vw 73vh 10px #a2f330, 33.3vw 73vh 20px #a2f330,
34vw 84vh 4px #85bb3a, 34vw 84vh 10px #a2f330, 34vw 84vh 20px #a2f330,
42vw 78vh 4px #85bb3a, 42vw 78vh 10px #a2f330, 42vw 78vh 20px #a2f330,
44vw 87vh 4px #85bb3a, 44vw 87vh 10px #a2f330, 44vw 87vh 20px #a2f330,
51vw 90vh 4px #85bb3a, 51vw 90vh 10px #a2f330, 51vw 90vh 20px #a2f330,
56vw 82vh 4px #85bb3a, 56vw 82vh 10px #a2f330, 56vw 82vh 20px #a2f330,
61vw 78vh 4px #85bb3a, 61vw 78vh 10px #a2f330, 61vw 78vh 20px #a2f330,
66.5vw 73vh 4px #85bb3a, 66.5vw 73vh 10px #a2f330, 66.5vw 73vh 20px #a2f330,
70vw 64vh 4px #85bb3a, 70vw 64vh 10px #a2f330, 70vw 64vh 20px #a2f330,
73vw 81vh 4px #85bb3a, 73vw 81vh 10px #a2f330, 73vw 81vh 20px #a2f330,


79vw 8vh 4px #85bb3a, 79vw 8vh 10px #a2f330, 79vw 8vh 20px #a2f330,
79vw 78vh 4px #85bb3a, 79vw 78vh 10px #a2f330, 79vw 78vh 20px #a2f330,
82vw 43vh 4px #85bb3a, 82vw 43vh 10px #a2f330, 82vw 43vh 20px #a2f330,
85vw 56vh 4px #85bb3a, 85vw 56vh 10px #a2f330, 85vw 56vh 20px #a2f330,
87vw 6vh 4px #85bb3a, 87vw 6vh 10px #a2f330, 87vw 6vh 20px #a2f330,
88vw 29vh 4px #85bb3a, 88vw 29vh 10px #a2f330, 88vw 29vh 20px #a2f330,
91vw 70vh 4px #85bb3a, 91vw 70vh 10px #a2f330, 91vw 70vh 20px #a2f330,
93vw 15vh 4px #85bb3a, 93vw 15vh 10px #a2f330, 93vw 15vh 20px #a2f330,
97.3vw 1.3vh 4px #85bb3a, 97.3vw 1.3vh 10px #a2f330, 97.3vw 1.3vh 20px #a2f330,
99vw 64vh 4px #85bb3a, 99vw 64vh 10px #a2f330, 99vw 64vh 20px #a2f330;
}
#c5 {
box-shadow:
20vw 12vh 4px #85bb3a, 20vw 12vh 10px #a2f330, 20vw 12vh 20px #a2f330,
1vw 76.2vh 4px #85bb3a, 1vw 76.2vh 10px #a2f330, 1vw 76.2vh 20px #a2f330,
7vw 39vh 4px #85bb3a, 7vw 39vh 10px #a2f330, 7vw 39vh 20px #a2f330,
9vw 47vh 4px #85bb3a, 9vw 47vh 10px #a2f330, 9vw 47vh 20px #a2f330,
32vw 29vh 4px #85bb3a, 32vw 29vh 10px #a2f330, 32vw 29vh 20px #a2f330,
13vw 6vh 4px #85bb3a, 13vw 6vh 10px #a2f330, 13vw 6vh 20px #a2f330,
15vw 56vh 4px #85bb3a, 15vw 56vh 10px #a2f330, 15vw 56vh 20px #a2f330,
18vw 23vh 4px #85bb3a, 18vw 23vh 10px #a2f330, 18vw 23vh 20px #a2f330,
21vw 8vh 4px #85bb3a, 21vw 8vh 10px #a2f330, 21vw 8vh 20px #a2f330,
25vw 88vh 4px #85bb3a, 25vw 88vh 10px #a2f330, 25vw 88vh 20px #a2f330,


27vw 81vh 4px #85bb3a, 27vw 81vh 10px #a2f330, 27vw 81vh 20px #a2f330,
30vw 64vh 4px #85bb3a, 30vw 64vh 10px #a2f330, 30vw 64vh 20px #a2f330,
33.3vw 73vh 4px #85bb3a, 33.3vw 73vh 10px #a2f330, 33.3vw 73vh 20px #a2f330,
34vw 84vh 4px #85bb3a, 34vw 84vh 10px #a2f330, 34vw 84vh 20px #a2f330,
42vw 78vh 4px #85bb3a, 42vw 78vh 10px #a2f330, 42vw 78vh 20px #a2f330,
44vw 87vh 4px #85bb3a, 44vw 87vh 10px #a2f330, 44vw 87vh 20px #a2f330,
51vw 90vh 4px #85bb3a, 51vw 90vh 10px #a2f330, 51vw 90vh 20px #a2f330,
56vw 82vh 4px #85bb3a, 56vw 82vh 10px #a2f330, 56vw 82vh 20px #a2f330,
61vw 78vh 4px #85bb3a, 61vw 78vh 10px #a2f330, 61vw 78vh 20px #a2f330,
66.5vw 73vh 4px #85bb3a, 66.5vw 73vh 10px #a2f330, 66.5vw 73vh 20px #a2f330,
70vw 64vh 4px #85bb3a, 70vw 64vh 10px #a2f330, 70vw 64vh 20px #a2f330,
73vw 81vh 4px #85bb3a, 73vw 81vh 10px #a2f330, 73vw 81vh 20px #a2f330,


72vw 9vh 4px #85bb3a, 72vw 9vh 10px #a2f330, 72vw 9vh 20px #a2f330,
79vw 88vh 4px #85bb3a, 79vw 88vh 10px #a2f330, 79vw 88vh 20px #a2f330,
82vw 23vh 4px #85bb3a, 82vw 23vh 10px #a2f330, 82vw 23vh 20px #a2f330,
77vw 56vh 4px #85bb3a, 77vw 56vh 10px #a2f330, 77vw 56vh 20px #a2f330,
87vw 4.4vh 4px #85bb3a, 87vw 4.4vh 10px #a2f330, 87vw 4.4vh 20px #a2f330,
88vw 29vh 4px #85bb3a, 88vw 29vh 10px #a2f330, 88vw 29vh 20px #a2f330,
91vw 70vh 4px #85bb3a, 91vw 70vh 10px #a2f330, 91vw 70vh 20px #a2f330,
93vw 12vh 4px #85bb3a, 93vw 12vh 10px #a2f330, 93vw 12vh 20px #a2f330,
90vw 1.3vh 4px #85bb3a, 90vw 1.3vh 10px #a2f330, 90vw 1.3vh 20px #a2f330,
99vw 64vh 4px #85bb3a, 99vw 64vh 10px #a2f330, 99vw 64vh 20px #a2f330;
}
#c6 {
box-shadow:
43vw 76vh 4px #85bb3a, 43vw 76vh 10px #a2f330, 43vw 76vh 20px #a2f330,
62vw 59vh 4px #85bb3a, 62vw 59vh 10px #a2f330, 62vw 59vh 20px #a2f330,
64.4vw 64.9vh 4px #85bb3a, 64.4vw 64.9vh 10px #a2f330, 64.4vw 64.9vh 20px #a2f330,
58vw 81vh 4px #85bb3a, 58vw 81vh 10px #a2f330, 58vw 81vh 20px #a2f330,

27vw 81vh 4px #85bb3a, 27vw 81vh 10px #a2f330, 27vw 81vh 20px #a2f330,
30vw 64vh 4px #85bb3a, 30vw 64vh 10px #a2f330, 30vw 64vh 20px #a2f330,
33.3vw 73vh 4px #85bb3a, 33.3vw 73vh 10px #a2f330, 33.3vw 73vh 20px #a2f330,
34vw 84vh 4px #85bb3a, 34vw 84vh 10px #a2f330, 34vw 84vh 20px #a2f330,
42vw 78vh 4px #85bb3a, 42vw 78vh 10px #a2f330, 42vw 78vh 20px #a2f330,
56vw 82vh 4px #85bb3a, 56vw 82vh 10px #a2f330, 56vw 82vh 20px #a2f330,
61vw 78vh 4px #85bb3a, 61vw 78vh 10px #a2f330, 61vw 78vh 20px #a2f330,
66vw 88.3vh 4px #85bb3a, 66vw 88.3vh 10px #a2f330, 66vw 88.3vh 20px #a2f330,
66.5vw 73vh 4px #85bb3a, 66.5vw 73vh 10px #a2f330, 66.5vw 73vh 20px #a2f330,
70vw 64vh 4px #85bb3a, 70vw 64vh 10px #a2f330, 70vw 64vh 20px #a2f330,
73vw 81vh 4px #85bb3a, 73vw 81vh 10px #a2f330, 73vw 81vh 20px #a2f330;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
height:6px;
width:6px;
background-color:transparent;
}
::-webkit-scrollbar-thumb {
background-color:#85bb3a;
box-shadow:0 0 10px #a2f330;
}

/* CSS MEAT */
#text,
#c, #c2, #c3,
#c4, #c5, #c6 {
position:fixed;
transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
#text {
top:50%;
left:50%;
max-height:96%;
width:23%;
padding:1%;
overflow-y:auto;
text-align:center;
letter-spacing:1px;
}
#c, #c2, #c3,
#c4, #c5, #c6 {
top:0;
left:0;
border-radius:50%;
opacity:0;
}
#c, #c3, #c6  {
height:7px;
width:7px;
}
#c2, #c4 {
height:5px;
width:5px;
}
#c5 {
height:10px;
width:10px;
}
#c2 {
left:-5.4vw;
}
#c3 {
left:7.8vw;
}
#c4 {
left:12.1vw;
}
img {
max-width:100%;
}

/* MOBILE CSS */
@media only screen and (orientation:portrait) {
	#text {
		width:90%;
		font-size:1.3em;
	}
	#c2, #c4, #c5, #c6 {
		display:none;
	}
}

#credit {
position:fixed;
bottom:0;
right:1%;
text-decoration:none;
}

HTML

<link href="https://dl.dropbox.com/s/iepz70wlybg3tvt/cc49-fireflies.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Elsie" rel="stylesheet">

<div id="text">
<p>
Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous.
</p>
<p>
I also recommend the fonts Kranky, Seaweed Script, or Special Elite from google fonts if Elsie isn't doing it for ya.
</p>
</div>

<div id="c"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4"></div>
<div id="c5"></div>
<div id="c6"></div>

<a href="http://bit.do/eePwi" target="_blank" id="credit" title="CC#49">Cera</a>

CC#49ENC: Fireflies +

CSS

HTML

Alternates

Frostflies

Emberflies