@font-face {
    font-family: 'bebas';
    src: url(../font/Bebas-Regular.ttf);
}

body {
    font-family: 'bebas';
    margin: auto 0;
    cursor: url(../images/jaune.png), auto;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border-style: solid;
    margin: none;
    height: 94px;
    padding-left: 10px;

}

#nav-list {
    display: flex;
    list-style: none;
    padding-right: 15px;
    gap: 3rem;
    transition: transform 1s;
}





a {
    text-decoration: none;
    color: black;
    transition: transform 1s;
}

#logo {
    font-size: 72pt;
}

#haut {
    display: flex;

}

#expo {
    border-style: solid;
    width: 1401px;

}

#bateau {
    border-style: solid;
    background-color: #649696;
    
}

h1 {
    font-size: 100pt;
}

h2 {
    font-size: 70pt;
    text-align: end;
    padding-right: 362px;
    padding-bottom: -138px;
    margin-top: -145px;
    margin-bottom: -23px;
    color: #f56b64;
}

#milieu {

    display: flex;

}

#decouvrir {
    width: 905px;
    display: flex;
    background-color: #fef974;
    border-style: solid;
    align-items: center;
    justify-content: space-evenly;
}

#fleur {
    width: 1016px;
    border-style: solid;
    transition: transform 1s;
    background-color: #037789;
}

#fleche {
    width: 179px;
    height: 70PX;
    margin-right: -175px;
}

#vendredi {
    margin-left: -429px;
}

#bas {
    display: flex;
    height: 214px;
    font-size: 110px;
}

#opening1 {
    width: 50%;
    border-style: solid;
    text-align: center;
    align-content: center;
    background-color: #f56b64;

}

#opening2 {
    border-style: solid;
    width: 50%;
    text-align: center;
    align-content: center;

}

#life {
    text-align: center;
    font-size: 259px;
}

#tresbas {
    display: flex;
}

#para {
    border-style:
        solid;
    width: 254px;
    height: 822px;
    font-size: 31px;
    text-align: center;
    margin-left: 49px;
    transition: transform 1s;
}

#portrait {
    margin-left: 50px;
    transition: transform 1s;
}

#visage {
    transition: transform 1s;
}

#soir {
    margin-bottom: 275px;
    margin-left: 38px;
    transition: transform 1s;

}

#infos {
    text-align: center;
    margin-left: 922px;
    font-size: 328px;
    width: 646px;
    margin-top: -485px;
}

#price {
    width: 1167px;
  height: 171px;
  margin-left: 360PX;
  margin-top: -30px;
  font-size: 31px;
  border:
10px solid #070707;
}

#buy {
    background-color: #fef974;
    color: black;
    border:
  2px solid #f56b64;
    font-family: 'bebas';
    height: 100px;
    width: 277px;
    font-size: 53px;
    margin-left: 795px;
    z-index: 4;
    margin-top: -136px;
    position: absolute;
    cursor: pointer;
    transition: transform 1s;

}
    #euro{
        margin-left: 10px;
    }
    #supreme{
        display: flex;
        justify-content: space-between;
        margin-left: 371px;
        margin-top: 72px;
        margin-right: 385px;
        height: 45px;
    }
    footer{  display: flex;
        justify-content: space-between;
        align-items: center;
        overflow:
      hidden;
        border-style:
      solid;
        margin: none;
        height: 77px;
        padding-left: 840px;
        margin-top: 20px;
        text-align: center;}
        #bateau{ max-width: 100%;
         max-height: 100%;
         transition: transform 1s;}
         
         #para:hover{-ms-transform: scale(3) translate(30px); /* IE 9 */
            -webkit-transform: scale(1.2) translate(10px); /* Safari 3-8 */
            transform: scale(1.2) translate(10px);
          
          }
          #fleur:hover{-ms-transform: scale(3) translate(30px); /* IE 9 */
            -webkit-transform: scale(1.2) translate(10px); /* Safari 3-8 */
            transform: scale(1.2) translate(10px);
          
          }
          #bateau:hover{-ms-transform: scale(3) translate(30px); /* IE 9 */
            -webkit-transform: scale(1.2) translate(10px); /* Safari 3-8 */
            transform: scale(1.2) translate(10px);
          
          }
          #visage:hover{-ms-transform: scale(3) translate(30px); /* IE 9 */
            -webkit-transform: scale(1.4) translate(10px); /* Safari 3-8 */
            transform: scale(1.4) translate(10px);
          
          }
          #soir:hover{-ms-transform: scale(3) translate(30px); /* IE 9 */
            -webkit-transform: scale(1.2) translate(10px); /* Safari 3-8 */
            transform: scale(1.2) translate(10px);
          
          }
          #buy:hover{-ms-transform: scale(3) translate(30px); /* IE 9 */
            -webkit-transform: scale(1.2) translate(10px); /* Safari 3-8 */
            transform: scale(1.2) translate(10px);
            background-color: #f56b64;
          
          }
          a:hover{
            color: #f56b64;
            -ms-transform: scale(2) translate(30px); /* IE 9 */
            -webkit-transform: scale(1.1) translate(10px); /* Safari 3-8 */
            transform: scale(1.1) translate(10px);
          }