@import url(normalize.css);

body {
    overflow: hidden;
}

.couleur_nuit {
    background-color: #002461;
}
.couleur_crepuscule {
    background-color: #F65047;
}
.couleur_aube {
    background-color: #FFED89;
}

/******************* Ciel *******************/

.ciel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-left: 50px;
    margin-right: 50px;
    padding-top: 20px;
    gap: 400px;
}

.niveau_soleil {
    margin-top: 150px;
}

.astres {
    position: relative;
    z-index: 1;
}

/********** Nuages **********/  

#nuages {
    position: absolute;
    z-index: 0;
    width: 100%;
    opacity: 0.2;
    animation: nuages 10s linear infinite;

    .cls-1 {
        fill: #0A0A00;
        stroke: transparent;
        stroke-miterlimit: 10;
        stroke-width: .5px;
    } 
}
@keyframes nuages {
    0%{
        transform: translateX(0px) translateY(-250px);
    }
    25%{
        transform: translateX(-20px) translateY(-250px);
    }
    50% {
        transform: translateX(0px) translateY(-250px);
    }
    75% {
        transform: translateX(20px) translateY(-250px);
    }
    100% {
        transform: translateX(0px) translateY(-250px);
    }
}

#nuages,
#nuages_centre_2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

#nuages_gauche,
#nuages_centre_1,
#nuages_droite {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

#nuages_gauche {
    display: flex;
    transform: translateY(-50px);
    width: 80%;
}

#nuages_centre {
    transform: translateY(-100px);
}

#nuages_droite {
    display: flex;
    transform: translateY(60px);
}


/********** Soleil aube **********/  

#soleil_aube {
    fill: #EBD450;
    opacity: 0.2;
}

#soleil_aube_petits_rayons, 
#soleil_aube_grands_rayons {
    .cls-1 {
        fill: transparent;
        stroke: #EBD450;
        stroke-miterlimit: 10;
        stroke-width: 2px;
      }
}
#soleil_aube_petits_rayons {
    animation: petits_rayons 4s linear infinite;
    transform-origin: 51% 51%;
}
@keyframes petits_rayons {
    from {
        transform: rotate(0deg) scale(0.9);
    }
    to {
        transform: rotate(360deg) scale(0.9);
    }
}
#soleil_aube_grands_rayons {
    animation: grands_rayons 6s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes grands_rayons {
    from {
        transform: rotate(0deg) scale(0.865);
    }
    to {
        transform: rotate(-360deg) scale(0.865);
    }
}

/********** Lune **********/  

#lune {
      .cls-1, .cls-2, .cls-3, .cls-4 {
        stroke-miterlimit: 10;
      }

      .cls-1 {
        stroke-width: .5px;
        fill: #FAFAFA;
      }

      .cls-2 {
        fill: #717171;
      }

      .cls-3, .cls-4 {
        stroke-width: .25px;
        fill: #B8B8B8;
      }
}
#lune_aura {
    animation: lune_aura 2s linear infinite;
    transform-origin: 51% 50%;
    opacity: 0.5;
}
@keyframes lune_aura {
    from {
        transform: rotate(0deg) scale(0.9);
    }
    to {
        transform: rotate(360deg) scale(0.9);
    }
}

/********** Soleil crépuscule **********/  

#soleil_crepuscule {
    opacity: 0.2;
    animation: clignoter 2s linear infinite;

    .cls-1 {
        fill: #E61F15;
        stroke-miterlimit: 10;
        stroke-width: .5px;
      }
}
@keyframes clignoter {
    0% {
        scale: 1;
    }
    50% {
        scale: 0.95;
    }
    100% {
        scale: 1;
    }
}
.clignoter_arret {
    animation: none !important;
}

/******************* Architectures *******************/

.architectures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.fenetres {
    fill: #0A0A00;
}
.fenetres:hover {
    fill: #EBD450;
}

#batiment_administratif_d-agglomeration_montbeliard:hover,
#cathedrale_saint-christophe:hover,
#maison_des_wurtemberg:hover {
    animation: zoom 0.5s linear forwards;
    transform-origin: 50% 50%;
}
@keyframes zoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

/********** Bâtimaent administratif **********/  

#batiment_administratif_d-agglomeration_montbeliard {
    .cls-1, .cls-2, .cls-3 {
        stroke: #FAFAFA;
        stroke-miterlimit: 10;
    }
    
    .cls-2 {
        stroke-width: .5px;
    }
    
    .cls-3 {
        stroke-width: .75px;
    }
}

/********** Cathédrale **********/  

#cathedrale_saint-christophe {
    #petite_aiguille,
    #grande_aiguille {
        fill: #EBD450;
        transform-origin: 33% 21.2%;
    }
    #petite_aiguille {
        animation: rotate 6s linear infinite;
    }
    #grande_aiguille {
        animation: rotate 1s linear infinite;
    }

    .cls-1 {
        stroke-width: .35px;
    }
    
    .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
        stroke: #FAFAFA;
        stroke-miterlimit: 10;
    }
    
    .cls-3 {
        stroke-width: .5px;
    }
    
    .cls-4 {
        stroke-width: .75px;
    }
    
    .cls-5 {
        stroke-width: .25px;
    }
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/********** Château **********/  

#maison_des_wurtemberg {
    .cls-1 {
        stroke-width: .35px;
    }

    .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
        stroke: #FAFAFA;
        stroke-miterlimit: 10;
    }

    .cls-3 {
        stroke-width: .5px;
    }

    .cls-4 {
        stroke-width: .75px;
    }

    .cls-5 {
        stroke-width: .25px;
    }
}

/****************** Décords *******************/

.decors {
    margin-top: -150px;
}

/********** Lampadaires **********/  

.lampadaires {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 400px; 
}
#lampadaire:hover {
    #lampadaire_aura {
        animation: clignotement 0.75s linear infinite;
    }
}
@keyframes clignotement {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
#lampadaire {
    .cls-1, .cls-2 {
        stroke: #0A0A00;
        stroke-miterlimit: 10;
    }

    .cls-2 {
        stroke-width: .5px;
        fill: #717171;
    }

    .cls-3 {
        stroke-width: .25px;
    }
}
#lampadaire_lumiere {
    fill: #FAFAFA;;
}
#lampadaire_verriere {
    fill: #EBD450;
}
#lampadaire_aura {
    fill: #FFED89;
    opacity: 0.5;
}
.lampadaire_aura_eteint {
    animation: none !important;
}

/********** Trottoire **********/ 

.trottoire {
    border: 2px solid #717171;
}

/****************** Footer *******************/  

#route {
    position: relative;
    z-index: -1;

    .cls-1, .cls-2 {
        fill: #0A0A00;
        stroke-miterlimit: 10;
      }

      .cls-1 {
        stroke: #0A0A00;
      }

      .cls-2 {
        stroke-width: .5px;
        fill: #FAFAFA;
      }
}

.voitures {
    position: absolute;
    display: flex;
    width: 55%;
    margin-top: 3px;
    z-index: 1;
    animation: voitures 5s linear infinite;

    #voiture {
        .cls-1, .cls-2 {
            stroke-miterlimit: 10;
            stroke: #FAFAFA;
        }
        
        .cls-2 {
            stroke-width: .5px;
        }
        
        .cls-3 {
            stroke-width: .25px;
            fill: #FFED89;
            opacity: 0.5;
        }
    }

    #voiture_carrosserie,
    #voiture_jante_avant,
    #voiture_jante_arriere,
    #taxi_jante_avant,
    #taxi_jante_arriere {
        fill: #717171;
    }

    #voiture_phare_avant,
    #taxi_carrosserie {
        fill: #EBD450;
    }
    #taxi_phare_avant {
        fill: #FFED89;
    }

    #voiture_phare_arriere {
        fill: #E61F15;
    }
    #taxi_phare_arriere {
        fill: #F65047;
    }
        
    #taxi {
        .cls-1, .cls-3, .cls-4 {
            stroke: #FAFAFA;
            stroke-miterlimit: 10;
        }
        
        .cls-2 {
            stroke-width: 0px;
        }
        
        .cls-3 {
            stroke-width: .5px;
        }
        
        .cls-4 {
            stroke-width: .25px;
            fill: #FFED89;
            opacity: 0.5;
        }
    }
    #taxi_enseigne,
    #carreaux_blancs {
        fill: #FAFAFA;
    }
    #carreaux_noirs {
        fill: #0A0A00;
    }
}
@keyframes voitures {
    from {
        transform: translateX(-100vw);
    }
    to {
        transform: translateX(100vw);
    }
}