body {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;  
    background-color:rgb(28,152,247);
    background-image: -moz-linear-gradient( -15deg, rgb(110,188,243) 0%, rgb(163,150,211) 100%);
    background-image: -webkit-linear-gradient( -15deg, rgb(110,188,243) 0%, rgb(163,150,211) 100%);
    background-image: -ms-linear-gradient( -15deg, rgb(110,188,243) 0%, rgb(163,150,211) 100%);
  }
  
  /* GREETING TEXT */
  .greeting{
    display: grid;
    grid-template-rows: 100vh;
    grid-template-columns: 100vw;
    align-content: end;
  }
  #greeting-text {
    z-index: 100;
    font-size: 10vw;
    font-family:  "cursive";
    text-transform: uppercase;
    background: linear-gradient(0deg, pink 25%, rgb(255, 255, 142) 50%, cyan 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #fff;
    filter: drop-shadow(2px 2px #333);
    justify-self: center;
    align-self: end;
  }
  /* MORNING STYLES */
  /* SUN */
  .sun {
    border-radius: 50%;
    background-image: -moz-radial-gradient( 50% 50%, circle closest-side, rgba(252, 232, 144, 0.996) 0%, rgb(255, 213, 115) 100%);
    background-image: -webkit-radial-gradient( 50% 50%, circle closest-side, rgba(252, 230, 135, 0.996) 0%, rgb(255, 211, 108) 100%);
    background-image: -ms-radial-gradient( 50% 50%, circle closest-side, rgba(255, 232, 132, 0.996) 0%, rgb(250,198,75) 100%);
    height: 35vw;
    width: 35vw;
    position: absolute;
    bottom: 5vw;
    right: -10vw;
    z-index: 3;
  }
  .sun::after { /* GLOW AROUND SUN */
    border-radius: 50%;
    height: 35vw;
    width: 35vw;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-box-shadow:0px 0px 25px 0px yellow;
    -moz-box-shadow: 0px 0px 25px 0px yellow;
    box-shadow: 0px 0px 25px 0px yellow;
    mix-blend-mode: color-dodge;
    content: "";
  }
  .cloud {
    height: 15vw;
    width: auto;
    position: absolute;
    top: 10px;
    left: 30px;
    z-index: 10;
  }
  #cloud1
  {
    animation: 60s infinite floatingCloud1;
    animation-timing-function: linear;
  }
  #cloud2
  {
    animation: 35s infinite floatingCloud2;
  }
  #cloud3
  {
    animation:50s infinite floatingCloud3;
    animation-timing-function: linear;
  }
  #cloud4
  {
    animation: 40s infinite floatingCloud4;
  }
  @keyframes floatingCloud1 {
    from {
      top: 5%;
      left: 0%;
    }
  
    to {
      top: 5%;
      left: 100%;
    }
  }
  @keyframes floatingCloud2 {
    from {
      top: 30%;
      left: 10%;
    }
  
    to {
      top: 40%;
      left: 100%;
    }
  }
  @keyframes floatingCloud3 {
    from {
      top: 0%;
      left: 20%;
    }
  
    to {
      top: 0%;
      left: 100%;
    }
  }
  @keyframes floatingCloud4 {
    from {
      top: 30%;
      left: 50%;
    }
  
    to {
      top: 30%;
      left: 100%;
    }
  }
 
  .greeting {
    -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
            animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
  }

  /* ----------------------------------------------
 * Generated by Animista on 2024-10-28 12:34:42
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/* afternoon */

.noon-sun {
  border-radius: 50%;
  background-image: -moz-radial-gradient( 50% 50%, circle closest-side, rgba(250,209,38,0.99608) 0%, rgb(250,188,38) 100%);
  background-image: -webkit-radial-gradient( 50% 50%, circle closest-side, rgba(250,209,38,0.99608) 0%, rgb(250,188,38) 100%);
  background-image: -ms-radial-gradient( 50% 50%, circle closest-side, rgba(250,209,38,0.99608) 0%, rgb(250,188,38) 100%);
  height: 35vw;
  width: 35vw;
  position: absolute;
  top: -5vw;
  right: 10vw;
  z-index: 3;
}
.noon-sun::after { /* GLOW AROUND SUN */
  border-radius: 50%;
  height: 35vw;
  width: 35vw;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-box-shadow:0px 0px 25px 0px rgba(249,207,39,0.85);
  -moz-box-shadow: 0px 0px 25px 0px rgba(249,207,39,0.85);
  box-shadow: 0px 0px 25px 0px rgba(249,207,39,0.85);
  mix-blend-mode: color-dodge;
  content: "";
}
.noon-bg {
  background-color:rgb(97, 187, 255);
  background-image: -moz-linear-gradient( 65deg, rgb(150, 209, 255) 0%, rgb(84,218,255) 100%);
  background-image: -webkit-linear-gradient( 65deg, rgb(156, 212, 255) 0%, rgb(84,218,255) 100%);
  background-image: -ms-linear-gradient( 65deg, rgb(161, 214, 255) 0%, rgb(84, 218, 255) 100%);
}
.noon-gradient #greeting-text {
  background: linear-gradient(0deg, rgb(249,207,39,0.85) 0%, rgba(255, 220, 81, 0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 8vw;
}


.bird {
  height: 6vw;
  width: auto;
  position: absolute;
  top: 15px;
  left: 30px;
  z-index: 10;
}
#bird1
{
  animation: 25s infinite bird1;
  animation-timing-function: linear;
}

@keyframes bird1 {
  from {
    top: 12%;
    left: 0%;
  }

  to {
    top: 12%;
    left: 100%;
  }
}
#bird2
{
  animation: 20s infinite bird1;
  animation-timing-function: linear;
}


/* night */

@keyframes move-twink-back {
  from {background-position:0 0;}
  to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
  from {background-position:0 0;}
  to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
  from {background-position:0 0;}
  to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
  from {background-position:0 0;}
  to {background-position:-10000px 5000px;}
}
 /* .stars, .twinkling {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
display:block;
}  */
.stars {
background:#000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index:100;
}
.twinkling{
background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
z-index:1;
-moz-animation:move-twink-back 200s linear infinite;
-ms-animation:move-twink-back 200s linear infinite;
-o-animation:move-twink-back 200s linear infinite;
-webkit-animation:move-twink-back 200s linear infinite;
animation:move-twink-back 200s linear infinite;
}
/* MOON */
.moon {
  border-radius: 50%;
  background-image: -moz-radial-gradient( 50% 50%, circle closest-side, rgb(208,219,230) 0%, rgb(223,226,233) 50%, rgb(228,232,239) 100%);
  background-image: -webkit-radial-gradient( 50% 50%, circle closest-side, rgb(208,219,230) 0%, rgb(223,226,233) 50%, rgb(228,232,239) 100%);
  background-image: -ms-radial-gradient( 50% 50%, circle closest-side, rgb(208,219,230) 0%, rgb(223,226,233) 50%, rgb(228,232,239) 100%);
  height: 35vw;
  width: 35vw;
  position: absolute;
  top: -15vw;
  right: -10vw;
  z-index: 3;
}
.moon::after { /* GLOW AROUND MOON */
  border-radius: 50%;
  height: 35vw;
  width: 35vw;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-box-shadow:0px 0px 25px 0px rgba(208,219,230,0.85);
  -moz-box-shadow: 0px 0px 25px 0px rgba(208,219,230,0.85);
  box-shadow: 0px 0px 25px 0px rgba(208,219,230,0.85);
  mix-blend-mode: lighten;
  content: "";
}

#cloud5
{
  animation: 40s infinite floatingCloud5;
  animation-timing-function: linear;
}

@keyframes floatingCloud5 {
  from {
    top: 17%;
    left: 100%;
  }

  to {
    top: 17%;
    left: 0%;
  }
}
#cloud6
{
  animation: 20s infinite floatingCloud6;
  animation-timing-function: linear;
}

@keyframes floatingCloud6 {
  from {
    top: 5%;
    left: 0%;
  }

  to {
    top: 5%;
    left: 100%;
  }
}

.night-gradient #greeting-text {
    background: linear-gradient(0deg, rgb(249,207,39,0.85) 0%, rgba(255, 220, 81, 0.85) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 8vw;
}