html {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="%23FF5100" stroke="%23FF5100" stroke-width="2"></circle></svg>'),
    default;
}



html, body {
    
    margin: 0;
    padding: 0; 
    background-color: black;
    font-family: "Syne", sans-serif;
    font-optical-sizing: auto;
    color: #FFFFFF;
}

.bg2 {
    visibility: hidden;
}

/* links properties */

a {
    text-decoration: none;
    color: #FFFFFF;
}

#link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* top nav */

h1 {
    font-weight: 400;
    font-size : 30px;
    margin: 0;
    padding: 0;
}

.name {
    position: fixed;
    top: 10px;
    left: 2vw;  
}

.projects {
    position: fixed;
    top: 10px;
    right: 2vw;
}

.about {
    position: fixed;
    bottom: 15px;
    left: 2vw;
    
}

.hi {
    position: fixed;
    bottom: 15px;
    right: 2vw;
}



/* projects menu */

.principal {
    margin-top: 30vh;
    height: 90vh;
             
}

.d23-songes,
.ma24-halos,
.m22-lowtide,
.oc23-hzspirits {
    
    animation: softGlow1 12s ease-in-out infinite alternate;

}

.j24-spectres,
.f23-fantomes,
.o23-svc {
    
    animation: softGlow2 9s ease-in-out infinite alternate;

}

.m24-wavering,
.ja23-orbes,
.s24-transcend {
    
    animation: softGlow3 8s ease-in-out infinite alternate;

}


@keyframes softGlow1 {
  0% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    filter: blur(0.5px);
  }
  25% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    filter: blur(0.1px);
  }
  
  50% {
    filter: blur(0.9px);
  }
  75% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    filter: blur(0px);
  }
  100% {
    text-shadow: 0 0 5px rgba(255,255,255,0.2);
    filter: blur(0.2px);
  }
}

@keyframes softGlow2 {
  0% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    filter: blur(0.1px);
  }
  25% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    filter: blur(0.3px);
   } 
  50% {
    filter: blur(0px);
  }
  75% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    filter: blur(0.9px);
  }
  100% {
    text-shadow: 0 0 5px rgba(255,255,255,0.2);
    filter: blur(0.1px);
  }
}

@keyframes softGlow3 {
  0% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    filter: blur(1px);
  }
  25% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    filter: blur(0px);
   } 
  50% {
    filter: blur(0.5px);
  }
  75% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
    filter: blur(0.2px);
  }
  100% {
    text-shadow: 0 0 5px rgba(255,255,255,0.2);
    filter: blur(0.3px);
  }
}

.bg {
    margin-top: 10vh;
    position: fixed;
    margin-left: 5vw;
    margin-right: 5vw;
    width: auto;
}

  

.blocktxtprojects {
    top: 30vh;
    position: fixed;
    width: 100vw;
    
}



.project {
    position: fixed;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-size: 0.75vw;
}


.project:hover {
    text-decoration: none;
    background-color: #FFFFFF;
    color: #000000;
    padding-left: 2px;
    padding-right: 2px;
}

/* positionnement freq */
.d23-songes { left: 10.8vw; margin-top: 7.6vh; }
.m24-wavering { left: 11.7vw; margin-top: 11.6vh;}
.f23-fantomes { left: 25.3vw; margin-top: 11vh; }
.ja23-orbes { left: 52.5vw; margin-top: 29em; }
.j24-spectres { left: 4.5vw; margin-top: 14.25vh;}
.m22-lowtide { left: 66vw; margin-top: 3vh;  }
.ma24-halos { left: 52.7vw; margin-top: 12vh; }
.o23-svc { left: 71vw; margin-top: -1vh;   }
.s24-transcend { left: 68.5vw; margin-top: 7.5vh; }
.oc23-hzspirits { left: 10.5vw; margin-top: 28em;  }

@media only screen and (max-width: 768px) {


    /* masquer titres*/
    .d23-songes,
    .m24-wavering,
    .f23-fantomes,
    .ja23-orbes,
    .j24-spectres,
    .m22-lowtide,
    .ma24-halos,
    .o23-svc,
    .s24-transcend,
    .oc23-hzspirits {
      visibility: hidden;
    }

    @media only screen and (max-width: 768px) {
        h1 {
            font-size: 25px;
        }
        
        
        .name {
            left: 4vw;
        }
        
        .about {
            left: 4vw;
        }
        
        .projects {
            right: 4vw;
        }

        .bg {
            visibility: hidden;
        }

        .bg2 {
            visibility: visible;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0;
            padding: 0;
            
            top: 8vh;
            width: auto; /* La largeur s'ajuste automatiquement */
            height: 80vh;
            
            animation: 
                defilement-bounce 40s linear infinite,
                fadeIn 2s ease-in forwards;
            opacity: 0;
  }

  @keyframes defilement-bounce {
    0% {
        transform: translateX(-10%); /* Début au bord gauche */
    }
    50% {
        transform: translateX(calc(-100% + 100vw)); 
    }
    100% {
        transform: translateX(-10%); 
    }
  }

  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
}
            
  }