style.scss

html, body{
    padding:0;
    margin:0;
    scroll-behavior: smooth;
    overflow-x:hidden;
}

#navbar{
    position:fixed;
    width:100%;
    z-index:2;
    padding-right: 15px;

    .navbar-brand{
        background: linear-gradient(120deg,#165888 0%,#DD3C34 100%);
        background-clip: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 20px;
        font-size: 1.5em;
        font-weight: bold;
    }

    .nav-item{
        margin-left: 15px;
        margin-right: 15px;
    }

    #actif{
        color:white;
    }
}

#accueil{
    min-height: 100vh;
    background: url("images/fondAccueil.png")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    padding-top:40px;
    
    p{
        max-width: 900px;
        margin:50px;
    }
}

#situation{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: rgb(48, 47, 47);
    color:white;
    padding:55px;

    #presentationSituation{
        display: flex;
        justify-content: space-around;
        align-items: center;
        max-width: 1200px;
        margin:30px;
        flex-wrap: wrap;

        p{
            width: 320px;
            height: 320px;
            min-width: 320px;
            min-height: 320px;
            font-size: large;
            margin:50px;
            color:black;
            padding:3%;
        }

        #postItSituationBlue{
            background-color: #165888;
        }
    }

    #presentationSituation2{
        display: flex;
        justify-content: space-around;
        align-items: center;
        max-width: 1200px;
        margin:30px;
        flex-wrap: wrap-reverse;

        p{
            width: 320px;
            height: 320px;
            min-width: 320px;
            min-height: 320px;
            font-size: large;
            margin:50px;
            color:black;
            padding:3%;
        }

        #postItSituationOrange{
            background-color:#DD3C34;
        }
    }
}

.boutonMaraude{
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    margin-top:-22px;
    .voirMaraude{
        background-color:#165888;
        border: none;
        color: white;
        cursor: pointer;
        display: inline-block;
        font-family: 'BenchNine', Arial, sans-serif;
        font-size: 1em;
        font-size: 22px;
        line-height: 1em;
        outline: none;
        padding: 12px 40px 10px;
        position: relative;
        text-transform: uppercase;
        font-weight: 700;
        text-decoration: none;
        margin:auto;
    }
    
    .voirMaraude:before,
    .voirMaraude:after {
      border-color: transparent;
      -webkit-transition: all 0.25s;
      transition: all 0.25s;
      border-style: solid;
      border-width: 0;
      content: "";
      height: 24px;
      position: absolute;
      width: 24px;
    }
    
    .voirMaraude:before {
      border-color: white;
      border-left-width: 3px;
      border-top-width: 3px;
      left: -5px;
      top: -5px;
    }
    
    .voirMaraude:after {
      border-bottom-width: 3px;
      border-color: rgb(48, 47, 47);
      border-right-width: 3px;
      bottom: -5px;
      right: -5px;
    }
    
    .voirMaraude:hover,
    .voirMaraude.hover {
      background-color: #DD3C34;
      color: white;
      text-decoration: none;
    }
    
    .voirMaraude:hover:before,
    .voirMaraude.hover:before,
    .voirMaraude:hover:after,
    .voirMaraude.hover:after {
      height: 100%;
      width: 100%;
    }
}


#actions{
    padding: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    p{
        max-width: 900px;
        font-size: larger;
    }

    table{
        max-width: 800px;
        margin: 30px;
    }

    #enCooperation{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
}

#presentation{
    padding:55px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    #personneImpair{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;

        #infoPersonne{
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #pdp{
            border-radius: 50%;
        }

        p{
            max-width: 900px;
            min-width: 400px;
            margin: 25px;
            font-size: larger;
        }
    }

    #personnePair{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap-reverse;

        #infoPersonne{
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #pdp{
            border-radius: 50%;
        }

        p{
            max-width: 900px;
            min-width: 400px;
            margin: 25px;
            font-size: larger;
        }
    }
}

#nousSoutenir{
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    p{
        text-align: center;
        font-size: larger;
        padding: 30px;
    }

    .btn-soutenir{
        width:190px;
        height: 50px;
        font-size: 1.3em;
    }
}

#accueilMaraude{
    min-height: 100vh;
    background: url("images/imageFondMaraude.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    padding-top:40px;

    h1{
        background-color: #165888;
        padding: 10px 20px 10px 20px;
        color: #DD3C34;
        border:2px solid white;
        border-radius: 30px;
    }
}

#contenuMaraude{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: rgb(48, 47, 47);
    color:white;
    padding-top:40px;

    h1{
        margin:30px;
    }

    p{
        max-width: 900px;
        margin:40px;
    }

    #imgTextMaraude{
        display:flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;

        p{
            max-width: 500px;
            min-width: 380px;
            margin:35px;
        }

        img{
            border: 1px solid white;
            border-radius: 10px;
        }

        #imgTextMaraudeImgs{
            display:flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            img{
                margin:15px;
            }
        }
    }

    #ressentiMaraude{
        display:flex;
        flex-direction: column;
        align-items: center;
        p{
            max-width:600px;
        }

        a{
            color:white;
            text-decoration: underline;
        }

        a:hover{
            color:#DD3C34;
        }
    }
}

footer{
    background-color: rgb(52,58,64);
    color:white;
    padding-top:55px;
    padding-bottom:55px;
    display:flex;
    justify-content: space-around;
    align-items: top;
    flex-wrap: wrap;
    text-align: center;

    .list-group-item-dark{
        background-color:rgb(52,58,64);
        color:white;
        width:250px;
    }

    #iconeReseaux{
        .icone{
            margin:15px;
        }
        a:hover{
            .icone{
                opacity:0.6;
            }
        }
    }

    a{
        text-decoration:none;
        color:white;
        
        &:hover{
            color:orange;
            opacity: 0.8;
        }
    }
}

@media screen and (max-width: 1290px) {
    #actions{
        h2{
            font-size: 1.6em;
        }
    }
}

@media screen and (max-width: 1277px) {
    #presentation{
        text-align: center;
    }
}

@media screen and (max-width: 1100px) {
    #actions{
        h2{
            font-size: 1.4em;
        }
    }
}

@media screen and (max-width: 1000px) {
    #accueil{
        padding-top:40px;

        h1{
            font-size: 2em;
        }
    }

    #actions{
        h2{
            font-size: 1.2em;
        }
    }
}

@media screen and (max-width: 900px) {
    #actions{
        p{
            font-size: 1em;
        }
        
        h2{
            text-align: center;
            margin-top: 10px;
        }
    }
}

@media screen and (max-width: 800px) {
    footer{
        flex-direction: column;

        #realisationProjet{
            margin:25px;

            .list-group-item-dark{
                background-color:rgb(52,58,64);
                color:white;
                width:250px;
                margin:auto;
            }
        }

        #reseauxSociaux{
            margin:25px;
        }

        #realisationSite{
            margin:25px;
        }
    }

    #nousSoutenir{
        p{
            font-size: large;
        }
    }
}

@media screen and (max-width: 650px) {
    #accueil{
        text-align: center;
        h1{
            font-size: 1.6em;
        }
    }

    #nousSoutenir{
        p{
            font-size: medium;
            width:110%;
        }
    }
}


@media screen and (max-width: 500px) {
    #accueil{
        h1{
            font-size: 1.4em;
        }
    }
}