.container-fluid{
    height:400px;
}
.menu-items{
    background-color:none;
    color:white;
    padding: 5%;
}
a{
    text-decoration: none;
    color:azure;
}
.card{
    border: 1px solid black;
}
h6{
    color:rgb(223, 151, 19);
    background-color: black;
    margin-left: 2%;
    width:100%;
    padding: 2%;
}
.row2{
    margin-top: 1%;
}
/* Responsivité téléphone */
@media screen and (max-width:450px){
    .container-fluid{
        margin-top: 2%;
        display: block;
        justify-content:flex-start;
    }
    .projets{
        color:rgb(44, 25, 25);
    }
    ol li{
        color:white;
    }
    .menu-items{
        background-color: rgb(17, 16, 16);
        color:rgb(155, 153, 153);
        font-size: small;
        padding: 5%;
    }
    /* .menu{
        width:250px;
    } */
    h1{
        font-size: large;
        font-family: 'Arial Narrow Bold', sans-serif;
        padding-top: 4%;
    }
    h6{
        font-size: smaller;
    }
    .row1,.col{
        display: block;
        color: black;
    }
    .row2,.col{
        display: block;
    }
    .card{
        margin:auto;
        width: 100%;
        color:rgb(29, 29, 28);
        display:flex;
        border-radius: 20px;
        padding: 2%;
        border: 1px solid black;
        display: flex;
        background-image: linear-gradient(blue,rgb(6, 73, 90),blue)
    }
    .row2{
        margin-top: 3%;
    }
    /* .card{
        margin-left: 2%;
        border-radius: 20px;
        width: 80%;
        display: flex;
        border: 1px solid black;
        padding: 2%;
        color:orange;
        display: flex;
    } */
    h3,h5{
        color:antiquewhite;
    }
    img{
        width: 30%;
        float: inline-start;
        background-color: transparent;
    }

    .nom{
        margin-left: 10%;
    }
} 
/* Responsivité tablette */
@media screen and(max-width:575px){
    .container-fluid{
        margin-top: 2%;
        display: block;
    }
    h3,h5{
        color:antiquewhite;
    }
    .scroller{
        height: 250px;
        overflow-y: scroll;
        scrollbar-color: rebeccapurple green;
        scrollbar-width: thin;
      }
      .projets{
        color: black;
      }
      
    ol li{
        color:rgb(158, 156, 156);
    }
    .row1,.col{
        display: flex;
    }
    .row2,.col{
        display: flex;
    }
    .row1 .col .card{
        margin-left: 2%;
        width: 100%;
        border-radius: 20px;
        padding: 2%;
        display:flex;
        border: 1px solid black;
        color:rgb(248, 248, 248);
        display:flex;
    }
    h6{
        font-size: small;
    }
    .row2 .col .card{
        margin-left: 2%;
        margin-top: 1%;
        width: 200px;
        border-radius: 20px;
        border: 1px solid black;
        border-radius: 20px;
        padding: 2%;
        display: flex;
        color:rgb(245, 244, 243);
        display: flex;
        background-color: rgb(83, 82, 80);
    }
    .nom{
        margin-left: 50%;
    }
}
/* Responsivité ordinateur */
@media screen and(max-width:775px){
    .container-fluid{
        margin-top: 2%;
        display: block;
    }
    h3,h5{
        color:antiquewhite;
    }
    .scroller{
        height: 250px;
        overflow-y: scroll;
        scrollbar-color: rebeccapurple green;
        scrollbar-width: thin;
      }
      .projets{
        color: black;
      }
      
    ol li{
        color:white;
    }
    .row1,.col{
        display: flex;
    }
    .row2,.col{
        display: flex;
    }
    .row1 .col .card{
        margin-left: 2%;
        width: 100%;
        border-radius: 20px;
        padding: 2%;
        display:flex;
        border: 1px solid black;
        color:rgb(248, 248, 248);
        display:flex;
        background-color: rgb(83, 82, 80);
    }
    h6{
        font-size: small;
    }
    .row2 .col .card{
        margin-left: 2%;
        margin-top: 1%;
        width: 200px;
        border-radius: 20px;
        border: 1px solid black;
        border-radius: 20px;
        padding: 2%;
        display: flex;
        color:rgb(245, 244, 243);
        display: flex;
        background-color: rgb(83, 82, 80);
    }
    .nom{
        margin-left: 50%;
    }
} 
/* Responsivité grands ecrans */
@media screen and(max-width:880px){
    .container-fluid{
        margin-top: 2%;
        display: block;
    }
    h3,h5{
        color:antiquewhite;
    }
    ol li{
        color:white;
    }
    .row1,.col{
        display: flex;
    }
    .row2,.col{
        display: flex;
    }
    .row1 .col .card{
        margin-left: 2%;
        width: 100%;
        display: flex;
        border-radius: 20px;
        padding: 2%;
        border: 1px solid black;
        border-radius:3% ;
        padding-left: 2%;
        color:orange;
        display:flex;
        background-color: rgb(83, 82, 80);
    }
    .row2 .col .card{
        margin-left: 2%;
        margin-top: 1%;
        border-radius: 20px;
        width: 70%;
        border-radius: 20px;
        padding: 2%;
        display: flex;
        border: 1px solid black;
        color:orange;
        display: flex;
        background-color: rgb(83, 82, 80);
    }
    .nom{
        margin-left: 50%;
    }
} 

@media screen and (min-width:881px){
    .container-fluid{
        margin-top: 2%;
        display: block;
    }  
    h3,h5{
        color:antiquewhite;
    }
    ol li{
        color:rgb(250, 246, 246);
    }
    .row1,.col{
        display: flex;
    }
    .row2,.col{
        display: flex;
    }
    .row1 .col .card{
        margin-left: 2%;
        width: 100%;
        border-radius: 20px;
        padding: 2%;
        border: 1px solid black;
        border-radius:3% ;
        padding-left: 2%;
        color:orange;
        display:flex;
        background-color: rgb(83, 82, 80);
    }
    .row2 .col .card{
        margin-left: 2%;
        margin-top: 1%;
        border-radius: 20px;
        width: 100%;
        border-radius: 20px;
        padding: 2%;
        border: 1px solid black;
        color:orange;
        display: flex;
        background-color: rgb(83, 82, 80);
    }
    .nom{
        margin-left: 10%;
    }
}