body {
    position: relative;
    margin: auto;
    overflow-x: hidden;
}






/* BUTTON */
.btn {
    display: inline-block;
    padding: 0.8em 2em;
    border-radius: 10px;
    margin: 0.5em;
}

.round-img {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50px;
}

.vignette-img {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 100%;
    max-width: 35em;
    height: 25em;
    object-fit: cover;
}



svg.arrow {
    width: 3em;
    height: 3em;
}

svg.arrow:hover {
    --svg-fill: var(--color-tertiary);
    --svg-path: var(--color-tertiary-inv);
}


.title1 {
    font-size: 4em;
}

.title2 {
    font-size: 3em;
}

.title3 {
    font-size: 2em;
}



/* FLEX PLACEMENT */
.grow {
    flex-grow: 1;
}

.wrap {
    flex-wrap: wrap;
}

.left {
    justify-content: left;
    display: flex;
}

.right {
    justify-content: flex-end;
    display: flex;
}

.vignette {
    padding: var(--padding);
    background-color: white;
    float: right;
    min-width: 325px;
}

.price {
    color: #C39000
}

.presentation {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.presentation img {
    max-width: 40%;
    min-width: 300px;
}

.presentation .vignette {
    max-width: 60%;
    padding: unset;
    border-radius: unset;
    outline: var(--padding) solid white;
}

.image-pos {
    background: url("../assets/imagepos.png");
    height: 40em;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.image-pos .vignette {
    max-width: 325px;
    width: 100%;
    min-width: unset;
    margin-right:15%;
}
.menu .left a {
    margin: 0 0.5em;
}

@media only screen and (max-width: 650px) {

    .presentation {
        flex-wrap: wrap;

    }

    .presentation .vignette {
        max-width: unset;
        width: 100%;
    }


    #signin {
        position:fixed;
        top:4px;
        right:1rem;
        border: 1px solid black;
    }

    #signinv2 {
        position:fixed;
        top: calc( 2rem + 8px );
        right:1rem;
        border: 1px solid black;
    }


}

@media only screen and (max-width: 500px) {

    .photo>img {
        max-height: 350px;
    }
}




/* Styling the container */
.scrolling-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4em;
}

.scroll-left {
    justify-content: flex-start;
    animation: scroll-left 10s linear infinite; 
}
.scroll-right {
    justify-content: flex-end;
    animation: scroll-right 10s linear infinite; 
}
/* Styling for the images */
.scrolling-container img {
    width: 8em;
    height: 6em;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* Keyframes animation for horizontal scrolling */
@keyframes scroll-left {
    0% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(-150%);
        /* Adjust this value to control the scrolling speed */
    }
}
/* Keyframes animation for horizontal scrolling */
@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(150%);
        /* Adjust this value to control the scrolling speed */
    }
}