/* styles.css */
@font-face {
    font-family: 'Aestetico';
    src: url('fonts/Ae_Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.dm-sans {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* Style de base pour le corps de la page */
body {
    font-family: 'Aestetico','DM Sans', sans-serif;
    background-color: #FBEFEF;
    margin: 0;
    padding: 0;  
    
}

.logo-cylk {
    width: 18%; /* L'image prend toute la largeur de son conteneur */
    height: auto; /* La hauteur s'ajuste automatiquement pour conserver les proportions */
}
/* Style pour l'en-tête */
header {
    background-color: #FBEFEF;
    color: rgb(247, 141, 141);
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

header h1 {
    margin: 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
}

/* Style pour la section principale */
main {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 4rem;
   font-family: 'Aestetico','DM Sans', sans-serif;
    font-size: 35px;
    line-height: 68px;
    
}

.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}

h2 {
    font-weight: 400;
    margin-bottom: 1%;
    color: #416679;
}


a:hover {
    color: rgb(247, 141, 141);

}

main a {
    display: flex;
    justify-content: center;
    text-align: center;
    font-family: 'Aestetico', 'DM Sans', sans-serif;
   
    color: #416679;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 8px;
   
    
}
main a:hover {   
    color: rgb(247, 141, 141);
    text-decoration: underline 1px;
    transition: 0.3s ease;}
    

.button {
    display: inline-block;
    margin: 30px 0px;
    padding: 8px 20px;
    font-size: 20px;
    line-height: 38px;
    color: white;
    background-color: rgb(247, 141, 141);
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: rgb(226, 106, 106);
    color: white;
}


/* Style pour le pied de page */
footer {
    color: #416679;
    text-align: center;
    width: 100%;
   padding-top: 5rem;
}

/* Sélectionne le texte surligné */
::selection {
    background-color: #ffb7b7;
    /* Couleur de fond du texte surligné */
    color: #ffffff;
    /* Couleur du texte surligné */
}

/* Pour les navigateurs qui nécessitent le préfixe -moz- (comme Firefox) */
::-moz-selection {
    background-color: #ffb7b7;
    /* Couleur de fond du texte surligné */
    color: #ffffff;
    /* Couleur du texte surligné */
}

/* Pour les navigateurs qui nécessitent le préfixe -webkit- (comme Safari) */
::-webkit-selection {
    background-color: #ffb7b7;
    /* Couleur de fond du texte surligné */
    color: #ffffff;
    /* Couleur du texte surligné */
}


/* Media Query pour les écrans de taille moyenne (tablettes) */
@media (max-width: 768px) {

    .button {
        padding: 8px 16px;
        font-size: 16px;
    }


    h2 {
        font-size: 45px;
        line-height: 50px;
    }


    .logo-cylk { 
        width: 25%; 
        height: auto
    }
}

/* Media Query pour les petits écrans (smartphones) */
@media (max-width: 480px) {

    .logo-cylk { 
        width: 65%; 
        height: auto
    }
    .button {
        padding: 6px 12px;
        font-size: 16px;
    }

    main {
        padding: 1rem 2.5rem;
        color: rgb(247, 141, 141);
    }

    h2 {
        font-size: 35px;
        line-height: 50px;
    }

}