*   /* On reinitialise les parametres ajouté par les navigateurs à tous les élements */
{
    margin: 0; /* toutes les marges externes à 0 */
    padding: 0; /* toutes les marges internes à 0*/
    box-sizing: border-box; /* definit la façon dont les dimensions totales d'un élément sont calculée - border-box = Modéle de boite */ 
}
body{ /* On sélectionne le body et on applique les régles */opacity:1;
    display: flex; /* On active la possibilité des éléments enfants de devenir fléxibles et de pouvoir modifier leurs dimensions à l'interieur du conteneur afin de remplir l'espace disponible */
    justify-content: center; /* permet de centrer les éléments 'flex' sur l'axe principal X */
    align-items: center; /* permet de centrer les éléments 'flex' sur l'axe secondaire Y */ 
    min-height: 100vh;/* interdit que la valeur height des éléments soit inférieur à cette valeur */
   /*background: #eaeef0;*/ /* Couleur de fond du body */
}
/* SCENE */
.stage{ /* On sélectionne la div ayant la 'classe=scene' et on applique les régles */
   position: relative;/* On lui active la position 'relative' */
   width: 1200px; /* largeur de lélément */
   height: 800px; /* hauteur de l'élément */
   background: linear-gradient(to bottom, #d8f3ff 0%, #e1e4ff 50%, #b6e0fd 100%);
   /* background: rgb(250, 249, 249); */
    /*background: linear-gradient(to bottom, #f2f3f470 0%, #9dd3f4 50%, #77faf3 100%); *//* couleur du fond de lélément */
   border-radius: 40px; /* les coins sont arrondis */
   box-shadow: -10px -10px 15px rgba(255, 255, 255, .9),/* 4ème valeur = opacité */
   8px 8px 25px rgba(0, 0, 0, .5);/* On place une lueur clair en haut et à gauche de la div et une ombre en bas et à droite 
   les trois valeurs designent respectivement:
   1. Decalge en X
   2. Decalge en Y
   3. Flou gaussian*/
   border: 1px solid #fff; /* On met en place un liseret blanc autour de la Div */
   display: flex;
   justify-content: center;
   align-items: center; 
   overflow: hidden;/*cache les elements enfants depassant la div parent*/
   opacity: 1;
   /* z-index: 1; */
}
.night {
    position: relative;
    width: 1200px;
    height: 800px;
    background: black;
    background: linear-gradient(to bottom, #000000 0%, #000320 50%, #284355 100%);
    filter:blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: AnimateNight 20s 1s alternate-reverse infinite;
}
@keyframes AnimateNight {
    0% {
        opacity: 0;
    }
    70% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}
/* SOLEIL */
.sun{  /* On sélectionne la div ayant la 'classe=sun' et on applique les régles */
    width: 180px; /* Largeur 'soleil' */
    height: 180px;/* hauteur 'soleil' */
    position: absolute; /* On lui active la position 'absolute' afin de pouvoir déplacer cet element et de le détacher des régles du parent */
    top:-50vh; /*   en position 'absolute' les élements seront deplacé */
    left: 100vw; /* dans le containeur avec Top, Right, Bottom, et Left */
                  /* et non par margin */    
    background: #fff; /* couleur du noyau du 'soleil' */
    border-radius: 50%; /* technique pour faire un rond parfait à partir d'un carré */
    box-shadow: 0 0 40px #ffde5b, 
                0 0 60px #ffff5b, 
                0 0 80px #ffff5b, /* On applique de l'ombre ext au 'soleil'*/
                0 0 100px #ffff5b, /* 1= decalageX, 2= decalageY, 3= flou */
                0 0 120px #ffff5b,
                0 0 140px #ffff5b,
                0 0 160px #ffff5b,
                0 0 180px #ffff5b,
                0 0 200px #ffff5b;
    box-shadow: inset /* ombre interne */
                0 0 40px #ffff5b, /* On applique de l'ombre int au 'soleil' */
                0 0 60px #ffff5b, /* 1= decalageX, 2= decalageY, 3= flou */
                0 0 120px #ffff5b,
                0 0 80px #ffff5b, 
                0 0 100px #ffff5b, 
                0 0 140px #ffff5b,
                0 0 160px #ffff5b,
                0 0 180px #ffff5b,
                0 0 200px #ffff5b;
                opacity: 1;
    animation: animateSun 20s  1s linear  alternate infinite;    
}
/* ROUTE */
.road{/* On sélectionne la div ayant la 'classe=road' et on applique les régles */
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0 0 40px; /* 1= HG 2= HD 3= BD 4= BG */
    width: 100%;
    height: 40vh;
    background: #333;
    /* z-index: 2; */
}
/* HERBE */
.road::before{ /* On sélectionne la div ayant la 'classe=road' et la
                  pseudo-classe'before' et on applique les régles 
                  On va créer un élement avant l'élement principal*/
    content: ''; /* quand on veut créer un élement 'avant ou après' un espace vide
                    est crée avec cette régle ( content: '';) */
    position: absolute;
    width: 100%;
    height: 15vh;
    background: #0d9e0d;
    /* z-index: 2; */
}
.road::after{ /* On sélectionne la div ayant la 'classe=road' et la
                  pseudo-classe'after' et on applique les régles 
                  On va créer un élement aprés l'élement principal*/
    content: ''; /* quand on veut créer un élement 'avant ou aprés' un espace vide
                    est crée en appliquant cette régle ( content: '';) */
    position: absolute;
    top: 65%;
    transform: translateY(-50%);
    width: 100%;
    height: 10px; /* hauteur du trait de la route */
    background: repeating-linear-gradient(90deg, transparent 0, transparent 30%, #fff 30%, #fff 100%); /* permet de faire des trait avec des espaces */
    background-size: 80px; /* taille des éléments repetés */
    /* On nomme l'animation qu'on va créer et on definit les parametres */
    animation: animateRoad 0.2s linear infinite;
}
/*On appelle l'animation 'animateRoad' et on l'execute */
@keyframes animateRoad {
    0%{
        background-position-x: 0;
    }
    100%{
        background-position-x: 80px;
    }
}
/*On appelle l'animation 'animateSun' et on l'execute */
@keyframes animateSun{
    0%{opacity: 1;
        transform: translateX(0px);
    }           
    100%{
        opacity:.8;
        transform: translate(-4600px, 2500px);
        animation-delay: 5s;
        
    }
}
.santa{
    position: absolute;
    width: 28vw;
    bottom: 15vh;
    right: 10vw;
    z-index: 9;
    animation: animateSanta .5s infinite;
}
/*On appelle l'animation 'animateRoad' et on l'execute */
@keyframes animateSanta{
    0%,100%{
        transform: translateY(0vh);
    }           
    50%{
        transform: translateY(-.15vh);       
    }
}
.santa.light-shadow{ 
    filter: drop-shadow( -2px 10px 10px rgb(245, 243, 243));
 }
.santa.dark-shadow{
    filter: drop-shadow(1px 8px 10px rgba(0, 0, 0, 0.443));
    filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.619));
 }
 .tree{
    position: absolute;
    width: 45vw;
    bottom:26vh;
    left: -40vw;
    color: #043604;
    animation: animateTree 20s infinite normal ease-in forwards;
 }
    /*On appelle l'animation 'animateTree' et on l'execute */
@keyframes animateTree{
     
     from{
         transform: translateX(-20vw);
        }
        to{
            transform: translateX(180vw);
        }
    }
    /*On appelle l'animation 'animateTree1' et on l'execute */
@keyframes animateTree1{
        
        from{
            transform: translateX(20vw);
        }
        to{
            transform: translateX(190vw);
        }
    }
    .maison{
    position: absolute;
    width: 12vw;
    bottom:34vh;
    left: -80vw;    
    animation: animateTree 20s infinite normal ease-in forwards;
    }
    .moon img {
        height: 250px;
        width: 250px;
        position: absolute;
        top: -20px;
        left:-30px; 
        opacity: 0;     
    }
    img#moon{
        width: 150px;
        height: 150px;
        opacity: 0;
        z-index: 0;
        animation: animateMoon 20s 1s alternate infinite;

    }
    .haloLune{
        width: 130px;
        height: 130px;
        border-radius: 50%;
        position: absolute;
        top: -8px;
        left: -20px;
        box-shadow:inset 10px 10px 20px #f7fcf7;
        box-shadow:5px 2px 20px #f7fcf7;
        box-shadow:5px 2px 30px #f7fcf7;
        box-shadow:5px 2px 50px #f7fcf7;
        opacity:0;
        z-index: 1;
        animation: animateMoon 20s 1s alternate
    }
    @keyframes animateMoon{
        40%{
            opacity: 0;            
        }
        50%{
            opacity: .1;            
        }
        55%{
            opacity: .4;            
        }
        60%{
            opacity: .6;            
        }
        80%{
            opacity: .8;            
        }
        

        100%{
            opacity:1;
            
        }
    }