* {
padding: 0; 
margin: 0;
}

a, a img {
border: 0;
}

body {
background: #000;
font-family: "Helvetica Neue", sans-serif;
font-size: 12px;
color: #eebd7d;
overflow: hidden;
}

#flake {
text-shadow: 1px 1px 0 #fff;
}

#info {
position: fixed;
top: 0;
left: 0;
width:100%; 
height: 40px;
background: #000;
z-index: 99999;
box-shadow: 0 5px 10px 0 #000;
}

#words {
clear: both;
background: #000;
padding: 30px;
margin-top: 40px;
box-shadow: 0 5px 10px 0 #000;
z-index: 99998;
overflow-y:scroll;
height: 400px;
z-index: 101;
}

#words ul {
position: relative!important;
margin: -10px 0 30px 0;
}

#words li {
display: block;
}

a, a:visited {
color:#eebd7d;
text-decoration: underline;
}

a:hover, a:focus {
text-decoration: underline;
}

h1 {
float: left;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
background: url(candle.svg) no-repeat 8px 7px;
background-size: auto 23px;
padding: 10px 0 2px 24px;
}

p {
padding: 0 0 15px 0;
}

p#audiolabel {
display: inline-block;
padding: 0;
margin: 12px 0 0 15px;
}

.mejs-container {
position: absolute !important;
top: 4px;
left: 275px;
}

.littlebutton {
position: absolute;
top: 12px;
right: 12px;
width: 18px;
height: 18px;
background: #666;
border-radius: 10px;
display: block;
z-index: 999999;
}

ul {
margin: 0 0 15px 15px;
}

li {
margin-bottom: 15px;
}

.page {
height: 100vh;
width: 100%;

background-image: 
linear-gradient(to bottom, rgba(0,0,0,0.1) 30%, rgba(0,0,0,1) 70%),
linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.8) 100%),
url(treeback.svg);

background-size: 100% 100%, 100% 100%, 500px auto;
background-repeat: no-repeat, no-repeat, repeat;
background-position: 0 0;
}

.allcandle {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}

.holder {
margin: 12rem auto 0;
width: 150px;
height: 400px;
position: relative;
}

.holder *, .holder *:before, .holder *:after {
position: absolute;
content: "";
}

.candle {
bottom: 0;
width: 150px;
height: 300px;
border-radius: 150px / 40px;
box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0 50px 0 rgba(0, 0, 0, 0.4);
background: #190f02;
background: linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
}

.candle:before {
width: 97%;
height: 40px;
border-radius: 50%;
border: 2px solid #d47401;
background: #b86409;
background: radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
}

.candle:after {
width: 34px;
height: 10px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
top: 14px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
}

.thread {
width: 6px;
height: 36px;
top: -17px;
left: 50%;
z-index: 1;
border-radius: 40% 40% 0 0;
transform: translateX(-50%);
background: #121212;
background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
}

.flame {
width: 24px;
height: 120px;
left: 50%;
transform-origin: 50% 100%;
transform: translateX(-50%);
bottom: 100%;
border-radius: 50% 50% 20% 20%;
background: rgba(255, 255, 255, 1);
background: linear-gradient(white 80%, transparent);
animation: moveFlame 6s linear infinite;
}

.flame:before {
width: 100%;
height: 100%;
border-radius: 50% 50% 20% 20%;
box-shadow: 0 0 15px 0 rgba(247, 93, 0, .4), 0 -6px 4px 0 rgba(247, 128, 0, .7);
}

@keyframes moveFlame {
0%, 100% {
transform: translateX(-50%) rotate(-2deg);
}
50% {
transform: translateX(-50%) rotate(2deg);
}
}

.glow {
width: 26px;
height: 60px;
border-radius: 50% 50% 35% 35%;
left: 50%;
top: -48px;
transform: translateX(-50%);
background: rgba(0, 133, 255, .7);
box-shadow: 0 -40px 30px 0 #dc8a0c, 0 40px 50px 0 #dc8a0c, inset 3px 0 2px 0 rgba(0, 133, 255, .6), inset -3px 0 2px 0 rgba(0, 133, 255, .6);
}

.glow:before {
width: 70%;
height: 60%;
left: 50%;
transform: translateX(-50%);
bottom: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
}

.blinking-glow {
width: 100px;
height: 180px;
left: 50%;
top: -55%;
transform: translateX(-50%);
border-radius: 50%;
background: #ff6000;
filter: blur(70px);
animation: blinkIt 8s infinite;
}

@keyframes blinkIt {
50% { opacity: .8;}
}

/* sharing */

#sharing {
width:100%;
/*height: 50px;*/
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

ul.share-buttons {
text-align: left;
list-style: none;
padding: 0;
margin: 0;
background: rgba(0,0,0,.8);
width: 100%;
}

ul.share-buttons img {
height: 24px;
}

ul.share-buttons li {
display: inline;
text-align: center;
margin: 0;
}

ul.share-buttons li a {
display: inline-block;
width: 11%;
padding: 5px 0 2px 0;
background: #000;
border-radius: 0px;
}

ul.share-buttons li.share {
padding: 0 5px;
}

ul.share-buttons li.share-fb a {
background: #3B5998;
}

ul.share-buttons li.share-tw a {
background: #000;
}

ul.share-buttons li.share-pn a {
background: #DB081c;
}

ul.share-buttons li.share-em a {
background: #444;
}

ul.share-buttons li.share-wa a {
background: #25d366;
}

ul.share-buttons li.share-pr a {
background: #3B5998;
}

ul.share-buttons li a:hover {
filter: brightness(70%);
}

ul.share-buttons .sr-only{
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

@media (min-width: 601px) {

ul.share-buttons li.share-wa {
display: none;
}

}