:root {
  --circle1-color: rgba(0, 0, 255, 0.5);
  --circle2-color: rgba(0, 0, 255, 0.5);
  --circle3-color: rgba(0, 0, 255, 0.5);
}
::selection {
   background-color: black;
}

body {
overflow: hidden;
-ms-content-zooming: none;
-ms-high-contrast-adjust: none;

}


.scene {
position: absolute;
}
.scene-part {
position: absolute;
left: 0px;
top: 0px;
}

body {
color: #fff;
background-color: var(--bg);
}

@keyframes circle1Path {
0%{
top:50vh;
left:50vw;
width:5vw;
height:5vw;
opacity:0.5;
}
50%{
top:0vh;
left:45vw;
width:60vw;
height:60vw;
opacity: 1;
}
100%{
top:50vh;
left:50vw;
width:5vw;
height:5vw;
opacity:0.5;
}
}
@keyframes circle2Path {
0%{
top:40vh;
left:45vw;
width:15vw;
height:15vw;
}
50%{
top:37vh;
left:-10vw;
width:80vw;
height:80vw;
}
100%{
top:40vh;
left:45vw;
width:15vw;
height:15vw;
}
}
@keyframes circle3Path {
0%{
top:30vh;
left:30vw;
width:25vw;
height:25vw;
}
50%{
top:-50vh;
left:-20vw;
width:120vw;
height:120vw;
}
100%{
top:30vh;
left:30vw;
width:25vw;
height:25vw;
}
}

}
@keyframes fadeIn {
0%{
opacity: 0;
}
}
@keyframes fadeCircleIn{
0%{
opacity:0;
}
100%{
opacity: 1;
}
}
.circle1{
position: absolute;
animation: circle1Path 15s infinite, fadeCircleIn 1332ms ease-out;
border-radius: 100vw;
background: radial-gradient(50% 50% at 50% 50%, var(--circle1-color) 15.62%, rgba(0, 50, 255, 0) 100%);
}
.circle2{
position: absolute;
animation: circle2Path 20s infinite, fadeCircleIn 1332ms ease-out;
border-radius: 100vw;
background: radial-gradient(50% 50% at 50% 50%, var(--circle2-color) 15.62%, rgba(0, 50, 255, 0) 100%);
}
.circle3{
position: absolute;
animation: circle3Path 30s infinite, fadeCircleIn 1332ms ease-out;
border-radius: 100vw;
background: radial-gradient(50% 50% at 50% 50%, var(--circle3-color) 15.62%, rgba(0, 50, 255, 0) 100%);
}

header {
  position: absolute ;
  bottom: 0;
  width: 100%;
  color: lightgrey;
}

b {
  color: red;
}
.change-color-btn {
  position: absolute; /*permet de placer le bouton absolument*/
  bottom: 52.5px; /*place le bouton en bas de la page*/
  left: 20px; /*place le bouton à gauche de la page (si vous voulez le mettre à droite, utilisez right: 0;)*/
  z-index: 1; /*mettre le bouton en premier plan*/
}
.change-color-btn1 {
  position: absolute; /*permet de placer le bouton absolument*/
  bottom: 85px; /*place le bouton en bas de la page*/
  left: 20px; /*place le bouton à gauche de la page (si vous voulez le mettre à droite, utilisez right: 0;)*/
  z-index: 1; /*mettre le bouton en premier plan*/
}
.planni {
  position: absolute; /*permet de placer le bouton absolument*/
  bottom: 0px; /*place le bouton en bas de la page*/
  right: 0px; /*place le bouton à gauche de la page (si vous voulez le mettre à droite, utilisez right: 0;)*/
  z-index: 1; /*mettre le bouton en premier plan*/
}
#color-palette {
   display: none;
  position: absolute; /*permet de placer le bouton absolument*/
  bottom: 135px; /*place le bouton en bas de la page*/
  left:130px; /*place le bouton à gauche de la page (si vous voulez le mettre à droite, utilisez right: 0;)*/
  z-index: 1; /*mettre le bouton en premier plan*/
}
}
.perso{
  position: absolute; /*permet de placer le bouton absolument*/
  bottom: 85px; /*place le bouton en bas de la page*/
  left: 20px; /*place le bouton à gauche de la page (si vous voulez le mettre à droite, utilisez right: 0;)*/
  z-index: 1; /*mettre le bouton en premier plan*/
}
red{
  color: red}
gre{
  color: green}
blu{
  color: blue}



.weather-emoji {
  position: absolute;
  font-size: 1.5rem;
  animation-timing-function: linear;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-name: weatherFadeIn, fall;
}

.weather-emoji.no-rotate {
  animation-name: weatherFadeIn, fallStraight;
}

/* Apparition douce (0.8s) */
@keyframes weatherFadeIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Chute avec rotation (neige, feuilles, cadeaux) */
@keyframes fall {
  0% { transform: translateY(0vh) rotate(0deg); }
  100% { transform: translateY(120vh) rotate(360deg); }
}

/* Chute droite sans rotation (pluie) */
@keyframes fallStraight {
  0% { transform: translateY(0vh); }
  100% { transform: translateY(120vh); }
}
body.invisible-theme {
  background-color: #000; /* neutre pour le démarrage, optionnel */
  visibility: hidden;
}