body {
    display: block;
    margin: 8px;
    background: #0a477b;
}

.snow {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* margin: 80px auto; */
    background: #0a477b;
}

.snowflake {
    height: 40px;
    width: 40px;
    position: absolute;
    top: -40%;
    left: 100%;
    background-image: url(images/sniginka-removebg-preview.png);
    background-size: 40px 40px;
    opacity: 0.5;
    animation: movement_snowflake 10s linear infinite;
    animation-duration: 5s;
    animation-delay: 0s;
}

#n2.snowflake {
    height: 30px;
    width: 30px;
    top: -90%;
    left: 10%;
    opacity: 0.5;
    transform: rotate(10deg);
    background-size: 30px 30px;
    animation-duration: 4s;
    animation-delay: 0s;
}

#n3.snowflake {
    height: 40px;
    width: 40px;
    top: -70%;
    left: 80%;
    opacity: 0.6;
    transform: rotate(-60deg);
    background-size: 40px 40px;
    animation-duration: 8s;
    animation-delay: 0.5s;
}

#n4.snowflake {
    height: 50px;
    width: 50px;
    top: -50%;
    left: 45%;
    opacity: 0.5;
    transform: rotate(10deg);
    background-size: 50px 50px;
    animation-duration: 7s;
    animation-delay: 0.7s;
}

#n5.snowflake {
    height: 25px;
    width: 25px;
    top: -95%;
    left: 70%;
    opacity: 0.8;
    transform: rotate(-85deg);
    background-size: 25px 25px;
    animation-duration: 6s;
    animation-delay: 0.4s;
}

#n6.snowflake {
    height: 50px;
    width: 50px;
    top: -80%;
    left: 5%;
    opacity: 0.7;
    background-size: 50px 50px;
    transform: rotate(80deg);
    animation-duration: 9s;
    animation-delay: 0.1s;
}

#n7.snowflake {
    height: 40px;
    width: 40px;
    top: -115%;
    left: 35%;
    opacity: 0.8;
    background-size: 40px 40px;
    transform: rotate(-20deg);
    animation-duration: 5.5s;
    animation-delay: 0.4s;
}

#n8.snowflake {
    height: 40px;
    width: 40px;
    top: -115%;
    left: 115%;
    opacity: 0.8;
    background-size: 40px 40px;
    transform: rotate(-20deg);
    animation-duration: 5.5s;
    animation-delay: 0.4s;
}


#n9.snowflake {
    height: 40px;
    width: 40px;
    top: -115%;
    left: 35%;
    opacity: 0.8;
    background-size: 40px 40px;
    transform: rotate(-20deg);
    animation-duration: 5.5s;
    animation-delay: 0.4s;
}


#n10.snowflake {
    height: 40px;
    width: 40px;
    top: -115%;
    left: 35%;
    opacity: 0.8;
    background-size: 40px 40px;
    transform: rotate(-20deg);
    animation-duration: 5.5s;
    animation-delay: 0.4s;
}


div {
    display: block;
    unicode-bidi: isolate;
}
@keyframes movement_snowflake{
0% {
}

100% {
    top: 130%;
}
}


.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  position: absolute;
  width: 200px; 
  top: 50%;
  transform: translateY(-50%);
}


.left {
  left: -250px;
  animation: moveLeft 4s ease-in-out forwards;
}


.right {
  right: -250px;
  animation: moveRight 4s ease-in-out forwards;
}

.greeting {
  opacity: 0;
  color: gold;
  font-size: 3rem;
  font-family: Arial, sans-serif;
  animation: fadeIn 1.5s ease-in forwards;
  animation-delay: 3s; 
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  text-align: center;
}


@keyframes moveLeft {
  0% { left: -250px; }
  40% { left: calc(50% - 210px); } 
  60% { left: calc(50% - 210px); } 
  100% { left: -250px; }           
}


@keyframes moveRight {
  0% { right: -250px; }
  40% { right: calc(50% - 210px); }
  60% { right: calc(50% - 210px); }
  100% { right: -250px; }
}


@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}