/*some basic reset*/
* {margin: 0; padding: 0;}
canvas {    
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    opacity: .95;
	z-index:0
}
body {
	margin: 0;
    padding: 0;
	overflow-x: hidden;
	/*
background: linear-gradient(to right, #ffffff 0%,#dbdbdb 24%,#d1d1d1 51%,#ffffff 100%);
  background-size: 10000px 100%;
  animation: bg 3s linear infinite ;
  */
}

@keyframes bg{
  0%{
    background-position-x: 0;
  }
  
  100%{
    background-position-x: 10000px;
  }
}
.theme-switch-container {
    display: block;
    align-items: center;
}

.current-time {
    margin: 9px 130px;
    display: inline-block;
    width: 260px;
    font-size: 18px;
    font-weight: 900;
    color: #000;
}
.theme-switch__input:checked ~ main,
.theme-switch__input:checked ~ label {
  --text: white;
}

.theme-switch__input:checked ~ main {
  --gradDark: hsl(198, 44%, 11%);
  --gradLight: hsl(198, 39%, 29%);
}

.theme-switch__input,
.theme-switch__label {
  position: absolute;
  z-index: 1;
}

.theme-switch__input {
  opacity: 0;
}
.theme-switch__input:hover + .theme-switch__label, .theme-switch__input:focus + .theme-switch__label {
  background-color: lightSlateGray;
}
.theme-switch__input:hover + .theme-switch__label span::after, .theme-switch__input:focus + .theme-switch__label span::after {
  background-color: #d4ebf2;
}

.theme-switch__label {
    margin: 10px 50px;
    transition: background-color 200ms ease-in-out;
    width: 120px;
    height: 50px;
    border-radius: 50px;
    text-align: center;
    background-color: slateGray;
	display: block;
    zoom: 0.5;
    box-shadow: -4px 4px 15px inset rgba(0, 0, 0, 0.4);
}
.theme-switch__label::before, .theme-switch__label::after {
  font-size: 2rem;
  position: absolute;
  transform: translate3d(0, -50%, 0);
  top: 50%;
}
.theme-switch__label::before {
  content: "☼";
  right: 100%;
  margin-right: 10px;
  color: orange;
}
.theme-switch__label::after {
  content: "☾";
  left: 100%;
  margin-left: 10px;
  color: lightSlateGray;
}
.theme-switch__label span {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 100%;
}
.theme-switch__label span::after {
  position: absolute;
  top: calc(100% + 15px);
  left: 5px;
  width: 40px;
  height: 40px;
  content: "";
  border-radius: 50%;
  background-color: lightBlue;
  transition: transform 200ms, background-color 200ms;
  box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.4);
}

.theme-switch__input:checked ~ .theme-switch__label {
  background-color: lightSlateGray;
}
.theme-switch__input:checked ~ .theme-switch__label::before {
  color: lightSlateGray;
}
.theme-switch__input:checked ~ .theme-switch__label::after {
  color: turquoise;
}
.theme-switch__input:checked ~ .theme-switch__label span::after {
  transform: translate3d(70px, 0, 0);
}
#logo {
    width: 100%;         /* Utilise 100% de la largeur disponible */
    height: auto;        /* Hauteur automatique pour maintenir l'aspect ratio */
    margin: 0 auto;      /* Centre la div horizontalement */
    text-align: center;   /* Centre le texte à l'intérieur de la div */
    padding: 0 10px;     /* Ajoute un peu d'espace sur les côtés pour les petits écrans */
	z-index:9999
}

div#svg {
display:block;
fill:#20B2AA!important;
stroke:#20B2AA!important;
}


/* Media Query pour petits écrans (320px à 480px) */
@media (max-width: 480px) {
    #logo {
        width: 220px;      /* Réduit la largeur à 95% pour les petits écrans */
        padding: 0 5px;  /* Réduit le padding pour éviter les débordements */
    }
}

/* Media Query pour écrans moyens (481px à 720px) */
@media (min-width: 481px) and (max-width: 720px) {
    #logo {
        width: 320px!important;      /* Ajuste la largeur à 90% pour les écrans moyens */
        padding: 0 10px; /* Conserve le padding d'origine */
    }
}

/* Media Query pour écrans larges (720px et plus), si besoin */
@media (min-width: 721px) {
    #logo {
        width: 90%;      /* Ajuste la largeur à 70% pour les écrans larges */
    }
}