.moon-phase-tracker {
min-width: 240px;
min-height: 240px;    
position: relative;
border-radius: 50%;
overflow: hidden;
}
.moon-phase-tracker div.moon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 100% auto;
z-index: 1;    
}
.moon-phase-tracker div.moon.brightness_0 {
filter: brightness(115%);
filter: sepia(30%) saturate(250%) hue-rotate(180deg);
}
.moon-phase-tracker div.moon.brightness_1 {
filter: brightness(110%);
filter: sepia(20%) saturate(200%) hue-rotate(180deg);
}
.moon-phase-tracker div.moon.brightness_2 {
filter: brightness(105%);
}
.moon-phase-tracker div.moon.brightness_4 {
filter: brightness(95%);
}
.moon-phase-tracker div.shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: auto 100%;
z-index: 100;
filter: blur(2px);
opacity: 0.9;    
}
.moon_phase_0  { background-position:   0% 0; }
.moon_phase_1  { background-position:   3.55% 0; }
.moon_phase_2  { background-position:   7.15% 0; }
.moon_phase_3  { background-position:  10.71% 0; }
.moon_phase_4  { background-position:  14.28% 0; }
.moon_phase_5  { background-position:  17.87% 0; }
.moon_phase_6 { background-position:   21.5% 0; }
.moon_phase_7  { background-position:  25.05% 0; }
.moon_phase_8  { background-position:  28.59% 0; opacity: 0.88; }
.moon_phase_9  { background-position:  32.15% 0; filter: blur(2.5px);
opacity: 0.86; }
.moon_phase_10  { background-position:  35.7% 0; filter: blur(2.5px);
opacity: 0.84; }
.moon_phase_11 { background-position:  39.275% 0; filter: blur(2.5px);
opacity: 0.8; }
.moon_phase_12 { background-position:  42.84% 0; filter: blur(3px);
opacity: 0.7; }
.moon_phase_13 { background-position:  46.38% 0; filter: blur(4px);
opacity: 0.6; }
.moon_phase_14 { background-position:  49.9% 0; }
.moon_phase_15 { background-position:  53.42% 0; filter: blur(4px);
opacity: 0.6; }
.moon_phase_16 { background-position:  57% 0; filter: blur(3px);
opacity: 0.7; }
.moon_phase_17 { background-position:  60.7% 0; filter: blur(2.5px);
opacity: 0.8; }
.moon_phase_18 { background-position:  64.27% 0; filter: blur(2.5px);
opacity: 0.84; }
.moon_phase_19 { background-position:  67.86% 0; filter: blur(2.5px);
opacity: 0.86; }
.moon_phase_20 { background-position:  71.4% 0; opacity: 0.88; }
.moon_phase_21 { background-position:  74.92% 0; }
.moon_phase_22 { background-position:  78.4% 0; }
.moon_phase_23 { background-position:  82.04% 0; }
.moon_phase_24 { background-position:  85.7% 0; }
.moon_phase_25 { background-position:  89.271% 0; }
.moon_phase_26 { background-position:  92.8% 0; }
.moon_phase_27 { background-position:  96.48% 0; }
.moon_phase_28 { background-position:  100% 0 }