body{
margin : 0;
padding: 0;

}

.grid {
display: grid;
grid-row-gap: 0;
grid-template-rows: minmax(10px, auto) repeat(5,1fr);
grid-template-columns: repeat(5,1fr);
}

a{
    color:black;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;

}

.tools_rules{
    grid-column:1/2 ;
    grid-row: 1/2;
    
    font-size:20px;
    font-family: sans-serif;
margin-top: 10px;
margin-left: 25px;
    
}

.container{
    display:grid;
	grid-template-columns: repeat(6,1fr);
	grid-auto-rows:100px 300px;
    grid-gap:10px;
    grid-auto-flow: dense;
}

.liens{
    color:grey;
}

.about{
    grid-column: 2/3;
    grid-row: 1/2;
    margin-top: 10px;
    text-align: center;
    font-size:20px;


}

.text-info{
    margin-top: 50px;
    grid-column: 2/5;
    grid-row: 2/4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    text-align:justify;

    
}
.text-inspi{
    margin-top: 50px;
    grid-column: 2/5;
    grid-row: 2/4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    text-align:justify;
    
}

.inspi{
    grid-column: 3/4;
    grid-row: 1/2;
    margin-top: 10px;
    text-align: center;
    font-size:20px;
}

.sidebar{
    grid-column: 1/2;
    grid-row: 2/span 8;
    
    
    
}


.sidebar_page{
    grid-column: 1/2;
    grid-row: 2/4;
   
}

.font_alph{
    grid-column:4/6;
    grid-row: 2/4;

}




.alph_a{
    grid-column:2/3;
    grid-row: 2/3;



}

.alph_a_page{
    grid-column:2/4;
    grid-row: 2/4;
}

.alph_b{
    grid-column:3/4;
    grid-row: 2/3;
}

.alph_c{
    grid-column:4/5;
    grid-row: 2/3;
}

.alph_d{
    grid-column:5/6;
    grid-row: 2/3;
}
.alph_e{
    grid-column:2/3;
    grid-row: 3/4;
}

.alph_f{
    grid-column:3/4;
    grid-row: 3/4;
}
.alph_g{
    grid-column:4/5;
    grid-row: 3/4;
}

.alph_h{
    grid-column:5/6;
    grid-row: 3/4;
}
.alph_i{
    grid-column:2/3;
    grid-row: 4/5;
}

.alph_j{
    grid-column:3/4;
    grid-row: 4/5;
}
.alph_k{
    grid-column:4/5;
    grid-row: 4/5;
}

.alph_l{
    grid-column:5/6;
    grid-row: 4/5;
}
.alph_m{
    grid-column:2/3;
    grid-row: 5/6;
}

.alph_n{
    grid-column:3/4;
    grid-row: 5/6;
}
.alph_o{
    grid-column:4/5;
    grid-row: 5/6;
}

.alph_p{
    grid-column:5/6;
    grid-row: 5/6;
}
.alph_q{
    grid-column:2/3;
    grid-row: 6/7;
}

.alph_r{
    grid-column:3/4;
    grid-row: 6/7;
}
.alph_s{
    grid-column:4/5;
    grid-row: 6/7;
}

.alph_t{
    grid-column:5/6;
    grid-row: 6/7;
}
.alph_u{
    grid-column:2/3;
    grid-row: 7/8;
}

.alph_v{
    grid-column:3/4;
    grid-row: 7/8;
}
.alph_w{
    grid-column:4/5;
    grid-row: 7/8;
}

.alph_x{
    grid-column:5/6;
    grid-row: 7/8;
}
.alph_y{
    grid-column:3/4;
    grid-row: 8/9;
}

.alph_z{
    grid-column:4/5;
    grid-row: 8/9;
}

@media screen and (max-width:500px){
    .container{
        grid-template-columns: repeat(1,1fr);
    }

    .h-div{
        font-size: 35px;
                background-color: #ffffff;
               
               width: 100%;
                position: fixed;
                
                z-index: 999;
                
            
                
             }
             .h-div a:hover {
               display: none;
              }

    .w-1,.w-2,.w-3,.w-4,.w-5,.w-6{
        max-width: 500px;
        max-height:fit-content;
        grid-column:span 1;
    }

    
    .gallery-item:hover .text{
       display: none;
    }

    .sidebar{
        display: none;
    }

    .grid {
        display: grid;
        grid-row-gap: 0;
        grid-template-rows: minmax(150px, auto) repeat(26,1fr);
        grid-template-columns:auto;
        }
        
        .w-1,.w-2,.w-3,.w-4,.w-5,.w-6{
            max-width: 500px;
            max-height:fit-content;
            grid-column:span 1;
        }
}


@keyframes move-down{

    0%{
        top:10%;
    }
    50%{
        top:35%;
    }
    100%{
        top:50%;
    }
}