styles_A.css

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

body {
    background: #000000;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-to-home {
    text-decoration: none;
    background-color: #3498db;
    color: #fff;
    padding: 8px 12px;
    margin-top: -500px;
    margin-left: 10px;
    display: inline-block;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.back-to-home:hover {
    background-color: #27ae60;
}


.container {
    padding: 20px;
    margin: auto;
    perspective: 700px;
}

.sphere1,
.sphere2,
.sphere3 {
    position: relative;
    transform-style: preserve-3d;
}

.sphere1 {
    width: 300px;
    height: 300px;
    animation: rotate 10s infinite linear;
}

.sphere2 {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 70px;
    left: 70px;
    animation: rotate 13s infinite linear;
}

.sphere3 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 125px;
    left: 120px;
    animation: rotate 7s infinite linear;
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    
    100% {
        transform: rotateY(360deg) rotateX(360deg);
    }
}

.sphere1 > .circle {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    border: 1px solid #ff0000;
    filter: brightness(100%);
    transition: filter 0.5s ease;
}

.sphere2 > .circle {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    border: 1px solid #ff0000;
    filter: brightness(100%);
    transition: filter 0.5s ease;
}

.sphere3 > .circle {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    border: 1px solid #ff0000;
    filter: brightness(100%);
    transition: filter 0.5s ease;
}


@keyframes changeBrightness1 {
    0% {
        filter: brightness(100%);
    }

    50% {
        filter: brightness(80%);
    }

    100% {
        filter: brightness(60%);
    }
}

@keyframes changeBrightness2 {
    0% {
        filter: brightness(100%);
    }

    50% {
        filter: brightness(70%);
    }

    100% {
        filter: brightness(50%);
    }
}

@keyframes changeBrightness3 {
    0% {
        filter: brightness(100%);
    }

    50% {
        filter: brightness(90%);
    }

    100% {
        filter: brightness(70%);
    }
}

.sphere1 > .circle {
    /* ... (vos autres styles) ... */
    animation: changeBrightness1 7s infinite alternate;
}

.sphere2 > .circle {
    /* ... (vos autres styles) ... */
    animation: changeBrightness2 10s infinite alternate;
}

.sphere3 > .circle {
    /* ... (vos autres styles) ... */
    animation: changeBrightness3 13s infinite alternate;
}



.sphere1 > .circle:nth-child(2) {
    transform: rotateY(-7.2deg);
}
.sphere1 > .circle:nth-child(3) {
    transform: rotateY(-14.4deg);
}
.sphere1 > .circle:nth-child(4) {
    transform: rotateY(-21.6deg);
}
.sphere1 > .circle:nth-child(5) {
    transform: rotateY(-28.8deg);
}
.sphere1 > .circle:nth-child(6) {
    transform: rotateY(-36deg);
}
.sphere1 > .circle:nth-child(7) {
    transform: rotateY(-43.2deg);
}
.sphere1 > .circle:nth-child(8) {
    transform: rotateY(-50.4deg);
}
.sphere1 > .circle:nth-child(9) {
    transform: rotateY(-57.6deg);
}
.sphere1 > .circle:nth-child(10) {
    transform: rotateY(-64.8deg);
}
.sphere1 > .circle:nth-child(11) {
    transform: rotateY(-72deg);
}
.sphere1 > .circle:nth-child(12) {
    transform: rotateY(-79.2deg);
}
.sphere1 > .circle:nth-child(13) {
    transform: rotateY(-86.4deg);
}
.sphere1 > .circle:nth-child(14) {
    transform: rotateY(-93.6deg);
}
.sphere1 > .circle:nth-child(15) {
    transform: rotateY(-100.8deg);
}
.sphere1 > .circle:nth-child(16) {
    transform: rotateY(-108deg);
}
.sphere1 > .circle:nth-child(17) {
    transform: rotateY(-115.2deg);
}
.sphere1 > .circle:nth-child(18) {
    transform: rotateY(-122.4deg);
}
.sphere1 > .circle:nth-child(19) {
    transform: rotateY(-129.6deg);
}
.sphere1 > .circle:nth-child(20) {
    transform: rotateY(-136.8deg);
}
.sphere1 > .circle:nth-child(21) {
    transform: rotateY(-144deg);
}
.sphere1 > .circle:nth-child(22) {
    transform: rotateY(-151.2deg);
}
.sphere1 > .circle:nth-child(23) {
    transform: rotateY(-158.4deg);
}
.sphere1 > .circle:nth-child(24) {
    transform: rotateY(-165.6deg);
}
.sphere1 > .circle:nth-child(25) {
    transform: rotateY(-172.8deg);
}

.sphere2 > .circle:nth-child(25) {
    transform: rotateY(-172.8deg);
}
.sphere2 > .circle:nth-child(24) {
    transform: rotateY(-165.6deg);
}
.sphere2 > .circle:nth-child(23) {
    transform: rotateY(-158.4deg);
}
.sphere2 > .circle:nth-child(22) {
    transform: rotateY(-151.2deg);
}
.sphere2 > .circle:nth-child(21) {
    transform: rotateY(-144deg);
}
.sphere2 > .circle:nth-child(20) {
    transform: rotateY(-136.8deg);
}
.sphere2 > .circle:nth-child(19) {
    transform: rotateY(-129.6deg);
}
.sphere2 > .circle:nth-child(18) {
    transform: rotateY(-122.4deg);
}
.sphere2 > .circle:nth-child(17) {
    transform: rotateY(-115.2deg);
}
.sphere2 > .circle:nth-child(16) {
    transform: rotateY(-108deg);
}
.sphere2 > .circle:nth-child(15) {
    transform: rotateY(-100.8deg);
}
.sphere2 > .circle:nth-child(14) {
    transform: rotateY(-93.6deg);
}
.sphere2 > .circle:nth-child(13) {
    transform: rotateY(-86.4deg);
}
.sphere2 > .circle:nth-child(12) {
    transform: rotateY(-79.2deg);
}
.sphere2 > .circle:nth-child(11) {
    transform: rotateY(-72deg);
}
.sphere2 > .circle:nth-child(10) {
    transform: rotateY(-64.8deg);
}
.sphere2 > .circle:nth-child(9) {
    transform: rotateY(-57.6deg);
}
.sphere2 > .circle:nth-child(8) {
    transform: rotateY(-50.4deg);
}
.sphere2 > .circle:nth-child(7) {
    transform: rotateY(-43.2deg);
}
.sphere2 > .circle:nth-child(6) {
    transform: rotateY(-36deg);
}
.sphere2 > .circle:nth-child(5) {
    transform: rotateY(-28.8deg);
}
.sphere2 > .circle:nth-child(4) {
    transform: rotateY(-21.6deg);
}
.sphere2 > .circle:nth-child(3) {
    transform: rotateY(-14.4deg);
}
.sphere2 > .circle:nth-child(2) {
    transform: rotateY(-7.2deg);
}
.sphere3 > .circle:nth-child(2) {
    transform: rotateY(-7.2deg);
}
.sphere3 > .circle:nth-child(3) {
    transform: rotateY(-14.4deg);
}
.sphere3 > .circle:nth-child(4) {
    transform: rotateY(-21.6deg);
}
.sphere3 > .circle:nth-child(5) {
    transform: rotateY(-28.8deg);
}
.sphere3 > .circle:nth-child(6) {
    transform: rotateY(-36deg);
}
.sphere3 > .circle:nth-child(7) {
    transform: rotateY(-43.2deg);
}
.sphere3 > .circle:nth-child(8) {
    transform: rotateY(-50.4deg);
}
.sphere3 > .circle:nth-child(9) {
    transform: rotateY(-57.6deg);
}
.sphere3 > .circle:nth-child(10) {
    transform: rotateY(-64.8deg);
}
.sphere3 > .circle:nth-child(11) {
    transform: rotateY(-72deg);
}
.sphere3 > .circle:nth-child(12) {
    transform: rotateY(-79.2deg);
}
.sphere3 > .circle:nth-child(13) {
    transform: rotateY(-86.4deg);
}
.sphere3 > .circle:nth-child(14) {
    transform: rotateY(-93.6deg);
}
.sphere3 > .circle:nth-child(15) {
    transform: rotateY(-100.8deg);
}
.sphere3 > .circle:nth-child(16) {
    transform: rotateY(-108deg);
}
.sphere3 > .circle:nth-child(17) {
    transform: rotateY(-115.2deg);
}
.sphere3 > .circle:nth-child(18) {
    transform: rotateY(-122.4deg);
}
.sphere3 > .circle:nth-child(19) {
    transform: rotateY(-129.6deg);
}
.sphere3 > .circle:nth-child(20) {
    transform: rotateY(-136.8deg);
}
.sphere3 > .circle:nth-child(21) {
    transform: rotateY(-144deg);
}
.sphere3 > .circle:nth-child(22) {
    transform: rotateY(-151.2deg);
}
.sphere3 > .circle:nth-child(23) {
    transform: rotateY(-158.4deg);
}
.sphere3 > .circle:nth-child(24) {
    transform: rotateY(-165.6deg);
}
.sphere3 > .circle:nth-child(25) {
    transform: rotateY(-172.8deg);
}