@font-face {
    font-family: 'summer-title';
    src: url('./simplest.otf');
}

* {
    margin:0;
    padding:0;
    box-sizing: border-box;

    /*colors*/

    --summer-green : #279153;
    --autumn-yellow : #eeb325;
    --tree-brown : #88624a;
}

/*container*/

.banner {
    position : relative;
    aspect-ratio: 1279/262;

    /*margin : 15px; visibility dev - to comment*/

    border : var(--tree-brown) solid 4px;
    border-radius : 15px;
    overflow: hidden;
}

#title {
    position : absolute;
    top : -40%;

    width :100%;
    text-align: center;
    
    font-family: 'summer-title', sans-serif;
    color : var(--tree-brown);
    font-size: 40px;

    transition : top 3s ease;

    z-index: 6;
}

#logo {
    position : absolute;
    top : 7%;
    width : 100%;
    opacity : 0;

    height: 75%;
    

    background-image: url('../assets/logoE2Ctrans.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;

    transition : opacity 4000ms;

}


/*ground*/

.ground {
    position : absolute;
    bottom: 0;

    overflow: hidden;

    width : 100%;
    height : 15%;

    z-index: 8;
}

.ground-color {
    position : relative;
    bottom : 200%;
    width : 100%;
    height : 300%;
    background:linear-gradient(to top, var(--summer-green), var(--summer-green) 33%, var(--autumn-yellow) 66%, var(--autumn-yellow));

    transition: bottom ease 4000ms;
    
}

#tree-leaf {
    position : absolute;
    top : 5%;
    right: 3%;
}

#trunc {
    position : absolute;
    bottom : 5%;
    right: 6.5%;

    z-index: -5;
}

#grass {
    position : absolute;
    bottom : 11%;
    left: 6.5%;
}

/*chute de feuilles */

.falling-leaf {
    position: absolute;
    

    z-index :5;
    transition: top 50ms;
}

/*dégradé*/

#stop1 {
    stop-color:var(--autumn-yellow);
    stroke-opacity: 1;
}

#stop2 {
    stop-color:var(--autumn-yellow);
    stroke-opacity: 1;
}

#stop3 {
    stop-color:var(--summer-green);
    stroke-opacity: 1;
}

#stop4 {
    stop-color:var(--summer-green);
    stroke-opacity: 1;
}