*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color:rgba(29, 31, 31, 1);
    color: white;
}

#nav {
    background-color: black;
    color: white;
}

#logo {
    color: orange;
    font-weight: bold;
    font-size: 22px;
}

.container{
    display: flex;
    flex-direction: row;
    margin: 15px;
    margin-top: 50px;
}

.text{
    margin: 5px;
    margin-top: 100px;
}

.text h1 {
    color: orange;
    font-size: 20px;
    margin: 5px;
    font-weight: bold;
}

.text p {
    margin: 15px;
}

.image{
    margin: 15px;
}

.image img {
    border-radius: 50%;
    margin:20px;
    border: 2px solid wheat;
}

.fonctextprincipale{
    margin: 10px;
    justify-content: center;
    text-align: center;
}
.fonctextprincipale h2{
    font-size: 20px;
    font-weight: bold;
    color: orange;
    justify-content: center;
    text-align: center;
}

.telechargement{
    justify-content: center;
    text-align: center;
    align-items: center;
    margin: 10px;
}

.telechargement h3{
    margin: 15px;
    font-size: 20px;
    font-weight: bold;
    color: orange;
}

.telechargement a{
    text-decoration: none;
    border-radius: 10px;
    background-color: white;
    color: black;
    width: 250px;
    padding: 5px;
    margin: 10px;
}

.ios{
    margin: 10px;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.ios p{
    font-size: 20px;
    font-weight: bold;

}
.fonctionnalité2 {
    margin: 10px;
    display: block;
}

.fonctext2 p {
    margin: 10px;
}
.fonctext2 p span{
    font-weight: bold;
    color: orange;
}

.image_fonctionalite{
    display: flex;
    flex-direction: row;
}
.image_fonctionalite img{
    width: 250px;
    height: 450px;
    margin: 100px;
    justify-content: center;
    align-items: center;
    text-align: center;
    
}

/* Media Queries pour les petits écrans */
@media only screen and (max-width: 600px) {
    .container {
        flex-direction: column;
    }

    .fonctextprincipale,
    .telechargement,
    .ios,
    .fonctionnalité2 {
        margin: 10px;
    }

    .fonctextprincipale h2,
    .telechargement h3,
    .ios p {
        font-size: 16px;
    }

    .telechargement a {
        width: 200px;
    }

    .image_fonctionalite{
        display: block;
        justify-content: center;
        text-align: center;
    }

    .image_fonctionalite img {
        width: 250px;
        height: auto;
        margin: 20px 0;
        
    }
}