@media (min-width: 1200px) {

    .corps h1{
            
            font-size:70px;
            color:rgb(4, 58, 235);
            text-align: center;
            margin-left:320px ;
            text-shadow: 5px 10px 10px rgb(240, 222, 121);
            animation: text 3s 1 ;
    }
    @keyframes text{

        0%{
            
            margin-bottom: -40px;
            direction:left;

        }
        30%{
            letter-spacing:25px;
            margin-bottom: -40px;
        
        }
        85%{
            letter-spacing:8px;
            margin-bottom: -40px;
        
        }

    }
    .corps h3{
            width: 80%;
            margin: 20px auto 70px;
            font-weight: 100;
            line-height: 25px;
            font-family:Tahoma, Geneva, sans-serif;
            color: yellow;

    }
    .btacceder{

        width: 200px;
        padding: 15px 0;
        text-align: center;
        border-radius: 25px;
        margin: 0 10px;
        font-weight: bold;
        border:2px solid #faf6f5;
        background:rgb(4, 58, 235);
        color:rgb(247, 247, 252);
        transition: 0.5s;
        cursor: pointer;
        background-color: gray;
       

    }
    #bts{
        width: 200px;
        padding: 15px 0;
        text-align: center;
        border-radius: 25px;
        margin: 0 10px;
        font-weight: bold;
        border:2px solid #faf6f5;
        background-color:white;
        color:rgb(247, 247, 252);
        transition: 0.5s;
        cursor: pointer;

       
        
    }

    

    #bts:hover{
        background:rgb(4, 58, 235);
        color:rgb(247, 247, 252);
        transform:scale(1.1);
        font-size: 20px;
    }

    #lesfonds{
        position: absolute;
        left: 1%;
        top: 40%;
        width: 98%;
        height: 60%;

        animation: transition 30s infinite;
    }

    @keyframes transition{

        0%{
            background-image: url(c1.jpeg);
            background-size: 100%;
            transform: scale(1.5);
            
        }
        30%{
            background-image: url(b3.jpg);
            background-size: 100%;
            transform: scale(1);
        }
        
        60%{
            background-image: url(c3.jpeg);
            background-size: 100%;
            transform: scale(1);
        }
        80%{
            background-image: url(c4.jpeg);
            background-size: 100%;
            transform: scale(1);
        }
    }    
        
}

@media (min-width: 200px){

    #lesfonds{
        position: absolute;
        left: 1%;
        top: 30%;
        width: 98%;
        height: 60%;

        animation: transition 30s infinite;
    }

    @keyframes transition{

        0%{
            background-image: url(c1.jpeg);
            background-size: 100%;
            transform: scale(1.5);
            
            
        }
        30%{
            background-image: url(b3.jpg);
            background-size: 100%;
            transform: scale(1);
        
        }
        
        60%{
            background-image: url(c3.jpeg);
            background-size: 100%;
            transform: scale(1);
        }
        80%{
            background-image: url(c4.jpeg);
            background-size: 100%;
            transform: scale(1);
        }
    }

    #bts{
        width: 200px;
        padding: 15px 0;
        text-align: center;
        border-radius: 25px;
        margin: 0 10px;
        font-weight: bold;
        border:2px solid #faf6f5;
        background:rgb(4, 58, 235);
        color:rgb(247, 247, 252);
        transition: 0.5s;
        cursor: pointer;
        
    }

    

    #bts:hover{
        background-color:gray;
        transform:scale(1.1);
        font-size: 20px;
    }

    
       
        
}