:root {
    --body-margin: 2rem;
    --color: #000000;
}

body {
    margin: var(--body-margin) !important;
    font-family: "Peignot", sans-serif;
    background-color: #ffffff;
    color: var(--color);
    line-height: 1;
    font-size: 2rem;
}

a,
li {
    transition: all 0.3s ease-in-out;
}

a:hover,
ul.expertise li:hover {
    box-shadow: rgba(245, 223, 77, 0.3) 0px 0px 65px 35px;
    background-color: rgba(255, 255, 255, 0.1);
}

nav.logotype {
    position: sticky;
    top: var(--body-margin);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    z-index: 10;

}

nav.logotype svg {
    width: 2vw;
    height: auto;
    max-width: 100%;
    fill: var(--color);
    margin-bottom: 4rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color);
    margin: 0;
    padding: 0;
}


h2 {
    text-decoration: underline;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

ul.expertise li.animated {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s cubic-bezier(0.66, 0, 0.157, 1.274) forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


h1.introduction {
    font-size: 2rem;
    margin: auto;
    width: clamp(100%, 50%, 90%);
}

ul.expertise {
    list-style: none;
    padding: 0;
    margin: .2rem auto;
    width: clamp(100%, 50%, 90%);
    display: flex;
    text-transform: uppercase;
    gap: .4rem;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 1.5rem;
}


ul.expertise li {
    border: 1px solid var(--color);
    opacity: 0;
    padding: .5rem .8rem .2rem .8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #ffffff;
}

section.contacts {
    margin: auto;
    width: clamp(50%, 89%, 100%);
    text-align: center;
    text-transform: uppercase;
    margin: 5rem auto
}


.contacts {
    opacity: 0;
    transform: translateY(20px);
}

.contacts.animated {
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: translate(0);
    }
}

section.contacts address {

    margin: 1rem 0 .5rem 0;
    padding: 0;
}

section.contacts a {
    border: 1px solid var(--color);
    padding: .5rem .8rem .2rem .8rem;
    text-decoration: none;
    color: var(--color);
    margin: 2rem;


}






.scroller {
    max-width: 100%;

}

.scroller:last-of-type {
    padding: 0 0 2rem 0;
}

.scroller_inner {
    padding-block: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

ul.clients li {
    border: 1px solid var(--color);
    padding: .5rem .8rem .2rem .8rem;
    text-transform: uppercase;
}


section.clients {
    opacity: 0;
}

.clients.animated {
    animation: fadeIn 0.5s forwards;
}


.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg,
            transparent,
            white 20%,
            white 80%,
            transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller_inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
    transition: transform 0.3s linear;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 150s;
}

.scroller:hover .scroller_inner {
    animation-play-state: paused;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}


@media (width <=780px) {


    nav.logotype svg {
        width: 15vw;
    }

    html,
    body {
        height: 100%;
        margin: 0 !important;
        /* scroll-snap-type: y mandatory; */
        overflow-y: scroll;
    }

    body {
        display: flex;
        height: auto;
        flex-direction: column;
        justify-content: space-around;

    }

    div.introduction,
    section.contacts,
    section.clients {
        margin: var(--body-margin) !important;
    }

    div.introduction {
        padding-block: 4rem;
        /* height: 100dvh; */
        scroll-snap-align: center;
        order: 1;

        ul.expertise {
            font-size: 2rem;
            position: sticky;
            top: var(--body-margin);
            flex-direction: column;
            font-size: 1.5rem;
            justify-content: space-around;
            flex-wrap: wrap;
        }
    }

    section.clients {
        order: 3;
        scroll-snap-align: center;
        height: auto;
        padding-block: 4rem;
    }

    section.contacts {
        order: 2;
        scroll-snap-align: center;
        height: auto;
        padding-block: 4rem;
        /* position: fixed; */

        address {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: center;
            justify-content: center;
            margin: 1rem;
        }

        a {
            margin: 0rem;
        }
    }
}