body{
    padding: 0;
    margin: 0;
    background-size: cover;
    background-position: center;
}

.accueil{
    display: flex;
    
}

.logo img {
    border-radius: 20px;
}

.presentation1{
    padding: 1vw;
    
}
.presentation{
    padding: 2vw;
    background-color: black;
    opacity: 90%;
    border-radius: 3rem;
    border-style:groove; 
    border-color:  rgb(0, 123, 206);   
}

.presentation h1{
    color: white;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.presentation h2{
    color: white;
    font-family:Arial, Helvetica, sans-serif
}

/*              NAVIGATION              */

.navigation nav ul li a{
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.navigation nav ul{
    list-style: none;
    text-align: left;
    border-radius: 5rem;
    background-color: black;
    opacity: 90%;
    border-color:  rgb(0, 123, 206);
    border-style:groove;
}

html {
    position: relative;
    min-height: 100%;
  }
  body {
    /*Margin bottom by footer height*/
    margin-bottom: 60px;
  }

  .presentation h3{
    color: red;
  }
  
.footer {
    position: absolute;
    width: 100%;
    margin-top: 2rem;
  }
@media (max-width: 500px){

    body{
        background-image: url(/images/accueil2.jpg);
    }
    .accueil{
        flex-direction: column;
    }
    .navigation{
        padding: 1rem ;
        width: 10px;
        
    }

    .presentation1{
        font-size: 2rem;
        margin-top: 10px;
    }
    .presentation h1{
        text-align: center;
        font-size: 3.5rem;
    }
    .presentation h2{
        text-align: center;
        font-size: 1.5rem;
    }

    .presentation h3{
        text-align: center;
        font-size: 1.5rem;
    }

    .navigation nav{
        display: grid;
        justify-content: center;
        margin-left: 45vw;
    }
    .navigation nav ul{
        padding: 3rem;
        width: 250px;
    }
    .navigation nav ul li{

        text-align: center;
    }
    .navigation nav ul li a{
        font-size: 1.5rem;
        text-align: center;
    }

    .logo{
        text-align: center
    }
    .logo img{
        width: 250px;
    }
}

@media (501px <= width <= 1350px) {

    body{
        background-image: url(/images/accueil2.jpg);
    }
        .accueil{
            flex-direction: column;
        }
        .navigation{
            padding: 1rem ;
            width: 10px;
        }
        .presentation1{
            font-size: 2rem;
            margin-top: 10px;
        }
        .presentation h1{
            text-align: center;
            font-size: 5rem;
        }
        .presentation h2{
            text-align: center;
            font-size: 2.5rem;
        }

        .presentation h3{
            text-align: center;
            font-size: 2.5rem;
        }
    
        .navigation nav{
            display: grid;
            justify-content: center;
            margin-left: 45vw;
        }
        .navigation nav ul{
            padding: 3rem;
            width: 350px;
            
        }
        .navigation nav ul li{
            text-align: center;
        }
        .navigation nav ul li a{
            font-size: 2.1rem;
        }
        
        .logo {
            text-align: center;
        }
        .logo img{
            width: 40rem;
        }
    }

@media (min-width: 1351px){
    body{
        background-image: url(/images/accueil2.jpg  );
    }
    .presentation1{
        margin-top: 90px;
    }

    .logo{
        display: flex;
        justify-content: space-between;
    }

    .logo img{
        border-radius: 25px;
        height: 200px;
    }
    .navigation{
        padding: 13rem;
    }

    .presentation h1{
        color: white;
        font-size: 4.5rem;
    }
    
    .presentation h2{
        color: white;
        font-size: 2.5rem;
    }

    .presentation h3{
        color: white;
        font-size: 2rem;
        color: red;
    }
    .navigation nav ul{
        padding: 4rem;
        width: 270px;
        border-color: rgb(3, 47, 170);
    }

    .navigation nav ul li a{
        font-size: 2.25rem;
    }

    .soustitre h2{
        font-size: 1rem;
    }


}