body {
    background-image: url("images/background-map.avif");
    color: red;
    font-family: 'Raleway', sans-serif;
    margin: 0;
    padding: 0;
}

main {
    /* background-image: url("images/background-main.avif"); */
    background-color: rgb(253, 254, 255);
    position: relative;
    z-index: 1;
    margin: 50px auto;
    width: 300px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

h1 {
    text-align: center;
    font-size: 25px;
    padding-bottom: 30px;
    border-bottom: 1px solid red;
}
    p {
      text-align: center;
    }
  

      #logo{
          width: 200px;
          border-radius: 50px;
          margin-top: 20px;
      }

      #image-femme{
          width: 200px;
          border-radius: 50px;
          margin-top: 20px;
          box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
      }
  
      ul{
          list-style: none;
      }

      li{
          padding-bottom: 10px;
      }

      a{
          text-decoration: none;
          font-weight:500;
          color: black;
      }
      a i{
        color: red;
      }
      
  
      button{
          background-color: inherit;
          border: red 1px solid;
          padding: 5px;
          border-radius: 10px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          cursor: pointer;
          
      }

  i{
    color: red;
  }
  


   h2{
      padding: 10px;
    }

   


.partage{

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 20px;
    border: 1px solid rgb(230, 228, 228);
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}



.partage ul {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0;
    
}

.partage ul li{
    border: 1px solid red;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: white;
}

.partage ul li:hover{
    background-color: red;
    color: white;
    margin: 0;
    
}

.partage ul li:hover i{
    color: white;
}

#modal{
    top: 377px;
    background-color: black;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    display: none;
    width: 220px;
    height: 272px;
    
}

#openmodal:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}



.in-modal{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#closemodal{
    background-color: white;
    padding: 10px;
    border: 1px solid red;
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

.formulaire{
    text-decoration: none;
    color: white;
    background-color: red;
    padding: 10px;
    border-radius: 10px;
    margin-block: 15px;
    font-weight: bolder;
    transition:padding 0.3s ease-in-out;
}

.formulaire:hover{
    background-color: white;
    color: red;
    border: 1px solid red;
    padding: 15px; 
}