/* ===========================
   RESET
=========================== */

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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    font-family: Arial, Helvetica, sans-serif;
}

/* ===========================
   IMAGE
   html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #2c0056;
    font-family: Arial, Helvetica, sans-serif;
}
=========================== */

.background {
    position: fixed;
    inset: 0;
    z-index: 1;
}

.background img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Mobile */

@media (max-width:768px) {

    .background img {
        object-fit: cover;
    }

}

/* ===========================
   PARTICULES
=========================== */

.particles {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

/* ===========================
   BULLES
=========================== */

.bubble {

    position: absolute;

    bottom: -120px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .18);

    backdrop-filter: blur(2px);

    border: 1px solid rgba(255, 255, 255, .18);

    box-shadow:

        0 0 10px rgba(255, 255, 255, .25),

        inset 0 0 10px rgba(255, 255, 255, .12);

    animation: float linear infinite;
}

/* ===========================
   ETOILES
=========================== */

.star {

    position: absolute;

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: white;

    box-shadow:

        0 0 6px white,

        0 0 12px rgba(255, 255, 255, .8),

        0 0 20px rgba(255, 255, 255, .5);

    animation:

        twinkle 2.5s infinite alternate,

        floatStar linear infinite;
}

/* ===========================
   ANIMATION BULLES
=========================== */

@keyframes float {

    0% {
        transform: translate3d(0, 0, 0) scale(.5);
        opacity: 0;
    }

    10% {
        opacity: .18;
    }

    50% {
        transform: translate3d(15px, -55vh, 0) scale(.9);
        opacity: .22;
    }

    100% {
        transform: translate3d(-15px, -130vh, 0) scale(1.1);
        opacity: 0;
    }

}

/* ===========================
   ANIMATION ETOILES
=========================== */

@keyframes twinkle {

    from {

        opacity: .2;

        transform: scale(.8);

    }

    to {

        opacity: 1;

        transform: scale(1.5);

    }

}

@keyframes floatStar {

    from {

        transform: translateY(0);

    }

    to {

        transform: translateY(-120vh);

    }

}