/* Animation du titre de page d'accueil */

.ml12,
.navbar-brand,
.navbar-nav {
    opacity: 0;
    transition: 0ms;
}

.ml12,
.ml12 .letter {
    display: inline-block;
    line-height: 5rem;

    font-size: 4.2rem;
}
@media screen and (max-width: 576px) {
    .ml12 {
        letter-spacing: 0.01rem;
        text-align: center;
    }
    .ml12,
    .ml12 .letter {
        display: inline-block;
        line-height: 3rem;

        font-size: 2.5rem;
    }
}

.ml1 {
    font-weight: 900;
    font-size: 3.5em;
}

.ml1 .letter {
    display: inline-block;
    line-height: 1em;
}

.ml1 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.1em;
    padding-right: 0.05em;
    padding-bottom: 0.15em;
}

.ml1 .line {
    opacity: 0;
    position: absolute;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: #fff;
    transform-origin: 0 0;
}

.ml1 .line1 {
    top: 0;
}
.ml1 .line2 {
    bottom: 0;
}

/* Bg animation */
body {
    margin: auto;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: auto;
    background: linear-gradient(315deg, #0d6efd 3%, rgba(60, 132, 206, 1) 38%, #30eee2 68%, #9999e2 98%);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.wave {
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
    position: fixed;
    width: 200%;
    height: 12em;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.wave:nth-of-type(2) {
    bottom: -1.25em;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    bottom: -2.5em;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}

* {
    transition: 0.5s;
}

@keyframes turner {
    0% {
        transform: rotateY(0deg);
    }
    10% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(360deg);
    }
    60% {
        transform: rotateY(360deg);
    }
    100% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

.logo-container {
    position: relative;
    perspective: 800px;

    width: 50%;
}
.wrapper {
    width: 35rem;
    height: 35rem;

    transform-style: preserve-3d;

    transition: transform 1s;
}

section div {
    /* image is 460px x 460px */
    width: 35rem;
    height: 13.5px; /* 50 divisions */
    background-image: url("./images/icons/Logo_vibranium_with_text.png");
    background-size: cover;
    backface-visibility: visible;
    animation: turner 15s infinite;
}
.one {
    background-position: 0 0;
}
.one2 {
    background-position: 0 -100%;
    animation-delay: 0.1s;
}
.one3 {
    background-position: 0 -200%;
    animation-delay: 0.2s;
}
.one4 {
    background-position: 0 -300%;
    animation-delay: 0.3s;
}
.one5 {
    background-position: 0 -400%;
    animation-delay: 0.4s;
}
.one6 {
    background-position: 0 -500%;
    animation-delay: 0.5s;
}
.one7 {
    background-position: 0 -600%;
    animation-delay: 0.6s;
}
.one8 {
    background-position: 0 -700%;
    animation-delay: 0.7s;
}
.one9 {
    background-position: 0 -800%;
    animation-delay: 0.8s;
}
.one10 {
    background-position: 0 -900%;
    animation-delay: 0.9s;
}
.one11 {
    background-position: 0 -1000%;
    animation-delay: 1s;
}
.one12 {
    background-position: 0 -1100%;
    animation-delay: 1.1s;
    }
.one13 {
    background-position: 0 -1200%;
    animation-delay: 1.2s;
}
.one14 {
    background-position: 0 -1300%;
    animation-delay: 1.3s;
}
.one15 {
    background-position: 0 -1400%;
    animation-delay: 1.4s;
}
.one16 {
    background-position: 0 -1500%;
    animation-delay: 1.5s;
}
.one17 {
    background-position: 0 -1600%;
    animation-delay: 1.6s;
}
.one18 {
    background-position: 0 -1700%;
    animation-delay: 1.7s;
}
.one19 {
    background-position: 0 -1800%;
    animation-delay: 1.8s;
}
.one20 {
    background-position: 0 -1900%;
    animation-delay: 1.9s;
}
.one21 {
    background-position: 0 -2000%;
    animation-delay: 2s;
}
.one22 {
    background-position: 0 -2100%;
    animation-delay: 2.1s;
}
.one23 {
    background-position: 0 -2200%;
    animation-delay: 2.2s;
}
.one24 {
    background-position: 0 -2300%;
    animation-delay: 2.3s;
}
.one25 {
    background-position: 0 -2400%;
    animation-delay: 2.4s;
}
.one26 {
    background-position: 0 -2500%;
    animation-delay: 2.5s;
}
.one27 {
    background-position: 0 -2600%;
    animation-delay: 2.6s;
}
.one28 {
    background-position: 0 -2700%;
    animation-delay: 2.7s;
}
.one29 {
    background-position: 0 -2800%;
    animation-delay: 2.8s;
}
.one30 {
    background-position: 0 -2900%;
    animation-delay: 2.9s;
}
.one31 {
    background-position: 0 -3000%;
    animation-delay: 3s;
}
.one32 {
    background-position: 0 -3100%;
    animation-delay: 3.1s;
}
.one32 {
    background-position: 0 -3100%;
    animation-delay: 3.1s;
}
.one33 {
    background-position: 0 -3200%;
    animation-delay: 3.2s;
}
.one34 {
    background-position: 0 -3300%;
    animation-delay: 3.3s;
}
.one35 {
    background-position: 0 -3400%;
    animation-delay: 3.4s;
}
.one36 {
    background-position: 0 -3500%;
    animation-delay: 3.5s;
}
.one37 {
    background-position: 0 -3600%;
    animation-delay: 3.6s;
}
.one38 {
    background-position: 0 -3700%;
    animation-delay: 3.7s;
}