<div class="room">
  <div class="window">
    <div class="stars"></div>
    <div class="star"></div>
    <div id="moon" class="moon"></div>
    <div class="cloud"></div>
    <div class="eiffel-tower">
      <div class="platform"></div>
    </div>
    <div class="roof"></div>
    <div class="bush"></div>
  </div>
  <div class="window-sill">
    <div class="cat">
      <div class="head">
        <div class="eyes"></div>
      </div>
      <div class="tail"></div>
    </div>
  </div>
  <div class="info">
    <div class="today">
    <span id="type">Full Moon</span> <span id="count">17 days</span>
    </div>
  </div>
</div>
:root {
  --wall: #322c3a;
  --sky: #3a2e5d;
  --star: wheat;
  --cat: #131213;
  --frame: #201c26;
  --moon: #eacd97;
  --moon-new: #382c58;
  --frame-shadow: #75637e;
  --cloud: #322751;
  --crater: #f0e4d0; //#d1b787;
}
.room *,
.room *:before,
.room *:after,
.room:before,
.room:after {
  position: absolute;
  box-sizing: border-box;
  margin: auto;
}
 *:before, *:after {
  content: "";
}
.room {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background-color: var(--wall);
  background-image: repeating-linear-gradient( to right, #aaa, #aaa 3vh, #bbb 3vh, #bbb 6vh);
  background-blend-mode: multiply;
}
.room:after {
  top: 40vh;
  left: 50%;
  margin-left: -50vh;
  border-bottom: 60vh solid #fff1;
  border-left: 22.5vh solid transparent;
  border-right: 22.5vh solid transparent;
  height: 0;
  width: 100vh;
}

.window {
  height: 70vh;
  width: 58vh;
  top: 15vh;
  left: 0;
  right: 0;
  margin: auto;
  background: var(--sky);
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  overflow: hidden;
  z-index: 1;
}
.window:before {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: 3vh solid var(--frame);
  box-shadow: inset 0 0 0 1vh var(--frame-shadow);
}
.window:after {
  width: calc(100% - 6vh);
  height: 3vh;
  border-bottom: 2vh solid var(--frame);
  box-shadow: inset 0 0 0 1vh var(--frame-shadow);
  top: 55%;
  left: 3vh;
  z-index: 5;
}

.window-sill {
  top: 85vh;
  width: 66vh;
  height: 4vh;
  left: 0;
  right: 0;
  border-bottom: 3vh solid var(--frame);
  box-shadow: inset 5vh 0 0 0 #4d3d55, inset -5vh 0 0 0 #4d3d55, inset 0 0 0 1vh var(--frame-shadow);
  z-index: 1;
}

.stars {
  border-radius: 50%;
  width: .125rem;
  height: .125rem;
  background: white;
  left: 30vh;
  top: 10vh;
  box-shadow: -20vh 20vh 0 -1px white, 10vh 10vh 0 1px #fff4, 11vh 11vh 0 -1px #fff;
  z-index: -4;
  filter: drop-shadow(0 0 3px white) drop-shadow(20vh 10vh 0 white) drop-shadow(-23vh -5vh 0 white) drop-shadow(-23vh 5vh 0 white);
}

.cloud {
 width: 6vh;
  height: 2vh;
  background: currentcolor;
  color: var(--cloud);
  top: 23vh;
  left: 20vh;
  border-radius: .5vh;
  box-shadow: -4vh -1.5vh 0 currentcolor, 0 -1.5vh 0 currentcolor, 2vh -1.5vh 0 currentcolor, -10vh 1.5vh 0 currentcolor, -5vh 1.5vh 0 currentcolor, 0vh 1.5vh 0 currentcolor, 5vh 1.5vh 0 currentcolor, -6vh 3vh 0 currentcolor,-8vh 4.5vh 0 currentcolor, -4vh 4.5vh 0 currentcolor, -4vh 4.5vh 0 currentcolor, -4vh 4.5vh 0 currentcolor, 3vh 6vh 0 currentcolor, 1vh 7.5vh 0 currentcolor;
  opacity: .8;
  z-index: -1;
  transform: translate3d(-40vh, 10vh, 0);
  animation: clouds 20s -5s linear infinite;
}
.cloud:before,
.cloud:after {
  box-shadow: inherit;
  background: inherit;
  width: 100%;
  height: 100%;
  transform: translate3d(-30vh, 10vh, 0);
}
.cloud:after {
  transform: translate3d(-60vh, -20vh, 0);
}
@keyframes clouds {
  100% {
    transform: translate3d(90vh, 0, 0);
  }
}

.star {
  top: 30%;
  right: 15vh;
  color: var(--star);
  width: 0;
  height: 0;
  border-right: 1vh solid transparent;
  border-bottom: .7vh solid currentColor;
  border-left: 1vh solid transparent;
  transform: scale(.5) rotate(35deg);
  filter: drop-shadow(-30vh 40vh 0 currentColor) drop-shadow(-15vh 45vh 2px currentColor);
  z-index: -3;
}
.star:before {
  border-bottom: .8vh solid currentColor;
  border-left: .3vh solid transparent;
  border-right: .3vh solid transparent;
  height: 0;
  width: 0;
  top: -.4vh;
  left: -.6vh;
  content: '';
  transform: rotate(-35deg);
}
.star:after {
  top: 0;
  left: -1vh;
  width: 0;
  height: 0;
  border-right: 1vh solid transparent;
  border-bottom: .7vh solid currentColor;
  border-left: 1vh solid transparent;
  transform: rotate(-70deg);
}

.moon {
  width: 8vh;
  height: 8vh;
  border-radius: 50%;
  left: 36vh;
  top: 25vh;
  z-index: -2;
  overflow: hidden;
  background-color: var(--sky);
  &:after {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--moon);
    box-shadow: 0 0 1vh pink;
  }
  &:before {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-image: radial-gradient(circle, var(--crater) 0%, var(--crater) 25%, transparent 25%), radial-gradient(circle, var(--crater) 0%, var(--crater) 20%, transparent 20%),  radial-gradient(circle, var(--crater) 0%, var(--crater) 25%, transparent 25%), radial-gradient(circle, var(--crater) 0%, var(--crater) 25%, transparent 25%), radial-gradient(circle, var(--crater) 0%, var(--crater) 25%, transparent 25%);
    background-position: 0 2.5vh, 4vh 4vh, 4.5vh 1vh, 3vh 3vh, 2vh 1vh;
    background-repeat: no-repeat;
    background-size: 4vh 6vh, 4vh 4vh, 3vh 3vh, 2vh 2vh, 1.5vh 2vh;
    z-index: 2;
    mix-blend-mode: multiply;
    opacity: 1;
  }
}
[class*=moon-new-] {
  box-shadow: -1vh 1vh 2vh -1.5vh #ffc0cb, -1vh -1vh 2vh -1.5vh #ffc0cb, -1.5vh 0 2vh -2vh #ffc0cb85;
}
[class*=moon-full-] {
  box-shadow: 1.5vh 1vh 2vh -2vh #ffc0cb, 1.5vh -1vh 2vh -2vh #ffc0cb, 1.5vh 0 2vh -2vh #ffc0cb85;
}

.moon-new-1,
.moon-new-2,
.moon-new-3,
.moon-new-4,
.moon-new-5,
.moon-new-6,
.moon-new-7,
.moon-full-8,
.moon-full-9,
.moon-full-10,
.moon-full-11,
.moon-full-12,
.moon-full-13,
.moon-full-14 {
  &:after {
    background: var(--sky);
  }
}
.moon-new-1,
.moon-new-2,
.moon-new-3,
.moon-new-4,
.moon-new-5,
.moon-new-6,
.moon-new-7 {
  background: linear-gradient(90deg, var(--moon) 4vh, transparent 0);
}
.moon-full-14,
.moon-full-13,
.moon-full-12,
.moon-full-11,
.moon-full-10,
.moon-full-9,
.moon-full-8 {
  background: linear-gradient(90deg, transparent 4vh, var(--moon) 0);
}
.moon-full-14,
.moon-full-13,
.moon-full-12,
.moon-full-11,
.moon-full-10,
.moon-full-9,
.moon-full-8 {
  &:after {
    box-shadow: inset -1vh 0 1.5vh -1vh pink;
  }
}
.moon-full-14,
.moon-full-13,
.moon-full-12 {
  &:after {
    width: 95%;
    border-radius: 4vh;
  }

}
.moon-full-11 {
  &:after {
    width: 90%;
    border-radius: 4vh 3.5vh 3.5vh 4vh  / 4vh 50% 50% 4vh;
  }
}
.moon-full-10 {
  &:after {
    width: 85%;
    border-radius: 0 3vh 3vh 0  / 0 50% 50% 0;
  }

}
.moon-full-9 {
  &:after {
    width: 76%;
    border-radius: 0 2vh 2vh 0  / 0 50% 50% 0 ;
  }

}
.moon-full-8 {
  &:after {
    width: 60%;
    height: 120%;
    border-radius: 0 1.5vh 1.5vh 0  / 0 50% 50% 0 ;
  }
}
.moon-new-1,
.moon-new-2,
.moon-new-4,
.moon-new-3,
.moon-new-5,
.moon-new-6, 
.moon-new-7,
.moon-full-7,
.moon-full-6,
.moon-full-5,
.moon-full-4,
.moon-full-3,
.moon-full-2,
.moon-full-1 {
  &:after {
    right: 0;
    left: auto;
  }
}
.moon-full-7 {
  &:after {
    width: 50%;
    height: 140%;
    border-radius: 0 50% 50% 0;
  }

}
.moon-full-6 {
  &:after {
    width: 60%;
    height: 140%;
    border-radius: 50%;
  }

}
.moon-full-5 {
  &:after {
    width: 70%;
    border-radius: 2.5vh 0 0 2.5vh  / 50% 0 0 50%;
  }

}
.moon-full-4 {
  &:after {
    width: 75%;
    border-radius: 2vh 0 0 2vh  / 4vh 0 0 4vh;
  }
}
.moon-full-3 {
  &:after {
    width: 86%;
    border-radius: 3vh 0 0 3vh  / 4vh 0 0 4vh;
  }
  
}
.moon-full-2,
.moon-full-1 {
 &:after {
    width: 90%;
    border-radius: 4vh 0 0 4vh;
  }
}
.moon-full {
  box-shadow: 0 0 3vh -1vh pink, 0 0 1.5vh -.25vh pink;
}

.moon-new-14,
.moon-new-13,
.moon-new-12 {
  &:after {
    width: 90%;
    border-radius: 0 3.5vh 3.5vh 0 / 0 4vh 4vh 0;
  }
}

.moon-new-11 {
  &:after {
    width: 85%;
    border-radius: 0 3vh 3vh 0 / 0 4vh 4vh 0;
  }
}

.moon-new-10 {
  &:after {
    width: 75%;
    border-radius: 0 2vh 2vh 0 / 0 4vh 4vh 0;
  }
}

.moon-new-9 {
  &:after {
    width: 60%;
    border-radius: 0 1vh 1vh 0 / 0 4vh 4vh 0;
  }
}

.moon-new-8 {
  &:after {
    width: 50%;
    border-radius: 0;
  }
}
.moon-new-1,
.moon-new-2,
.moon-new-3,
.moon-new-4,
.moon-new-5,
.moon-new-6, 
.moon-new-7 {
  &:after {
    box-shadow: inset 1vh 0 1.5vh -1vh pink;
  }
}
.moon-new-5,
.moon-new-6, 
.moon-new-7 {
  &:after {
    height: 140%;
    width: 60%;
    border-radius: 50%;
  }
}
.moon-new-4,
.moon-new-3 {
  &:after {
    width: 78%;
    border-radius: 2.25vh 0 0 2.25vh / 50% 0 0 50%;
  }
}
.moon-new-2 {
  &:after {
    width: 88%;
    border-radius: 3.25vh 0 0 3.25vh / 50% 0 0 50%;
  }
}
.moon-new-1 {
  &:after {
    width: 96%;
    border-radius: 4vh 0 0 4vh;
  }
}
.moon-new {
  background: var(--moon-new);
  &:after {
    width: 0;
  }
  &:before {
    opacity: .15;
  }
}

.cat {
  color: var(--cat);
  background: currentcolor;
  height: 20vh;
  width: 22vh;
  bottom: 0;
  border-radius: 6vh 50%  0 0;
}
.tail {
  width: 22vh;
  height: 0;
  color: inherit;
  bottom: 0;
  left: 100%;
  border: 3vh solid;
  border-left: 0;
  border-top: 0;
  border-radius: 0  0 5vh 0;
  animation: tail 10s infinite;
}
.tail:after {
  width: 3vh;
  height: 3vh;
  border-radius: 50%;
  background: var(--cat);
  top: -1.5vh;
  right: -3vh;
  
}
@keyframes tail {
  10%, 30% {
  height: 6vh;
  width: 15vh;
  }
  20%, 35%, 75%, 100% {
  height: 0;
  width: 22vh;
  }
  60% {
    height: 4vh;
    width: 20vh;
  }
}
.head {
  background: inherit;
  left: 0;
  bottom: 10vh;
  width: 10vh;
  height: 18vh;
  border-radius: 5vh 5vh 0 0;
  animation: head-move 6s -2s infinite alternate;
}
.head:before,
.head:after {
  width: 0;
  height: 0;
  top: -1.6vh;
  border-bottom: 6vh solid;
}
.head:before {
  border-right: 7vh solid transparent;
  animation: ears-move-l 6s infinite alternate;
}
.head:after {
  border-left: 7vh solid transparent;
  right: 0;
  animation: ears-move-r 6s infinite alternate;
}

.eyes {
  border-radius: 50%;
  width: 1vh;
  height: 1vh;
  background: var(--frame-shadow);
  top: 4vh;
  left: 3vh;
  z-index: 1;
  box-shadow: 3vh 0 0 var(--frame-shadow);
  animation: eyes-move 6s -.5s infinite alternate;
}

@keyframes head-move {
  25%, 100% {
    transform: translate3d(0, 5vh, 0)
  }
}

@keyframes ears-move-l {
  25%, 100% {
    transform: translate3d(1vh, -.5vh, 0)
  }
}
@keyframes ears-move-r {
  25%, 100% {
    transform: translate3d(-.5vh, -.5vh, 0)
  }
}

@keyframes eyes-move {
  25%, 100% {
    transform: translate3d(2.5vh, -1vh, 0)
  }
}

.eiffel-tower {
  color: #2f244c;
  width: 20vh;
  height: 8vh;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: 0 0 0 1.5vh currentcolor;
  border: 3vh solid;
  border-bottom: none;
  bottom: 8vh;
  right: 0;
  z-index: -2;
}
.eiffel-tower:before,
.eiffel-tower:after {
  height: 40vh;
  width: 10vh;
  bottom: 6vh;
  border: 2.5vh solid;
}
.eiffel-tower:before {
  left: -1.75vh;
  border-left: none;
  border-top: none;
  border-radius: 0 0 100% 0;
}
.eiffel-tower:after {
  right: -1.75vh;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 100%;
}
.platform {
  width: 4vh;
  height: 3vh;
  background: currentcolor;
  top: -40vh;
  left: 0;
  right: 0;
  box-shadow: 0 36vh 0 .5vh, 4vh 36vh 0 .5vh, 6.5vh 36vh 0 .5vh, -4vh 36vh 0 .5vh, -6.5vh 36vh 0 .5vh, 0 27vh 0 0, -3vh 27vh 0 0, 3vh 27vh 0 0;
  &:after {
    width: .75vh;
    height: 2vh;
    background: currentcolor;
    top: -3vh;
    left: 0;
    right: 0;
  }
}

.roof {
  width: 16vh;
  height: 12vh;
  color: #221b35;
  background: currentcolor;
  bottom: 3vh;
  left: 36vh;
	//right: 0;
	z-index: -1;
	filter: drop-shadow(-10vh 5vh 0 currentcolor) drop-shadow(-25vh 2vh 0 currentcolor) drop-shadow(-12vh -5vh 0 #352b53) drop-shadow(0vh 4vh 3vh #a18b9f);
  &:before {
    width: 1.25vh;
    height: 3vh;
    top: -5.5vh;
    left: 3vh;
    background: currentcolor;
    box-shadow: 6vh .5vh 0 0 currentcolor, 8vh 0 0 0 currentcolor, 2vh 1vh 0 0 currentcolor;
  }
  &:after {
    border-style: solid;
    border-color: transparent transparent currentcolor transparent;
    border-width: 0 2vh 4vh 2vh;
    height: 0;
    bottom: 100%;
    width: inherit;
  }
}

.bush {
  width: 15vh;
  height: 10vh;
  color: #131515;
  background: currentcolor;
  border-radius: 50vh 50vh 0 0;
  bottom: 1vh;
  right: 0;
  box-shadow: -6vh 2vh 0 -2vh currentcolor, -12vh 2vh 0 -2vh currentcolor, -18vh 3vh 0 -3vh currentcolor, -22vh 3vh 0 0vh currentcolor, -32vh 3vh 0 2vh currentcolor;
  z-index: -1;
}

.info {
  top: 45vh;
	right: calc(50% - 46vh);
	z-index: 0;
	width: 15vh;
	height: 20vh;
	background: #443f4a;
	border-radius: 0 0 0 0;
	text-align: center;
	box-shadow: -2px 4px 0 -2px #221e28, 0px 8px 0 -4px #36333a, 0px 12px 0 -6px #1a171e;
  color: #111;
  &:after {
    width: 1vh;
    height: 1vh;
    background: currentcolor;
    border-radius: 50%;
    top: 1vh;
    box-shadow: 0 0 .125vh .25vh #56505d;
  }
}
.today {
  width: 100%;
	height: 85%;
	top: 15%;
	background: inherit;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	box-shadow: inset 0 .25vh #56505d;
	display: flex;
	justify-content: center;
	align-items: center;
  flex-direction: column;
	border-top: .3275vh dashed #1b171f;
  font-family: Limelight, serif;
  font-size: 3.5vh;
  padding: 1vh;
  span {
    position: static;
  }
}
View Compiled
const today = moment().format('YYYY-MM-DD')

const fullMoonDays = ['2020-03-09','2020-04-08', '2020-05-07', '2020-06-05', '2020-07-05', '2020-08-03', '2020-09-02', '2020-10-01', '2020-10-31', '2020-11-30', '2020-12-30']
const newMoonDays = ['2020-02-23','2020-03-24', '2020-04-23', '2020-05-22', '2020-06-21', '2020-07-20', '2020-08-19', '2020-09-17', '2020-10-16', '2020-11-15', '2020-12-14']

const nextFull = fullMoonDays.find(el => moment(el, 'YYYY-MM-DD').format('YYYY-MM-DD') >= today )
const nextNew = newMoonDays.find(el => moment(el, 'YYYY-MM-DD').format('YYYY-MM-DD') >= today)

const diff = moment(nextFull).diff(today, 'days')
const diffNew = moment(nextNew).diff(today, 'days')

const type = diff < diffNew ? "Full Moon" : 'New Moon'
const diffText = Math.min(diff, diffNew) > 1 ? `${Math.min(diff, diffNew)} days` : Math.min(diff, diffNew) === 1 ? `1 day` : ''

let className = ''
if (diff < diffNew) {
  className = diffNew > 0 ? `moon-full-${diff}` : 'moon-full'
} else {
  className = diffNew > 0 ? `moon-new-${diffNew}` : 'moon-new'
  
}
//className = 'moon-full-6'
const MOON = document.getElementById("moon")
const TYPE = document.getElementById("type")
const COUNT = document.getElementById("count")
MOON.classList.add(className)
TYPE.innerHTML = type
COUNT.innerHTML = diffText

View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js