body
{
    margin: 0;
    height: 100%;
    width: 100%;
	background-image:url("fonds/fond_cascade.png");
    background-color: rgb(0, 0, 0);
	background-repeat: repeat;
    background-size: 100%;
    background-position: top;

background-attachment: scroll;}


    @font-face 
    {font-family: "dancingscript";      
    src: url("police/dancingscript.ttf") format("truetype");
    src: url("police/dancingscript.otf") format("opentype")}
@font-face 
   {font-family: "blackstone";
    src: url("police/blackstone.ttf") format("truetype");
    src: url("police/blackstone.otf") format("opentype");}
@font-face 
   {font-family: "Cardinal";
    src: url("police/Cardinal.ttf") format("truetype");
    src: url("police/Cardinal.otf") format("opentype");}
    

    
    @keyframes fadein {
            0% {opacity:0;}
            10%{opacity:0;}
            20% {opacity:0;}
            50%{ opacity:0.5;}
            100% { opacity:1;}}
    

@keyframes animate {
    from {margin-top: -50%;
         margin-left:30%;}                                         
    to {margin-top: 220%;
        margin-left: 30%;}} 

    @keyframes animate2 {
            from {margin-top: -50%;
                 margin-left:20%;}                                         
            to {margin-top: 220%;
                margin-left: 20%;}}

                @keyframes animate3 {
                    from {margin-top: -50%;
                         margin-left:71%;}                                         
                    to {margin-top: 220%;
                        margin-left: 71%;}} 
                         
                        @keyframes animate4 {
                            from {margin-top: -50%;
                                 margin-left:30%;}                                         
                            to {margin-top: 220%;
                                margin-left: 30%;}}

                                @keyframes animate5 {
                                    from {margin-top: -50%;
                                         margin-left:50%;}                                         
                                    to {margin-top: 220%;
                                        margin-left: 50%;}}

                                        @keyframes animate_tulipe {
                                            from {margin-top: -50%;
                                                 margin-left:89%;}                                         
                                            to {margin-top: 200%;
                                                margin-left: 89%;}}                 

                                                @keyframes animate6 {
                                                    from {margin-top: -50%;
                                                         margin-left:12%;}                                         
                                                    to {margin-top: 220%;
                                                        margin-left: 12%;}}

                                                        @keyframes animate7 {
                                                            from {margin-top: -50%;
                                                                 margin-left:45%;}                                         
                                                            to {margin-top: 220%;
                                                                margin-left: 45%;}} 
                                                                @keyframes animate8 {
                                                                    from {margin-top: -50%;
                                                                         margin-left:83%;}                                         
                                                                    to {margin-top: 220%;
                                                                        margin-left: 83%;}} 

    

        .header {
            display: grid; 
            grid-template-columns: 1fr 1fr 1.7fr;
            grid-template-rows:auto;
            padding-top: 2%;

            width: 100%;}

        .flèche{
            padding-top: 3%;
            padding-left: 10%;
            width: 60%;
            margin: 0;
            cursor: url(curseurs/cu_lune.png), auto;}

   
        /* .phrase{
        color: rgb(234, 239, 242);
        margin:0;
        padding-top: 14%;
        font-size: 180%;
        font-weight: normal;
        font-family:"Abecedary", "dancingscript", "blackstone_hand",Comic Sans MS, Impact, Arial ;} */


.voir div {
    border: 4px dotted rgb(211, 49, 20);}

.voir_no {
     color:rgb(233, 82, 22);              
    font-size: 10px;
    font-weight: bold;
    margin: 0;
opacity: 0;}


    .étiquette {
        padding:0.5%;
        margin:0;
        color:rgb(7, 7, 7);              
        font-size: 130%;
        font-weight: bold;
        font-family:"dancingscript","Cardinal",Comic Sans MS, Impact, Arial ;
        background-image:url("img_plan/bande.png");}


.grilleA {
display: grid;
margin: 6% 8% 100px 22%;                                                     
grid-template-columns: 1.2fr 1.2fr 1.2fr;
grid-template-rows: auto;
gap: 6% 9%;   
justify-items: center;}                                        


.cas1 {
width: 100%;
animation: fadein 2s; }

.cas2 {
    width: 100%;
    animation: fadein 5s;}
 .cas3 {
    width: 100%;
    animation: fadein 3s; 
}
.cas4 {
    width: 100%;
    animation: fadein 6s;}  
.cas5 {
    width: 100%;
    animation: fadein 9s;;
}
.cas6{
    width: 100%;
    animation: fadein 8s;}
.cas7 {
width: 100%;
animation: fadein 7s;
padding-top: 22%; }
.cas8 {
    width: 100%;
    animation: fadein 4s;}

        

 
.goutte {
    margin: -50% 0 0 30%;
    height: 15%;
  position: absolute;
  
    animation-delay: 4s;
    animation-name: animate;               
    animation-duration: 15s;
    animation-play-state:running; } 


    .goutte2 {
        margin: -50% 0 0 20%;
        height: 12%;
      position: absolute;
      
        animation-delay:9s;
        animation-name: animate2;               
        animation-duration: 13s;
        animation-play-state:running;}    
        
        
        .tulipe {
                margin: -50% 0 0 60%;
                height: 22%;
              position: absolute;
              cursor: url(curseurs/cu_tour.png), auto;
              
                animation-delay:13s;
                animation-name: animate_tulipe;               
                animation-duration: 34s;
                animation-play-state:running; }

    .goutte3 {
        margin: -50% 0 0 71%;
        height:  17%;
          position: absolute;
          
            animation-delay:15s;
            animation-name: animate3;               
            animation-duration: 14s;
            animation-play-state:running; } 


        .goutte4 {
                margin: -50% 0 0 30%;
                height: 19%;
              position: absolute;
              
                animation-delay:19s;
                animation-name: animate4;               
                animation-duration: 20s;
                animation-play-state:running; }


         .goutte5 {
             margin: -50% 0 0 50%;
            height:  34%;
            position: absolute;
            cursor: url(curseurs/cu_mort2.png), auto;
                  
            animation-delay:24s;
            animation-name: animate5;               
            animation-duration: 38s;
            animation-play-state:running; } 

            .goutte6 {
                margin: -50% 0 0 12%;
               height:  8%;
               position: absolute;
                     
               animation-delay:30s;
               animation-name: animate6;               
               animation-duration: 10s;
               animation-play-state:running; } 


               .goutte7 {
                margin: -50% 0 0 45%;
               height:  15%;
               position: absolute;
                     
               animation-delay:32s;
               animation-name: animate7;               
               animation-duration: 14s;
               animation-play-state:running; 
               animation-iteration-count: infinite;}


               .goutte8 {
                margin: -50% 0 0 83%;
               height:  7%;
               position: absolute;
                     
               animation-delay:37s;
               animation-name: animate8;               
               animation-duration: 17s;
               animation-play-state:running;
               animation-iteration-count: infinite; }