@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* background-image: url('http://getwallpapers.com/wallpaper/full/8/d/2/630912.jpg'); */
  background-color: #000;
  background-image: 
    url(cloud01.png), 
    url(cloud03.png), 
    url(cloud02.png), 
    url(moon01.png), 
    url(stars01.png), /*stars01 A*/
    url(stars01.png),
    url(stars01.png);
    
  background-size: 
    20%, /*cloud01*/
    30%, /*cloud03*/
    50%, /*cloud02*/
    15%, /*moon01*/
    100%, /*stars01 A*/
    100%, /*stars01 B*/
    100%; /*stars01 C*/
    
                    
  background-position: 
    -30% 3%, /*cloud01*/
    -90% -30%, /*cloud03*/
    -190% -150%, /*cloud02*/
    20% -30%, /*moon01*/
    0px 0px, /*stars01 A*/
    0px 40px, /*stars01 B*/
    0px 0px; /*stars01 C*/
  
  
    
  background-repeat: no-repeat;
  letter-spacing: 2px;
  color: #fff;
  animation: cloud01-animation linear 50s infinite;
}

@keyframes cloud01-animation {
  
  from {
    background-position:
      -30% 3%, /*cloud01*/
      -90% -30%, /*cloud03*/
      -190% -150%, /*cloud02*/
      20% -30%, /*moon01*/
      0px 0px, /*stars01 A*/
      0px 40px, /*stars01 B*/
      0px 0px; /*stars01 C*/
  }
  
  to {
    background-position: 
      150% 3%, /*cloud01*/
      150% -30%, /*cloud03*/
      150% -150%, /*cloud02*/
      20% -30%, /*moon01*/
      -1000px 0px, /*stars01 A*/
      -500px 40px, /*stars01 B*/
      0px 0px; /*stars01 C*/
  }
  
}

.clock {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* font-size: 80px; */
  text-shadow: 3px 3px 3px #000;
}

.time,
.date {
  display: block;
  width: 700px;
  text-align: center;
}

.time {
  font-family: 'PT Mono', monospace;
  font-size: 80px;
}

.date {
  font-family: 'Russo One', sans-serif;
  font-size: 40px;
}
/* .time {
  border: 1px solid white;
  text-align: center;
} */