* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html {
    --s: 100px;
    /* control the size */
    --c1: #C3CCAF;
    --c2: #67434F;

    --_s: calc(2*var(--s)) calc(2*var(--s));
    --_g: var(--_s) conic-gradient(at 40% 40%, #0000 75%, var(--c1) 0);
    --_p: var(--_s) conic-gradient(at 20% 20%, #0000 75%, var(--c2) 0);
    background:
        calc(.9*var(--s)) calc(.9*var(--s))/var(--_p),
        calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
        calc(.7*var(--s)) calc(.7*var(--s))/var(--_g),
        calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
        conic-gradient(from 90deg at 20% 20%, var(--c2) 25%, var(--c1) 0) 0 0/var(--s) var(--s);
    animation: m 3s infinite;
}

@keyframes m {
    0% {
        background-position:
            calc(.9*var(--s)) calc(.9*var(--s)),
            calc(-.1*var(--s)) calc(-.1*var(--s)),
            calc(.7*var(--s)) calc(.7*var(--s)),
            calc(-.3*var(--s)) calc(-.3*var(--s)), 0 0
    }

    html {
        --s: 100px;
        /* control the size */
        --c1: #C3CCAF;
        --c2: #67434F;

        --_s: calc(2*var(--s)) calc(2*var(--s));
        --_g: var(--_s) conic-gradient(at 40% 40%, #0000 75%, var(--c1) 0);
        --_p: var(--_s) conic-gradient(at 20% 20%, #0000 75%, var(--c2) 0);
        background:
            calc(.9*var(--s)) calc(.9*var(--s))/var(--_p),
            calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
            calc(.7*var(--s)) calc(.7*var(--s))/var(--_g),
            calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
            conic-gradient(from 90deg at 20% 20%, var(--c2) 25%, var(--c1) 0) 0 0/var(--s) var(--s);
        animation: m 3s infinite;
    }

    @keyframes m {
        0% {
            background-position:
                calc(.9*var(--s)) calc(.9*var(--s)),
                calc(-.1*var(--s)) calc(-.1*var(--s)),
                calc(.7*var(--s)) calc(.7*var(--s)),
                calc(-.3*var(--s)) calc(-.3*var(--s)), 0 0
        }

        25% {
            background-position:
                calc(1.9*var(--s)) calc(.9*var(--s)),
                calc(-1.1*var(--s)) calc(-.1*var(--s)),
                calc(1.7*var(--s)) calc(.7*var(--s)),
                calc(-1.3*var(--s)) calc(-.3*var(--s)), 0 0
        }

        50% {
            background-position:
                calc(1.9*var(--s)) calc(-.1*var(--s)),
                calc(-1.1*var(--s)) calc(.9*var(--s)),
                calc(1.7*var(--s)) calc(-.3*var(--s)),
                calc(-1.3*var(--s)) calc(.7*var(--s)), 0 0
        }

        75% {
            background-position:
                calc(2.9*var(--s)) calc(-.1*var(--s)),
                calc(-2.1*var(--s)) calc(.9*var(--s)),
                calc(2.7*var(--s)) calc(-.3*var(--s)),
                calc(-2.3*var(--s)) calc(.7*var(--s)), 0 0
        }

        100% {
            background-position:
                calc(2.9*var(--s)) calc(-1.1*var(--s)),
                calc(-2.1*var(--s)) calc(1.9*var(--s)),
                calc(2.7*var(--s)) calc(-1.3*var(--s)),
                calc(-2.3*var(--s)) calc(1.7*var(--s)), 0 0
        }
    }

    25% {
        background-position:
            calc(1.9*var(--s)) calc(.9*var(--s)),
            calc(-1.1*var(--s)) calc(-.1*var(--s)),
            calc(1.7*var(--s)) calc(.7*var(--s)),
            calc(-1.3*var(--s)) calc(-.3*var(--s)), 0 0
    }

    50% {
        background-position:
            calc(1.9*var(--s)) calc(-.1*var(--s)),
            calc(-1.1*var(--s)) calc(.9*var(--s)),
            calc(1.7*var(--s)) calc(-.3*var(--s)),
            calc(-1.3*var(--s)) calc(.7*var(--s)), 0 0
    }

    75% {
        background-position:
            calc(2.9*var(--s)) calc(-.1*var(--s)),
            calc(-2.1*var(--s)) calc(.9*var(--s)),
            calc(2.7*var(--s)) calc(-.3*var(--s)),
            calc(-2.3*var(--s)) calc(.7*var(--s)), 0 0
    }

    100% {
        background-position:
            calc(2.9*var(--s)) calc(-1.1*var(--s)),
            calc(-2.1*var(--s)) calc(1.9*var(--s)),
            calc(2.7*var(--s)) calc(-1.3*var(--s)),
            calc(-2.3*var(--s)) calc(1.7*var(--s)), 0 0
    }
}

.container {
    width: 100%;
    height: 100vh;
    background-image: url(/Portfolio/bg3.png);
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carte {
    width: 90%;
    max-width: 440px;
    color: aliceblue;
    text-align: center;
    padding: 50px 35px;
    border: 1px solid rgb(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;

    html {
        --s: 100px;
        /* control the size */
        --c1: #C3CCAF;
        --c2: #67434F;

        --_s: calc(2*var(--s)) calc(2*var(--s));
        --_g: var(--_s) conic-gradient(at 40% 40%, #0000 75%, var(--c1) 0);
        --_p: var(--_s) conic-gradient(at 20% 20%, #0000 75%, var(--c2) 0);
        background:
            calc(.9*var(--s)) calc(.9*var(--s))/var(--_p),
            calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
            calc(.7*var(--s)) calc(.7*var(--s))/var(--_g),
            calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
            conic-gradient(from 90deg at 20% 20%, var(--c2) 25%, var(--c1) 0) 0 0/var(--s) var(--s);
        animation: m 3s infinite;
    }

    @keyframes m {
        0% {
            background-position:
                calc(.9*var(--s)) calc(.9*var(--s)),
                calc(-.1*var(--s)) calc(-.1*var(--s)),
                calc(.7*var(--s)) calc(.7*var(--s)),
                calc(-.3*var(--s)) calc(-.3*var(--s)), 0 0
        }

        25% {

            background-position: calc(1.9*var(--s)) calc(.9*var(--s)),
            calc(-1.1*var(--s)) calc(-.1*var(--s)),
            html {
                --s: 100px;
                /* control the size */
                --c1: #C3CCAF;
                --c2: #67434F;

                --_s: calc(2*var(--s)) calc(2*var(--s));
                --_g: var(--_s) conic-gradient(at 40% 40%, #0000 75%, var(--c1) 0);
                --_p: var(--_s) conic-gradient(at 20% 20%, #0000 75%, var(--c2) 0);
                background:
                    calc(.9*var(--s)) calc(.9*var(--s))/var(--_p),
                    calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
                    calc(.7*var(--s)) calc(.7*var(--s))/var(--_g),
                    calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
                    conic-gradient(from 90deg at 20% 20%, var(--c2) 25%, var(--c1) 0) 0 0/var(--s) var(--s);
                animation: m 3s infinite;
            }

            @keyframes m {
                0% {
                    background-position:
                        calc(.9*var(--s)) calc(.9*var(--s)),
                        calc(-.1*var(--s)) calc(-.1*var(--s)),
                        calc(.7*var(--s)) calc(.7*var(--s)),
                        calc(-.3*var(--s)) calc(-.3*var(--s)), 0 0
                }

                25% {
                    background-position:
                        calc(1.9*var(--s)) calc(.9*var(--s)),
                        calc(-1.1*var(--s)) calc(-.1*var(--s)),
                        calc(1.7*var(--s)) calc(.7*var(--s)),
                        calc(-1.3*var(--s)) calc(-.3*var(--s)), 0 0
                }

                50% {
                    background-position:
                        calc(1.9*var(--s)) calc(-.1*var(--s)),
                        calc(-1.1*var(--s)) calc(.9*var(--s)),
                        calc(1.7*var(--s)) calc(-.3*var(--s)),
                        calc(-1.3*var(--s)) calc(.7*var(--s)), 0 0
                }

                75% {
                    background-position:
                        calc(2.9*var(--s)) calc(-.1*var(--s)),
                        calc(-2.1*var(--s)) calc(.9*var(--s)),
                        calc(2.7*var(--s)) calc(-.3*var(--s)),
                        calc(-2.3*var(--s)) calc(.7*var(--s)), 0 0
                }

                100% {
                    background-position:
                        calc(2.9*var(--s)) calc(-1.1*var(--s)),
                        calc(-2.1*var(--s)) calc(1.9*var(--s)),
                        calc(2.7*var(--s)) calc(-1.3*var(--s)),
                        calc(-2.3*var(--s)) calc(1.7*var(--s)), 0 0
                }
            }

            calc(1.7*var(--s)) calc(.7*var(--s)),
            calc(-1.3*var(--s)) calc(-.3*var(--s)),
            0 0
        }

        50% {
            background-position:
                calc(1.9*var(--s)) calc(-.1*var(--s)),
                calc(-1.1*var(--s)) calc(.9*var(--s)),
                calc(1.7*var(--s)) calc(-.3*var(--s)),
                calc(-1.3*var(--s)) calc(.7*var(--s)), 0 0
        }

        75% {
            background-position:
                calc(2.9*var(--s)) calc(-.1*var(--s)),
                calc(-2.1*var(--s)) calc(.9*var(--s)),
                calc(2.7*var(--s)) calc(-.3*var(--s)),
                calc(-2.3*var(--s)) calc(.7*var(--s)), 0 0
        }

        100% {
            background-position:
                calc(2.9*var(--s)) calc(-1.1*var(--s)),
                calc(-2.1*var(--s)) calc(1.9*var(--s)),
                calc(2.7*var(--s)) calc(-1.3*var(--s)),
                calc(-2.3*var(--s)) calc(1.7*var(--s)), 0 0
        }
    }

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);

}

.carte img {
    width: 140px;
    border-radius: 50%;
}

.carte h2 {
    font-size: 40px;

    font-weightml {
        --s: 100px;
        /* control the size */
        --c1: #C3CCAF;
        --c2: #67434F;

        --_s: calc(2*var(--s)) calc(2*var(--s));
        --_g: var(--_s) conic-gradient(at 40% 40%, #0000 75%, var(--c1) 0);
        --_p: var(--_s) conic-gradient(at 20% 20%, #0000 75%, var(--c2) 0);
        background:
            calc(.9*var(--s)) calc(.9*var(--s))/var(--_p),
            calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
            calc(.7*var(--s)) calc(.7*var(--s))/var(--_g),
            calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
            conic-gradient(from 90deg at 20% 20%, var(--c2) 25%, var(--c1) 0) 0 0/var(--s) var(--s);
        animation: m 3s infinite;
    }

    @keyframes m {
        0% {
            background-position:
                calc(.9*var(--s)) calc(.9*var(--s)),
                calc(-.1*var(--s)) calc(-.1*var(--s)),
                calc(.7*var(--s)) calc(.7*var(--s)),
                calc(-.3*var(--s)) calc(-.3*var(--s)), 0 0
        }

        25% {
            background-position:
                calc(1.9*var(--s)) calc(.9*var(--s)),
                calc(-1.1*var(--s)) calc(-.1*var(--s)),
                calc(1.7*var(--s)) calc(.7*var(--s)),
                calc(-1.3*var(--s)) calc(-.3*var(--s)), 0 0
        }

        50% {
            background-position:
                calc(1.9*var(--s)) calc(-.1*var(--s)),
                calc(-1.1*var(--s)) calc(.9*var(--s)),
                calc(1.7*var(--s)) calc(-.3*var(--s)),
                calc(-1.3*var(--s)) calc(.7*var(--s)), 0 0
        }

        75% {
            background-position:
                calc(2.9*var(--s)) calc(-.1*var(--s)),
                calc(-2.1*var(--s)) calc(.9*var(--s)),
                calc(2.7*var(--s)) calc(-.3*var(--s)),
                calc(-2.3*var(--s)) calc(.7*var(--s)), 0 0
        }

        100% {
            background-position:
                calc(2.9*var(--s)) calc(-1.1*var(--s)),
                calc(-2.1*var(--s)) calc(1.9*var(--s)),
                calc(2.7*var(--s)) calc(-1.3*var(--s)),
                calc(-2.3*var(--s)) calc(1.7*var(--s)), 0 0
        }
    }

    ht: 600;
    margin-top: 20px;
}

.carte p {
    font-size: 18px;
    margin: 10px auto;
    max-width: 330px;
}

.carte .reseau img {
    width: 40px;
    border-radius: 50%;
    margin: 10px 5px;
    transition: background 0.5s;
}

.carte .reseau img:hover {
    background: violet;
}

.bouton {
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    background: #fff;
    color: rgb(209, 63, 184);
    padding: 10px 30px;
    border-radius: 30px;
    margin: 30px 0 10px;
}

.center-body {
    display: flex;
    justify-content: center;
    align-items: center;
    /****** center box
	width: 300px;
	height: 300px;
	border: solid 1px #aaa;
	******/
}

.loader-circle-11 {
    position: relative;
    width: 70px;
    height: 70px;
    transform-style: preserve-3d;
    perspective: 400px;
}

.loader-circle-11 .arc {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-bottom: 5px solid #f00;
}

.loader-circle-11 .arc:nth-child(1) {
    animation: rotate1 1.15s linear infinite;
}

.loader-circle-11 .arc:nth-child(2) {
    animation: rotate2 1.15s linear infinite;
}

.loader-circle-11 .arc:nth-child(3) {
    animation: rotate3 1.15s linear infinite;
}

.loading .arc:nth-child(1) {
    animation-delay: -0.8s;
}

.loader-circle-11 .arc:nth-child(2) {
    animation-delay: -0.4s;
}

.loader-circle-11 .arc:nth-child(3) {
    animation-delay: 0s;
}

@keyframes rotate1 {
    from {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
    }

    to {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
    }
}

@keyframes rotate2 {
    from {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
    }

    to {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
    }
}

@keyframes rotate3 {
    from {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
    }

    to {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
    }
}