/* Configuration générale du style  */


html {
    scroll-behavior: smooth;
}


main {
    background-image: url(./media/feuille\ de\ lierre.jpg);
}


h2, h3, h4, .nav-item, #transition, footer {
    text-align: center;
} 


h3 {
    color: green;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bolder;
}


p{
    font-style: oblique;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bolder;
}


.container {
    margin-bottom: 40px;
    padding-top: 50px;
    
}


a {
    color: inherit;
    text-decoration: none;
}


/* *********************************************  HEADER  ************************************ */

.collapse {
    margin-left: 4%;
}


.nav-item {
    color: darkslategrey;
    font-weight: bold;
    padding-right: 45px;
}


header {
    background: url(./media/garden.jpg) no-repeat 50% 50%;
    background-size: cover;
    height: 100vh;
    border-radius: 0px 0px 20px 20px;
    /*margin-bottom: 40px;*/
}

h1 {
    text-align: left;
    font-size: 4em;
    padding: 200px 0 0 20%;
    text-shadow: -3px 3px 2px #BCF5A9;
    animation: title ease 5s;
}


.navbar {
    width: auto;
    justify-content: center;
}


@keyframes title {
    0% {
        opacity: 0;
        transform: translateY(230px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}


/******************************************  LEFT PART  ******************************************* */

#leftPart {
    border-radius: 20px;
    padding: 25px;
}


.elements {
    padding: 70px 0;
}


.elements img {
    border-radius: 50%;
    width: 200px;
}


.elements p {
    font-size: 1.2em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    padding-right: 20px;
}


.elements .button {
    text-align: right;
    margin: 15px 4% 0 0;
    
}


.elements a {
    text-decoration: none;
}


/* ***********************************************  RIGHT PART  ************************************** */

#rightPart {
    /*background-color: #9B6833;*/
    border-radius: 20px;
    padding: 20px;
    /*background-image: url(./media/cultiver.jpg);*/
}


.tips {
    height: 200px;
    width: 200px;
    margin: 20px auto;
}


.tips h4 {
    position: relative;
    color: green;
    top: 50%;
    transform: translateY(-50%);
    text-shadow: 1px 1px 0 #BCF5A9;
}
.tips:hover {
    transform: scale(1.50);
    opacity: 0.8;
    transition: ease-out 0.2s;
}


#transition {
    padding: 50px 0;
    /*background-image: url(./media/terre.jpg);*/
}

#transition img {
    animation: rateau ease 12s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    animation-fill-mode: forwards;
}

@keyframes rateau {
    0% {
        transform: translate(0px, 0px) ;
    }
    9% {
        transform: translate(79px, -22px);
    }
    26% {
        transform: translate(-4px, -5px) ;
    }
    33% {
        transform: translate(80px, 18px);
    }
    48% {
        transform: translate(-17px, -13px) ;
    }
    56% {
        transform: translate(57px, -45px);
    }
    71% {
        transform: translate(-11px, -12px) ;
    }
    82% {
        transform: translate(72px, 7px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}


/* **********************************************  NEWSLETTER  ************************************ */

#newsletter {
    background: url(./media/newsletter.jpeg) no-repeat 50% 50%;
    background-size: cover;
    height: 370px;
    width: 70%;
    min-width: 450px;
    margin: 0 auto;
    border-radius: 50%;
    margin-bottom: 70px;
}


#newsletter h4 {
    margin-top: 15px;
    padding: 100px 0 20px 0;
    font-size: 23px;
    text-shadow: -3px 3px 2px #BCF5A9;
}


#newsletter .input-group {
    width: 40%;
    min-width: 350px;
    margin: 0 auto;
}


/* ****************************************  FOOTER  *********************************************** */

footer {
    background-color: #BCF5A9;
    padding: 15px 0 4px 0;
}


/* ***************************************  MEDIA QUERIES  ***************************************** */

@media screen and (max-width: 576px) {
    .navbar-expand-sm {
        flex-wrap: nowrap;
        /*justify-content: center;*/
    }
    .elements {
        padding: 15px 0;
        text-align: center;
    }
    .elements img {
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 790px) {
    h1 {
        font-size: 3em;
    }
    .elements {
        padding: 30px 0;
    }
    .elements img {
        max-width: 140px;
        margin-top: 40px;
    }
    #transition img {
        width: 250px;
    }
    .tips {
        height: 90px;
        width: 90px;
    }
    .tips h4 {
        font-size: 0.9em;
    }
}

@media screen and (max-width: 990px) {
    #rightPart {
        display: flex;
    }
    #rightPart h2 {
        display: none;
    }
    .tips {
        height: 130px;
        width: 130px;
    }
}