body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    height: 100%;
    position: relative;
    font-size: 22px;
    background-color: #000000;
    background-attachment:fixed; /* This keeps the image fixed while scrolling */
    
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/photo_2026-05-01_02-40-42.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
        /* min-height: 100vh;
    animation-name: blur;
    animation-duration: 2s;
    animation-delay: 4s;
    animation-fill-mode: forwards; */
    
}
/* 
.all{
    min-height: 100vh;
    animation-name: blur;
    animation-duration: 0.3s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
} */

.layer1{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/layer1.png);
   background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(10px);
    animation-name: layer1;
    animation-duration: 0.5s;
    z-index: 4;
    filter: blur(2px); 

    
}
.layer2{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/layer2.png);
   background-size: 1600px;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(10px);
        animation-name: layer2;
    animation-duration: 1s;
    z-index: 3;


    
    
}
.layer3{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/layer3.png);
    background-size: 1600px ;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(65px);
         animation-name: layer3;
    animation-duration: 2s;
    z-index: 2;
}
.moon{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/moon.png);
    background-size: 1111px ;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(0px);
    animation-name: moon;
    animation-duration: 3s;
    z-index: 1;
}


@keyframes layer1{

0%{transform: translateY(375px);}

100%{transform: translateY(10px);}

}


@keyframes layer2{

0%{transform: translateY(375px);}

100%{transform: translateY(10px);}

}


@keyframes layer3{

0%{transform: translateY(800px);}

100%{transform: translateY(65px);}

}


@keyframes moon{

0%{transform: translateY(1000px);}

50%{transform: translateY(500px);}

100%{transform: translateY(0px);}

}


@keyframes blur{
0%{filter: blur(0px); }

100%{   filter: blur(8px); }

}