.background-color-transparent
{
    background-color: transparent;
}

.border-none
{
    border:none;
}


body
{
    background-color: black;
    position: relative;
    overflow-x: hidden;
}

#background-container
{
    position: relative;
    width: 100%; /* Largeur complète */
    height: auto;
    text-align: center; /* Centrer le texte */
    color: white; 
    overflow: hidden;
    background: radial-gradient(circle at bottom left, #ff5873ff 0%, #002945ff 75%, #002945ff 100%);
}

#background-img
{   
    position: absolute; 
    top: 0px;
    left: 0px;
    object-fit: cover; 
    z-index: -2; 
    width: 100%;
    height: auto;
    overflow-x: hidden;
}


@keyframes stars1Animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

#stars_1-img
{
    position: absolute; 
    object-fit: cover; 
    height: auto;
    display: none;
    z-index: 0;
    animation: stars1Animation 5s linear infinite;
}

@keyframes stars2Animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

#stars_2-img
{
    position: absolute; 
    object-fit: cover; 
    height: auto;
    display: none;
    z-index: 0;
    animation: stars2Animation 3s linear infinite;
}

@keyframes moonAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

#moon-img
{
    position: absolute; 
    /*object-fit: cover;*/ 
    z-index: 0; 
    display: none;
    cursor: grab;
    animation: moonAnimation 5s linear infinite;
}

#goat-img
{
    position: absolute;
    width: 15%;
    height: auto;
    z-index: 3; 
    top: 0px;
    left: 0px;
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;

    animation: slideSmooth 6s linear infinite;
}

.rotate-image 
{
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease;
  transform-origin: center center;
}

/*
    Nuages
*/

@keyframes cloud1Animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

#clouds_1-img {
    position: absolute;
    z-index: 1; 
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;
    animation: cloud1Animation 5s linear infinite;
}

@keyframes cloud1Animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

#clouds_2-img {
    position: absolute;
    z-index: 1; 
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;
    animation: cloud1Animation 3s linear infinite;
}

@keyframes cloudAnimation {
    0% { 
        opacity: 1;
        transform: translateX(-50vw);     
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% { 
        opacity: 1;
        transform: translateX(150vw);    
    }
}

#cloud_1-1
{    
    position: absolute;
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;
    z-index: 1; 
    animation: cloudAnimation 26s linear infinite;
}

#cloud_1-2
{    
    position: absolute;
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;
    z-index: 1; 
    animation: cloudAnimation 20s linear infinite;
}

#cloud_2-1
{    
    position: absolute;
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;
    z-index: 5; 
    animation: cloudAnimation 30s linear infinite;
}

#cloud_2-2
{    
    position: absolute;
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;
    z-index: 5; 
    animation: cloudAnimation 25s linear infinite;
}

/* Ballon */

@keyframes ballonAnimation {
    0% { transform:  translate(0px, 0px); }
    50% { transform: translate(200px, -200px); }
    100% { transform: translate(0px, 0px); }
}


#ballon-img {
    position: absolute;
    z-index: 2; 
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;
    animation: ballonAnimation 25s linear infinite;
}

/* Oiseau */

#bird_1-img {
    position: absolute;
    z-index: 2; 
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;
}

#bird_2-img {
    position: absolute;
    z-index: 2; 
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;
}

/* Base */

#base-img {
    position: absolute;
    z-index: 1; 
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;
}

/* Grille */
#fence-img
{   
    position: absolute; 
    object-fit: cover;
    object-position: top center;
    z-index: 5;
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;
}

/* Only up */
@keyframes OnlyUpAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

#only_up-img
{
    position: absolute; 
    object-fit: cover;
    object-position: top center;
    z-index: 5;
    pointer-events: none;
    user-drag: none; 
    -webkit-user-drag: none;
    display: none;
    animation: OnlyUpAnimation 2s ease-in-out infinite;
}

/*
    Etoiles
*/

#canvas_1
{
    position: absolute; 
    object-fit: cover; 
    z-index: 2; 
    display: block;
}

#canvas_2
{
    position: absolute; 
    object-fit: cover; 
    z-index: 2; 
    display: block;
}

#canvas_3
{
    position: absolute; 
    object-fit: cover; 
    z-index: 2; 
    display: block;
}

#canvas_4
{
    position: absolute; 
    object-fit: cover; 
    z-index: 2; 
    display: block;
}

#canvas_5
{
    position: absolute; 
    object-fit: cover; 
    z-index: 2; 
    display: block;
}

.navbar-toggler
{
    border: none !important;
    font-size: 15px !important;
    box-shadow: none !important;
}



/*
    DIV_1
*/

#div_1
{
    z-index: 2;
    position: absolute;
    color: orange;
    text-align: center;
    display: none;
    opacity: 0; 
    transition: opacity 2s ease-in-out; 
}

#div_1.visible {
    opacity: 1;
}


@media screen and (min-width: 576px)
{
    #div_1
    {
        font-size: 1.2em; 
    }
}

@media screen and (min-width: 768px)
{
    #div_1
    {
        font-size: 1.5em; 
    }
}

@media screen and (min-width: 992px)
{
    #div_1
    {
        font-size: 2em; 
    }
}

@media screen and (min-width: 1280px)
{
    #div_1
    {
        font-size: 32.5m; 
    }
}

/*
    DIV_2
*/

#div_2
{
    z-index: 2;
    position: absolute;
    color: orange;
    text-align: center;
    display: none;
    opacity: 0; 
    transition: opacity 2s ease-in-out; 
}

#div_2.visible {
    opacity: 1;
}


@media screen and (min-width: 576px)
{
    #div_2
    {
        font-size: 1.2em; 
    }
}

@media screen and (min-width: 768px)
{
    #div_2
    {
        font-size: 1.5em; 
    }
}

@media screen and (min-width: 992px)
{
    #div_2
    {
        font-size: 2em; 
    }
}

@media screen and (min-width: 1280px)
{
    #div_2
    {
        font-size: 2.5em; 
    }
}

/*
    DIV_3
*/

#div_3
{
    z-index: 2;
    position: absolute;
    color: orange;
    width: 100%;
    text-align: center;
    display: none;
    opacity: 0; 
    transition: opacity 2s ease-in-out; 
}

#div_3.visible {
    opacity: 1;
}

@media screen and (min-width: 576px)
{
    #div_3
    {
        font-size: 1.2em; 
    }
}

@media screen and (min-width: 768px)
{
    #div_3
    {
        font-size: 1.5em; 
    }
}

@media screen and (min-width: 992px)
{
    #div_3
    {
        font-size: 2em; 
    }
}

@media screen and (min-width: 1280px)
{
    #div_3
    {
        font-size: 2.5em; 
    }
}

/*
    DIV_4
*/

#div_4
{
    z-index: 2;
    position: absolute;
    color: orange;
    width: 100%;
    text-align: center;
    display: none;
    opacity: 0; /* Start hidden */
    transition: opacity 2s ease-in-out;
}

#div_4.visible {
    opacity: 1;
}

@media screen and (min-width: 576px)
{
    #div_4
    {
        font-size: 1.2em; 
    }
}

@media screen and (min-width: 768px)
{
    #div_4
    {
        font-size: 1.5em; 
    }
}

@media screen and (min-width: 992px)
{
    #div_4
    {
        font-size: 2em; 
    }
}

@media screen and (min-width: 1280px)
{
    #div_4
    {
        font-size: 2.5em; 
    }
}
/*
    SOCIAL NETWORK
*/

@keyframes floatAnimation {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

#telegram-button
{
    position: absolute;
    z-index: 2;
    display: none;
    background-image: url('../img/telegram.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: floatAnimation 2s ease-in-out infinite;
}

#x-button
{
    position: absolute;
    z-index: 2;
    display: none;
    background-image: url('../img/x.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: floatAnimation 2s ease-in-out infinite;
}

#discord-button
{   
    position: absolute;
    z-index: 2;
    display: none;
    background-image: url('../img/discord.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: floatAnimation 2s ease-in-out infinite;
}

#b-button
{
    position: absolute;
    z-index: 2;
    display: none;
    background-image: url('../img/b.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: floatAnimation 2s ease-in-out infinite;
}

/*
    LAUNCH DAPP
*/

#dapp
{
    position: absolute;
    z-index: 2;
    display: none;
    border-radius: 50%;
    background-color: transparent;
    border: none;
}

#dapp:hover 
{
     background: radial-gradient(circle, rgba(255, 88, 115, 0.2) 0%, rgba(255, 88, 115, 0) 100%); /*#ff5873ff 0%, #002945ff*/ 
}


@media screen and (min-width: 576px)
{
    #dapp
    {
        width: 60px;
        height: 60px; 
    }
}

@media screen and (min-width: 768px)
{
    #dapp
    {
        width: 80px;
        height: 80px; 
    }
}

@media screen and (min-width: 992px)
{
    #dapp
    {
        width: 100px;
        height: 100px; 
    }
}

@media screen and (min-width: 1280px)
{
    #dapp
    {
        width: 120px;
        height: 120px; 
    }
}



/*
    La barre de navigation ne se comporte pas bien !!!!
*/


  /* Tooltip container */
  .tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  /* Tooltip text styling */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 100px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    /* Position the tooltip above the element */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -50px;  /* centers the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
  }
  /* Show the tooltip text when hovering */
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }