*{
    scroll-behavior: smooth;
}

body{
    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background: #f5fffa;
    color:#414C6B;
    border: 0;
    margin: 0;
}

/*Nav bar styles*/

a{
    text-decoration: none;
    margin-right: 1em;
}

a:link{
    
    color:#414C6B;
}

a:visited{
    
    color: #1E80C1;
}

a:hover{
    
    color: #414a4c;
}

ul>li{
    
    list-style: none;
}

p{
    font-size: 1.5em;
}

#nav-bar{
    
    margin: 1em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1rem;
}

/*Media queries*/

@media screen and (min-width: 1000px) {

    div#nav-bar>a#menu{
        
        display: none;
    }
    
}

@media screen and (max-width: 428px) and (min-width: 360px) {

    body #nav-bar{
        
        display: flex;
        justify-content: space-between;
        max-width: 100%;
        max-height: 5em;
        border: 0;
        margin: 1em 0;
    }

    div#icon a{
        
        max-width: 3em;
        max-height: 3em;
    }
    
    img#icon-pic{
        
        max-width: 100%;
        height: 3em;
    }

    /*Nav-bar styles*/

    #icon-pic{
        
        max-width: 100%;
        height: 9vh;
        margin-right: 1em;
        float: left;
    }
    
    #icon h1{
        
        display: none;
    }
    
    nav{
        
        width:0;
        height: 0;
    }
    
    #nav-links a{
        
        display: none;
    }
    
    .log-button{
        
        max-width: 7em;
        margin-left: -15em;
        margin-top: -0.8em;
    }
    
    #login{
        
        max-width: 5.92em;
    }
    
    #login>li{
        
        font-size: 0.45em;
    }
    
    ul#login>li#connect{
        
        padding: 1.25em 1em 1em 1em;
    }
    
    li#connect a{
        
        font-size: 1em;
    }
    
    ul#login>li#create{
        
        padding: 1em 2em;
    }
    
    li#create{
        
        max-width: 100%;
        height: 2em;
    }
    
    li#create>a{
        
        margin-top: -0.8em;
    }
    
    #nav-bar a{
        
        margin: 0;
        min-height: 1em;
        max-height: 2em;
        float: right;
    }
    
    #menu img{
        
        max-width: 2em;
        height: 2em;
        margin: 0.2em 1em 1em 1em;
    }

    /*Main pages styles*/
    
    main{
        
        max-width: 60em;
        max-height: 100%;
    }
    
    .img-container img{ 
        
        max-width: 12.5em;
        max-height: 100%;
    }
    
    .caption{
        
        margin-left: -1%;
        max-width: 100%;
        height: auto;
        text-align: left;
    }
    
    .caption p{
        
        max-width: fit-content;
        max-height: fit-content;
        font-size: 0.5em;
    }
    
    .title{
        
        max-width: 2em;
    }
    
    div.title{
        
        margin: 0.25em auto;
    }
    
    .title img{
        
        max-width: 100%;
        height: 1em;
        margin-right: 1em;
    }
    
    .title h2{
        
        font-size: 0.75em;
        margin: auto ;
    }

    /*Home styles*/

    div#Home{
        
        margin-bottom: 0.25em;
    }

    /*FAQ styles*/

    #FAQ{
        
        max-width: 25em;
        max-height: 100%;
    }
    
    #FAQ>details>summary{
        
        font-size: 0.5em;
    }
    
    #FAQ>details>p{
        
        font-size: 0.4em;
    }

    /*About styles*/

    div#About{
        
        margin-top: 2.5em;
    }

    /*Footer styles*/
    
    .footer{
        
        max-height: 100%;
        font-size: 0.45em;
    }
    
    .row ul>li>a{
        
        display: flex;
        justify-content: center;
        margin-right: 2em;
    }

}

/*Logo*/

#icon{
    
    font-size: 1em;
    font-weight: bolder;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

#icon-pic{
    max-width: 100%;
    height: 9vh;
    margin-right: 1em;
    float: left;
}

h1{
    
    border: 0;
    margin: 0.35em;
    overflow: hidden;
}

nav{
    
    font-size: 1.4em;
}

#nav-links{
    
    display: flex;
}

#nav-links>li{
    
    margin-right: 1em;
    margin-top: -0.35em;
}

#login{
    
    display: flex;
    font-size: 1.4em;
    font-weight: bold;
}

#login>li{
    
    border: 3px solid #414C6B;
    border-radius: 15px;
    margin: -1em 1em;
    padding: 0.5em 1.4em 0.5em 1.8em;
}

#connect{
    
    background-color: #1E80C1;
}

#connect>a{
    
    color:#f5fffa;
}

#create{
    
    background-color: #f5fffa;
}

/*Main styles*/

.title{
    
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.title img{
    
    max-width: 100%;
    height: 12vh;
    margin-right: 1em;
}

/*Home styles*/

#Home{
    
    display: flex;
    justify-content: space-around;
    margin-bottom: 2em;
}

.img-container>img{
    
    width: 40em;
    max-height: 100%;
    border-radius: 20px;
}

.caption{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 100%;
    width: 20vw;
}

/*Services*/

#Services{
    
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 2em;
}

#Services>.caption{
    
    display: inline-flex;
    margin-left: 2em;
}

/*FAQ*/

#FAQ{
    
    margin: 0 3em;
    text-align: center;
    background: linear-gradient(#5b92e5,#1E80C1);
    color: #f5fffa;
    border-radius: 20px;
}

#FAQ>details{
    
    background: linear-gradient(#5b92e5,#1E80C1);
    color: #f5fffa;
    font-size: 1.5rem;
    border-radius: 20px;
}

/*Menu défilant*/

summary{
    
    padding: 1em ;
    list-style: none;
    display: flex;
    justify-content: center;
    transition: height 1s ease;
}

summary::after{
    
    margin-left: 1em;
    content: "\002B";
}

details>p{
    
    padding: 1em;
}

details[open] summary {
    
    border-bottom: 1px solid #414a4c;
    margin-bottom: .5em;
}

details[open] summary:after{
    
  content: "\00D7";
}

details[open] div{
    
  padding: .5em 1em;
}

/*About styles*/

#About{
    
    display: flex;
    justify-content: space-around;
    margin: 2em auto;
}

/*Footer styles*/

.footer{
    
    background: linear-gradient(#1E80C1,#414C6B);
    border: 0;
    border-radius: 15px 15px 0 0;
    margin: 0;
    max-width: 100%;
    height: 8em;
    text-align: center;
    overflow-x: hidden;
}

.footer .row{
    
    width: 100%;
}

.row ul{
    
    margin: 3% 1.5%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.row a{
    
    margin: 1% 0%;
    padding: 1% 0%;
    font-size: 1.25em;
    color: #f5fffa;
}

.row a:hover{
    color: #414a4c;
}