www.moonwalks.be/theme/static/css/moon-watch.css

:root {
  --animation-duration: 2s;
}

#moon-watch-section{
  padding-bottom: calc(var(--lh) * 1);
}

.watch__date{
  padding-bottom: calc(var(--lh) * 0.5);
}

.watch__phase{
  /* padding-left: calc(var(--lh) * 1); */
}

.watch__phase > h2.phase-name,
.all-phases > h2{
  text-transform: uppercase;
  font-size: var(--fs-display);
  line-height: 0.85;

  /* with the accent */
  line-height: 1.05;
  
  letter-spacing: -0.04em;
  animation: setting_phase var(--animation-duration);

  /* Note: The overflow-wrap property acts in the same way as the non-standard property word-wrap. 
  The word-wrap property is now treated by browsers as an alias of the standard property. */
  /* Note: In contrast to word-break, overflow-wrap will only create a break 
  if an entire word cannot be placed on its own line without overflowing. */
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  
  /* text-align: center; */

  /* background: radial-gradient(circle closest-side, white, var(--c-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */

  min-height: 1.6em;
  border-left: var(--border);
  padding-left: var(--lh);
  margin-bottom: calc(var(--lh) * 0.5);
}

body.projects .watch__phase > h2.phase-name{
  border-left: none;
  margin-bottom: calc(var(--lh) * 1);
}

@keyframes setting_phase {
  0% {
    font-variation-settings: "SERI"0, "slnt"0;
  }
  100% {
    font-variation-settings: "SERI"inherit, "slnt"inherit;
  }
}


/* SVG SCHEME
 ============================================================================ */

.watch__scheme{
  display: flex;
  justify-content: center;
  position: relative;
}


.watch__scheme svg{
  height: 200px;
  width: 100%;
  max-width: 500px;
}
.watch__scheme::after{
  content: "↓ sunlights";
  position: absolute;
  left: calc(50% + 1em);
  top: 0;
}

.watch__scheme svg circle{
  vector-effect: non-scaling-stroke;
}
.watch__scheme svg line{
  vector-effect: non-scaling-stroke;
  stroke: var(--clr-text);
}

circle.svg-moon-trajectory,
circle.svg-earth-trajectory {
  stroke: var(--clr-soft-text);
  stroke-width: var(--border-width);
  stroke-dasharray: 4;
  fill: none;
}

circle.svg-earth{
  fill: var(--clr-text);
}

.stop-light{
  stop-color: white;
}
.stop-dark{
  stop-color: var(--clr-text);
}

circle.svg-moon {
  --moon-rotation: 0deg;

  /* stroke: var(--clr-text);
  stroke-width: var(--border-width); */
  /* fill: url(#moon-light-gradient); */
  fill: white;

  transform: 
    rotate(calc(-1 * var(--moon-rotation))) 
    translateY(-50px) 
    rotate(var(--moon-rotation))
  ;

  transition: transform var(--animation-duration);
}

/* RESPONSIVE
 ============================================================================ */

 /* 1 column break */
@media only screen and (max-width: 1050px) {
  .watch__phase > h2.phase-name{
    padding-left: 0;
    border: none;
    text-align: center;
  }
}