* {
    font-family: "Yu Gothic Light", sans-serif ;
    list-style-type: none;
    margin: 0;
    animation: colorTransition 2s;
}
@font-face {
    font-family: "Yu Gothic Light";
    src: local("Yu Gothic Light"),
        local("YuGothL.ttc");
        
}
@font-face {
    font-family: "Yu Mincho Light";
    src: local("Yu Mincho Light"),
        local("yuminl.ttf");

}


/*2k*/

body {
    overflow: hidden;
    background-image: url(Watercolor-Paper-paynegrey.png);
    background-color: #222A30;
    background-attachment: fixed;
    width: max-content;
}

@keyframes colorTransition{
    from{
        background-color: #000000;
        background-image: none;
    }
    80%{
        background-image: none;
    }
    to{
        background-color: #222A30;
        background-image: url(Watercolor-Paper-paynegrey.png);
    }
}
@keyframes colorTransition2{
    from{
        background-color: #222A30;
    }
    60%{
        background-color: rgba(34, 42, 48, 0.5);
    }
    to{
        background-color: rgba(34, 42, 48, 0.9);
    }
}
@keyframes colorTransition3{
    from{
        background-color: #222A30;
        background-image:none;
    }
    60%{
        background-color: #222A30;
        background-image: none;
    }
    to{
        background-color: #0f1316;
    }
}
@keyframes colorTransition4{
    from{
        background-color: transparent;
        color: #ffffff;
        stroke: #ffffff;
    }
    60%{
       
        background-image:none;
    }
    to{
        background-color: transparent;
        color: #222A30;
        stroke: #222A30;
        background-image:url(Watercolor-Papergrey.png);
    }
}

/*animation間*/

.anim間{
    width: 7vw;
    height: 7vw;
    position: fixed; 
    display: none;  /*inline-flex*/
    transform: translate(36vw,76vh);
    background: none;
    z-index: 11;
}

#Calque1{
    transform: translateX(70%);
    align-self: baseline;
  height: 100%;
  animation: calque1 infinite 5s alternate;
  fill: none;
  stroke-width: 2px;
  animation-delay: 4s;
  

}

@keyframes calque1 {
    from {
        transform: translate(70%,0) scale(1);
        stroke: #57B7FF;
        opacity: 0;
    }
    50%{
        transform: translate(-20%,-20%) scale(0.7);
        filter: blur(7px);
       
    }
    to {
        transform: translate(70%,0) scale(1);
        stroke: #57B7FF;
      
    }
}


#Calque2{
    align-self: end;
    height: 38%;
  transform: translate(12%,-56%);
  animation: calque2 infinite 5s alternate;
  fill: none;
  stroke-width: 2px;
  animation-delay: 4s;
}

@keyframes calque2 {
    from {
        transform: translate(12%,-56%) scale(1);
        stroke: #57B7FF;
        opacity: 0;
        
    }
    50%{
        transform: translate(12%,-46%) scale(1.2);
        filter: blur(7px);
        
    }
    to {
        transform: translate(12%,-56%) scale(1);
        stroke: #57B7FF;
       
    }
}


#Calque3{
    transform: translateX(-64%);
  align-self: end;
  height: 100%;
  animation: calque3 infinite 5s alternate;
  fill: none;
  stroke-width: 2px;
  animation-delay: 4s;
}   

@keyframes calque3 {
    from {
        transform: translate(-64%,0) scale(1);
        stroke: #57B7FF;
        opacity: 0;
        
    }
    50%{
        transform: translate(-20%,20%) scale(0.8);
        filter: blur(7px);
        
    }
    to {
        transform: translate(-64%,0) scale(1);
        stroke: #57B7FF;
        
    }
}

/*animation fond tonnerre*/
.animTonnerre{
    transform: translate(37vw,83vh);
    display: none;/*grid*/
    width: 10vw;
    height: 5vh;
    position: fixed;
    background: none;
    z-index: 4;
}

#Calc1{
    fill:#000;
    stroke: none;
    position: absolute;
    display: grid;
    justify-self: left;
  height: 20px;
  align-self: center;
  opacity: 0;
  animation: font1 5s infinite linear;
  animation-delay: 5s;
}


@keyframes font1 {
    from {
        transform: scale(1);
        fill: none;
        opacity: 1;
    }
    1%{
        fill: #fff;
    }
    2%{
        fill: #C22D29;
    }
    3%{
        fill: #fff;
    }
    5%{
        fill: #C22D29;
    }

    19%{
        transform: scale(1);
        
       
    }
   
    20%{
        transform: scale(1.2) translateY(0px);
        opacity: 1;
       
    }
    21%{
        transform: scale(1.3) translateY(10px);
        opacity: 1;
        filter: blur(0);
    }
    90%{
        opacity: 0.2;
        filter: blur(2px);
    }
    to {
        transform: scale(1.6) translateY(-10px);
       fill: #C22D29;
       opacity: 0;
       filter: blur(2px);
    }
}

#Calc2{
    fill:#000;
    stroke: none;
    position: absolute;
  height: 30px;
  display: grid;
  justify-self: center;
  align-self: center;
  opacity: 0;
  animation: font2 5s linear infinite;
  animation-delay: 5s;
}


@keyframes font2 {
    from {
        transform: scale(1.2);
        fill: #C22D29;
        opacity: 0;
       
    }
    20%{
        transform: scale(1.2);
        opacity: 0;
           
    }
    21%{
        transform: scale(1.3);
        opacity: 1;
           
    }
    30%{
        transform: scale(1.4) translate(0px,0px);
        opacity: 1;
           
    }
    31%{
        transform: scale(1.5) translate(-10px,10px);
        opacity: 0.4;
        filter: blur(0);
           
    }
    90%{
        opacity: 0.2;
        filter: blur(2px);
    }
    to {
        transform: scale(1.6) translate(-30px,20px);
        fill: #C22D29;
        opacity: 0;
        filter: blur(2px);
    }
}



#Calc3{
    fill:none;
    stroke:#000;
    stroke-width:1px;
  position: absolute;
  height: 60px;
  display: grid;
  justify-self: center;
  align-self: center;
  opacity: 0;
  animation: font3 5s linear infinite;
  animation-delay: 5s;
}
@keyframes font3 {
    from {
        transform: scale(1.3);
        fill: rgb(194, 45, 41);
        opacity: 0;
       
    }
    30%{
        transform: scale(1.3);
        opacity: 0;
           
    }
    31%{
        transform: scale(1.4);
        opacity: 1;
           
    }
    40%{
        transform: scale(1.5) translate(0px,0px);
        opacity: 1;        
        stroke:rgba(194, 45, 41,0.5) ;
        stroke-width: 1px;
           
    }
    41%{
        transform: scale(1.5) translate(-20px,10px);
        opacity: 1;
        stroke:#C22D29;
        stroke-width: 1px;
           
    }

    50%{
        fill: rgba(194, 45, 41, 0);
        filter: blur(0);
    }
    90%{
        opacity: 0.2;
        filter: blur(2px);
    }
    to {
        transform: scale(1.7) translate(-25px,40px);
        fill: none;
        stroke:rgb(194, 45, 41) ;
        opacity: 0;
        filter: blur(2px);
      
    }
}
#Calc4{
    fill:none;
    stroke:#000;
    stroke-width:1px;
  position: absolute;
  height: 150px;
  display: grid;
  justify-self: center;
  align-self: center;
  stroke: #C22D29;
  opacity: 0;
  animation: font4 5s linear infinite;
  animation-delay: 5s;
}
@keyframes font4 {
    from {
        transform: scale(1.4);
        stroke: #C22D29;
        opacity: 0;
       
    }
    40%{
        transform: scale(1.4);
        opacity: 0;
           
    }
    41%{
        transform: scale(1.5);
        opacity: 1;
           
    }
    50%{
        transform: scale(1.6) translate(0px,0px);
        stroke-width: 1px;
        opacity: 1;
           
    }
    51%{
        transform: scale(1.7) translate(10px,10px);
        stroke: #C22D29;
        stroke-width: 1.5px;
        opacity: 0.8;
        filter: blur(0);
           
    }
    90%{
        opacity: 0.2;
        filter: blur(2px);
    }
    to {
        transform: scale(1.9) translate(30px,-20px);
        stroke: #C22D29;
        opacity: 0;
        filter: blur(2px);
      
    }
}

#Calc5{
    fill:none;
    stroke:#000;
    stroke-width:1px;
  position: absolute;
  z-index: 5;
  height: 300px;
  display: grid;
  justify-self: center;
  align-self: center;
  fill: none;
  opacity: 0;
  animation: font5 5s linear infinite;
  animation-delay: 5s;
}
@keyframes font5 {
    from {
        transform: scale(1.5) translate(0px,0px);
        stroke: #C22D29;
        opacity: 0;
       
    }
    50%{
        transform: scale(1.5);
        opacity: 0;
           
    }
    51%{
        transform: scale(1.6);
        opacity: 1;
           
    }
    60%{
        transform: scale(1.7);
        stroke-width: 1px;
        opacity: 1;
           
    }
    61%{
        transform: scale(1.8)translate(-10px,-20px);
        stroke: #C22D29;
        stroke-width: 2px;
        opacity: 1;
        filter: blur(0);
    }
    80%{
        opacity: 0.8;
        filter: blur(2px);
    }
    to {
        transform: scale(2) translate(-15px,-40px);
        stroke: #C22D29;
        opacity: 0;
        filter: blur(2px);
      
    }
}



/*animation couleur*/
.animCouleur{
    color: #B5B5B5;/*même couleur fond*/
    font-family: "Yu Gothic Light", sans-serif ;
    list-style-type: none;
    margin-top: 82vh;
    margin-left: 40vw;
    display: none;
    position: fixed;
    z-index: 12;
    width: fit-content;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 40px;
    transform: scale(1.2);
    /*
    text-shadow: -15px 0px 0  rgb(255, 0, 255),
                 -15px -15px 0  rgb(255, 0, 0), 
                0px -15px 0 rgb(255, 128, 0), 
                15px -15px 0 rgb(255, 255, 0), 
                15px 0px 0 rgb(0, 255, 0), 
                15px 15px 0 rgb(0, 255, 255), 
                0px 15px 0  rgb(0, 0, 255);*/
    animation: color-dance 8s infinite;
    animation-delay: 5s;
}
@keyframes color-dance {
from{
    text-shadow: none;
    filter: none;
    transform: scale(1.2);
    color: #B5B5B5;/*même couleur fond*/
    letter-spacing: 40px;
}
10%{
    text-shadow: none;
    filter: none;
    transform: scale(1.2);
    color: #B5B5B5;/*même couleur fond*/
    letter-spacing: 40px;
}

    40%{
        text-shadow: 
        -15px 0px 0 rgb(1, 87, 255,0.3),
         -15px -15px 0 rgb(0, 254, 243,0.3),
          0px -15px 0 rgb(115, 0, 255,0.3), 
          15px -15px 0 rgb(255, 0, 94,0.3), 
          15px 0px 0 rgb(255, 115, 0,0.3), 
          15px 15px 0 rgb(252, 240, 0,0.3), 
          0px 15px 0 rgb(0, 255, 18,0.3);
  filter: grayscale(60%);
  transform: scale(1) translate(0,0);  
  letter-spacing: 10px;
    }

    50%{
        text-shadow: 
            -50px 0px 0 rgb(1, 87, 255,0.7),
            -50px -50px 0 rgb(0, 254, 243,0.7),
             0px -50px 0 rgb(115, 0, 255,0.7),
             50px -50px 0 rgb(255, 0, 94,0.7),
             50px 0px 0 rgb(255, 115, 0,0.7),
             50px 50px 0 rgb(252, 240, 0,0.7),
             0px 50px 0 rgb(0, 255, 18,0.7);
    filter: brightness(0.7) grayscale(0);
    transform: scale(0.5) translate(-10vw,2vh);
    letter-spacing: 5px;

        }
    57%{
        text-shadow: 15px 0px 0 rgba(1, 87, 255, 0.5), 15px 15px 0 rgba(0, 254, 243, 0.5), 0px 15px 0 rgba(115, 0, 255, 0.5), -15px 15px 0 rgba(255, 0, 94, 0.5), -15px 0px 0 rgba(255, 115, 0, 0.5), -15px -15px 0 rgba(252, 240, 0, 0.7), 0px -15px 0 rgba(0, 255, 18, 0.5);
        transform: scale(1) translate(0,0);
    }
    65%{
        filter: brightness(1);
      text-shadow: none;
    }
70%{
    text-shadow: -15px 0px 0px #0157FF, -15px -15px 0px #00FEF3, 0px -15px 0px #7300FF, 15px -15px 0px #FF005E, 15px 0px 0px #FF7300, 15px 15px 0px #FCF000, 0px 15px 0px #00ff12;
            
    transform: scale(1);
    color: #B5B5B5;
    letter-spacing: 5px;
}
    80%{
        text-shadow: -15px 0px 0  rgb(255, 0, 255,0.5),
                 -15px -15px 0  rgb(255, 0, 0,0.5), 
                0px -15px 0 rgb(255, 128, 0,0.5), 
                15px -15px 0 rgb(255, 255, 0,0.5), 
                15px 0px 0 rgb(0, 255, 0,0.5), 
                15px 15px 0 rgb(0, 255, 255,0.5), 
                0px 15px 0  rgb(0, 0, 255,0.5);
        transform: scale(1.2);
        color: #B5B5B5;
        letter-spacing: 10px;
    }
    88%{
        text-shadow: -1px 0px 0px rgb(0, 255, 255,1 ),
                 -1px -1px 0px  rgb(0, 0, 255,1), 
                0px -1px 0px rgb(255, 0, 255,1), 
                1px -1px 0px rgb(255, 0, 0,1), 
                1px 0px 0px rgb(255, 128, 0,1), 
                1px 1px 0px rgb(255, 255, 0,1), 
                0px 1px 0px  rgb(0, 255, 0,1);

        transform: scale(1.2);
        color: #B5B5B5;
        letter-spacing: 5px;
    }

    90%{
        text-shadow: -2px 0px 0 rgb(255, 255, 0,0.5),
                 -2px -2px 0  rgb(0, 255, 0,0.5), 
                0px -2px 0 rgb(0, 255, 255,0.5), 
                2px -2px 0 rgb(0, 0, 255,0.5), 
                2px 0px 0 rgb(255, 0, 255,0.5), 
                2px 2px 0 rgb(255, 0, 0,0.5), 
                0px 2px 0  rgb(255, 128, 0,0.5);

        transform: scale(1.2);
        color: #B5B5B5;
    }

    92%{
        text-shadow: 4px 0px 0px rgb(255, 0, 0,1),
                4px 4px 0px  rgb(255, 128, 0,1), 
                0px 4px 0px rgb(255, 255, 0,1), 
                -4px 4px 0px rgb(0, 255, 0,1), 
                -4px 0px 0px rgb(0, 255, 255,1), 
                -4px -4px 0px rgb(0, 0, 255,1), 
                0px -4px 0px  rgb(255, 0, 255,1);

        transform: scale(1.2);
        color: #B5B5B5;
    }

    94%{
        text-shadow: -10px 0px 0px rgb(0, 255, 255,1 ),
                 -10px -20px 0px  rgb(0, 0, 255,1), 
                0px -10px 0px rgb(255, 0, 255,1), 
                20px -10px 0px rgb(255, 0, 0,1), 
                10px 0px 0px rgb(255, 128, 0,1), 
                10px 20px 0px rgb(255, 255, 0,1), 
                0px 10px 0px  rgb(0, 255, 0,1);

        transform: scale(1.2);
        color: #B5B5B5;
    }

    96%{
        text-shadow: 40px 0px 0px rgb(255, 0, 0,0.5),
                20px 40px 0px  rgb(255, 128, 0,0.5), 
                0px 20px 0px rgb(255, 255, 0,0.5), 
                -20px 40px 0px rgb(0, 255, 0,0.5), 
                -40px 0px 0px rgb(0, 255, 255,0.5), 
                -40px -20px 0px rgb(0, 0, 255,0.5), 
                0px -20px 0px  rgb(255, 0, 255,0.5);

        transform: scale(1.2);
        color: #B5B5B5;
    }

    97%{
        text-shadow: 100px 160px 0px rgb(255, 0, 0,0.3), 
        160px 120px 0px rgb(255, 128, 0,0.3), 
        160px -100px 0px rgb(255, 255, 0,0.3), 
        -160px 10px 0px rgb(0, 255, 0,0.3), 
        -100px 20px 0px rgb(0, 255, 255,0.3), 
        -60px -100px 0px rgb(0, 0, 255,0.3), 
        10px -160px 0px rgb(255, 0, 255,0.3);

        transform: scale(1.2);
        color: #B5B5B5;
    }
    99%{
        text-shadow: 100px 160px 0px rgb(255, 0, 0,0.1), 
        -160px -120px 0px rgb(255, 128, 0,0.1), 
        -160px 100px 0px rgb(255, 255, 0,0.1), 
        160px -10px 0px rgb(0, 255, 0,0.1), 
        100px -20px 0px rgb(0, 255, 255,0.1), 
        60px 100px 0px rgb(0, 0, 255,0.1), 
        -10px 160px 0px rgb(255, 0, 255,0.1);

        transform: scale(1.2);
        color: #B5B5B5;
        letter-spacing: 40px;
    }
    to{
        text-shadow: 1000px 1600px 0px rgb(255, 0, 0,0), 
        -1600px -1200px 0px rgb(255, 128, 0,0), 
        -1600px 1000px 0px rgb(255, 255, 0,0), 
        1600px -100px 0px rgb(0, 255, 0,0), 
        1000px -200px 0px rgb(0, 255, 255,0), 
        600px 1000px 0px rgb(0, 0, 255,0), 
        -100px 1600px 0px rgb(255, 0, 255,0);
        transform: scale(1.2);
        color: #B5B5B5;
    }
}

.animCouleur span{
    display: inline-block;
}


.animCouleur span:nth-child(1) {
    
    animation: C-R linear infinite 8s;
    animation-delay: 5s;
}
@keyframes C-R {
    from{
        transform: translate(0,0) ;
       
    }
    
    88%{
        transform: translate(0,0);
        
    }

    89%, 91%{
        transform: translate(-10px,0);
        
    }
    90%, 92%{
        transform: translate(-20px,20px);
        
    }
    89.5%, 91.5%{
        transform: translate(10px,0);
    }
    90.5%, 92.5%{
        transform: translate(-20px,-20px);
    }

    
    93%, 95%, 97%{
        transform: translate(-20px,0);
        
    }
    94%, 96%, 98%{
        transform: translate(-40px,40px);
        
    }
    93.5%, 95.5%, 97.5%{
        transform: translate(20px,0);
    }
    94.5%, 96.5%, 98.5%{
        transform: translate(-40px,-40px);
    }
    to {
        transform: translate(150px,0);
        
    }
}


.animCouleur span:nth-child(2) {
    animation: O-U linear infinite 8s;
    animation-delay: 5s;
}
@keyframes O-U {
    from{
        transform: translate(0,0) ;
       
    }
    
    88%{
        transform: translate(0,0);
        
    }
    
    89%, 91%{
        transform: translate(0px,-10px);
        
    }
    90%, 92%{
        transform: translate(-15px,20px);
        
    }
    89.5%, 91.5%{
        transform: translate(0,10px);
    }
    90.5%, 92.5%{
        transform: translate(-15px,-20px);
    }


    93%, 95%, 97%{
        transform: translate(0,-20px);
        
    }
    94%, 96%, 98%{
        transform: translate(-30px,40px);
        
    }

    93.5%, 95.5%, 97.5%{
        transform: translate(0,20px);
    }
    94.5%, 96.5%, 98.5%{
        transform: translate(-30px,-40px);
    }

    to {
        transform: translate(0,-150px);
        
    }
}

.animCouleur span:nth-child(3) {
    animation: U-E linear infinite 8s;
    animation-delay: 5s;
}
@keyframes U-E {
    from{
        transform: translate(0,0) ;
       
    }
    
    88%{
        transform: translate(0,0);
        
    }

    89%, 91%{
        transform: translate(10px,-20px);
        
    }
    90%, 92%{
        transform: translate(15px,10px);
        
    }

    89.5%, 91.5%{
        transform: translate(-10px,-15px);
    }
    90.5%, 92.5%{
        transform: translate(-20px,15px);
    }


    
    93%, 95%, 97%{
        transform: translate(20px,-40px);
        
    }
    94%, 96%, 98%{
        transform: translate(30px,20px);
        
    }

    93.5%, 95.5%, 97.5%{
        transform: translate(-20px,-30px);
    }
    94.5%, 96.5%, 98.5%{
        transform: translate(-40px,30px);
    }

    to {
        transform: translate(0,-150px);
        
    }
}

.animCouleur span:nth-child(4) {
    animation: L- linear infinite 8s;
    animation-delay: 5s;
}
@keyframes L- {
    from{
        transform: translate(0,0) ;
       
    }
    
    88%{
        transform: translate(0,0);
        
    }
    
    89%, 91%{
        transform: translate(0px,-25px);
        
    }
    90%, 92%{
        transform: translate(5px,25px);
        
    }

    89.5%, 91.5%{
        transform: translate(0px,25px);
    }
    90.5%, 92.5%{
        transform: translate(5px,-25px);
    }


    93%, 95%, 97%{
        transform: translate(0px,-50px);
        
    }
    94%, 96%, 98%{
        transform: translate(10px,50px);
        
    }

    93.5%, 95.5%, 97.5%{
        transform: translate(0px,50px);
    }
    94.5%, 96.5%, 98.5%{
        transform: translate(10px,-50px);
    }

    to {
        transform: translate(0,-150px);
        
    }
}
.animCouleur span:nth-child(5) {
    animation: U-E linear infinite 8s;
    animation-delay: 5s;
}

.animCouleur span:nth-child(6) {
    animation: O-U linear infinite 8s;
    animation-delay: 5s;
}

.animCouleur span:nth-child(7) {
    animation: C-R linear infinite 8s;
    animation-delay: 5s;
}





/* head - menu*/
h1 {
    font-size: 3vw;
    font-weight: lighter;
    color: #ffffff;
    position: fixed;
    z-index: 5;
    bottom: 6vh;
    margin: 0;
    text-align: center;
    width: 38vw;
    animation: slidedown 3s;  
    z-index: 11;
    /*animation-iteration-count: infinite; pour régler animation*/
    
}
@keyframes slidedown{
    from{
        
        transform: translateY(400px);
        opacity: 0.01;
    }
    50%{
        opacity: 0.01;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}
.ligne{ /* boite vide pour animation ligne*/
        border-top: #B6DDFB solid 2px;
        width: 38vw;
        bottom: 6.5vh;
        position: fixed;
        z-index: 101;
        animation-name: slidein;
        animation-duration: 2s;
        /*animation-iteration-count: infinite;*/   
    
}
@keyframes slidein{
    from{
        margin-left: -100%;        
    }

    to{
        margin-left: 0%;      
    }
}
.ligne2 { /* boite vide pour animation ligne*/
    border-top: #57B7FF solid 2px;
    width: 38vw;
    bottom: 6.5vh;
    position: fixed;
    z-index: 101;
    animation: color;
    animation-duration: 2s;

}
@keyframes color{
    from{
        border-top: #B6DDFB solid 2px;      
    }

    to{
        border-top: #57B7FF solid 2px; 
    }
}

.ligne3 {
    border-top: #C22D29 solid 2px;
    width: 38vw;
    bottom: 6.5vh;
    position: fixed;
    z-index: 101;
    animation: color2;
    animation-duration: 2s;

}
@keyframes color2{
    from{
        border-top: #B6DDFB solid 2px;      
    }

    to{
        border-top: #C22D29 solid 2px; 
    }
}

.ligne4 {
    border-top: #808080 solid 2px;
    width: 38vw;
    bottom: 6.5vh;
    position: fixed;
    z-index: 101;
    animation: color3;
    animation-duration: 2s;

}
@keyframes color3{
    from{
        border-top: #B6DDFB solid 2px;      
    }

    to{
        border-top: #808080 solid 2px; 
    }
}

nav{
    width: 100vw;
    bottom: 0;
    position: fixed;
    height: 6.5vh;
    z-index: 100;
}


ul{
    display: inline-flex;
    width: 38%;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    justify-content: space-between;
  }

li{
    width: 100%;
    display: flex;
    align-self: center;
    justify-content: center;
    animation-name: slidetop;   
 
   /* animation-iteration-count: infinite;*/
}


@keyframes slidetop{
    from {
        transform: translateY(100px);
               
      }
    
      to {
        transform: translateY(0px);
        
      }
}
a{
    text-decoration: none;
    font-size: 1.6vw;
    height: 100%;
    line-height: 100%;
    color: #ffffff;
}



li:last-child svg{
   
    padding: 0;
    
    height: 100%;
display: block;
margin: auto;
}
li:last-child svg:hover{
    transform: rotate(1turn);
    transition: 0.5s ease-out;
}

ul li:nth-child(2){
    display: none;
}

.間 {
    font-size: 2.2vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color間{
    color: #222A30;
    transition: 0.5s linear;
}

.間:hover > .color間{
    color: #57B7FF; 
    transition: 0.5s ease;
}
.間2 {
    
    display: none;
    
}

.colorTonnerre{
    color: #222A30;
    transition: 0.5s linear;
}
a:hover > .colorTonnerre{
    color: #C22D29;
    transition: 0.5s ease;
}

a:active > .colorTonnerre{
    color: #C22D29;
    font-weight: bold;
}


.tonnerre2{
    display: none;
}
.couleur2{
    display: none;
}

.colorCouleur{
    color: #222A30;
    font-weight: bold;
}

a:hover > .colorCouleur{
    color: #808080;
    transition: 0.5s ease;
}

a:active > .colorCouleur{
    color: #808080;
    font-weight: bold;
}

.colorContact{
    color: #222A30;
    transition: 0.5s linear;
}
.mailto:hover > .colorContact{
    color: #FF7700;
    transition: 0.5s ease;
}

.mailto:active > .colorContact{
    color: #FF7700;
    font-weight: bold;
}

.mailto img{
    display: none;
}


.mentions{
    color :#B1B1B1;
    position: fixed;
    right: 0.5vw;
    bottom: 0;
    margin: 0;
    animation: fade 5s;
    font-size: 0.8vw;
    z-index: 200;
}

@keyframes fade{
    from {
        opacity: 0;
               
      }
    
      75%{
          opacity: 0;
      }
      to {
        opacity: 1;
        
      }
}


/*fin menu nav*/


section{
    height: 100vh;    
    width: 100vw;
    position: relative;
  left: 0;
  top: 0;
}

#間{
    background-image: url(Watercolor-Paper-paynegrey.png);
    background-color:#222A30 ;
  background-attachment: fixed;
}

#Couleur{
    background-image:url(Watercolor-Papergrey.png) ;
    background-color: #B5B5B5;
  background-attachment: fixed;
}

article{
width: max-content;
z-index: 10;
position: relative;
}

.間art{
    margin-left: 56vw;
    animation: 0;
    background-image: url(Watercolor-Paper-paynegrey.png);
    background-color: #222A30;
    background-attachment: fixed;
    height: fit-content;
    z-index: 12;
}

 /*galerie1 間 > animation: fadeIn ease 5s 1;*/
 @keyframes fadeIn{
     from {
         opacity: 0;
         margin-left: -100vw;
                
       }
     
       to {
        opacity: 1;
        margin-left: 0;
         
       }
 }

.Tonnerre-art {
    margin-left: 35vw;
}

 /*article Tonnerre > animation: fadeIn ease 5s 1;*/
 @keyframes fadeIn2{
     from {
         opacity: 0;
         margin-left: -150vw;
                
       }
     
       to {
        opacity: 1;
        margin-left: 35vw;
         
       }
 }

 .Couleur-art {
    margin-left: 0;
  background-image: url(Watercolor-Papergrey.png);
  background-color: #B5B5B5;
  background-attachment: fixed;
  height: 100vh;
}

.decrire{
    width: 22vw;
    display: block;
    position: sticky;
    right: 0;
    float: right;
    height: 94vh;
    padding-left: 1vh;
    z-index: 21;
    color: #fff;
  }
 @keyframes fade2{
    from {
        opacity: 0;
        transform: translateX(50vw);
        background-color: rgba(34, 42, 48, 0.1);       
      }


      to {
       opacity: 1;
       transform: translateX(0);
       backdrop-filter: blur(2px);
       background-color: rgba(34, 42, 48, 0.9);
      }
 }
 @keyframes fade2Bis{
    from {
        opacity: 0;
        transform: translateX(50vw);
        background-color: rgba(15, 19, 22, 0.1);       
      }


      to {
       opacity: 1;
       transform: translateX(0);
       backdrop-filter: blur(2px);
       background-color: rgba(15, 19, 22, 0.9);
      }
 }

#間 .decrire{
    background-color: rgb(34, 42, 48,0.9);
  backdrop-filter: blur(2px);
}
#Tonnerre .decrire{
    background-color: rgba(15, 19, 22, 0.9);
    backdrop-filter: blur(2px);
  }
#Couleur .decrire{
    margin-left: 75vw;
}

h2{
    font-weight: bold;
      font-size: 3vw;
      border-left: #57B7FF solid 2px;
      padding-left: 1%;
      padding-top: 10%;
      text-align: left;
      line-height: 0.8;
      display: inline-flex;
  }

.Tonnerre-art h2{
    font-weight: bold;
    font-size: 2vw;
    border-left: #C22D29 solid 2px;
    padding-left: 1%;
    padding-top: 10%;
    text-align: left;
    line-height: 0.8;
    display: inline-flex;
}

h2 span{
    color: #807F7F; 
    font-size: 2vh;
    font-style: italic;
    display: block; 
    padding-left: 0.5vw;
    background: none;
    width: max-content;
    align-self: end;
}
.decrire textarea{
    font-family: Yu Mincho Light, serif;
    color: #fff;
    padding-left: 2%;
    padding-top: 1vh;
    font-size: 0.9vw;
    line-height: 1.2;
    resize: none;
    border: none;
    height: 80vh;
    width: 21vw;
    scrollbar-width: thin;
    scrollbar-color: #3C4B55 #2A343C;
    text-align: left;
    scroll-behavior: smooth;
    border-top: #3C4B55 solid 1px;
    border-bottom: #3C4B55 solid 1px;
    /*pour faire onglet*/
    display: none;
    order: 1;      
      
  }

  @keyframes fade2間{
    from {
        opacity: 0;
        backdrop-filter: blur(2px);
        background-color: rgba(34, 42, 48, 0.6);       
      }


      to {
       opacity: 1;
      
       backdrop-filter: blur(2px);
       background-color: rgba(34, 42, 48,0.95);
      }
 }
 @keyframes fade2Tonnerre{
    from {
        opacity: 0;
        backdrop-filter: blur(2px);
        background-color: rgba(15, 19, 22, 0.6);       
      }


      to {
       opacity: 1;
      
       backdrop-filter: blur(2px);
       background-color: rgba(15, 19, 22,0.95);
      }
 }
  #間 textarea{
    background-color: rgba(34, 42, 48,0.5);
    backdrop-filter: blur(2px);
  }
  #Tonnerre textarea{
    background-color: rgba(15, 19, 22, 0.5);
    backdrop-filter: blur(2px);
  }
 
.tabs{
    display: flex;
    flex-wrap: wrap;
}

.tabs label:first-of-type{
    margin-left: 78%;
}
label{
    text-align: center;
width: 10%;
color: #838383; 
font-weight: bold;
font-size: 1.4vh;
}


.decrire input[type="radio"] {
    display: none;
}
.decrire input[type='radio']:checked + label + textarea {
    display: block;
}
input[type="radio"]:checked + label {
    background: #3C4B55;
    color: #CACACA;;
}

img{
      margin-right: 1.5vw;
      
  }

.galerie1{
    height: 60vh;
    display: inline-flex;
    width: max-content;
  }

.galerie1 div:last-child{
display: flex;
justify-content: center;
align-self: center;
border: 1px solid #57B7FF;
margin: 10vw;
margin-right: 50vw;
padding: 3vw;
height: 1vh;
width: 1vh;
}  

.galerie1 div a{
    color: #57B7FF;
    font-size: 10vh;
    line-height: 0;
    transition: transform 2s;
}

.galerie1 div a:hover{
    transform: scale(1.4) rotate(90deg);
    transition: transform 1s;
}  

.galerie2{
    height: 60vh;
    display: inline-flex;
  }

.galerie2 div:last-child{
    display: flex;
    justify-content: center;
    align-self: center;
    border: 1px solid #C22D29;
    margin: 2vw;
    margin-right: 20vw;
    padding: 3vw;
    height: 1vh;
  width: 1vh;
}  

.galerie2 div a{
color: #C22D29;
  font-size: 10vh;
  line-height: 0;
  transition: transform 2s;
}

.galerie2 div a:hover{
  transform: scale(1.4) rotate(90deg);
  transition: transform 1s;
}

.galerie3{
    height: 80vh;
    width: max-content;
    display: inline-flex;
    align-items: start;
    justify-content: center;
  }  


.galerie3 div:first-child{
    position: sticky;
    top: 0;
    left: 38vw;
}
@keyframes DownIn{
    from {
        opacity: 0;
        transform: translateX(-150vh);
               
      }
    50%{
       opacity: 0.7;
       transform: translateX(-150vh);
    }
    
    to {
       opacity: 1;
        
      }
}
.galerie3 p{
    height: 58vh;
    align-items: end;
    align-self: start;
    display: flex;
    padding-bottom: 0;
    color: #222A30;
    font-size: 2.2vh;
    flex-direction: row;
    text-align: end;
}

.galerie3 p i{
  border-left: #3C4B55 1px solid;
  height: 100%;
  text-align: left;
  padding-left: 1vw;
  margin-left: 1vw;
  align-content: end;
}

 .galerie3 div:last-child{
    width: 91vw;
    height: max-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: end;
    justify-content: space-between;
    margin-left: 54vw;
    margin-right: 10vw;
    gap: 0.2vw;
 } 

 /*div Couleur > animation: fadeIn3 ease 5s 1;*/
 @keyframes fadeIn3{
    from {
        opacity: 0;
        margin-left: -200vw;
        left:0
               
      }
    40%{
       opacity: 1;
    }
      to {
       opacity: 1;
        
      }
}

div img{
    height: 60vh;
    box-shadow: rgba(34,42,48,0) 40vw 0px 0px 40vw, rgba(34,42,48,0) -40vw 0px 0 40vw;
    transition: 0.3s ease-out;
}
div img:hover{
    height: 93vh;
    box-shadow: rgba(34,42,48,0.8) 40vw 0px 0px 40vw, rgba(34,42,48,0.8) -40vw 0px 0 40vw;
    position: relative;
    z-index: 20;
    transition: 0.4s ease-in-out;
    image-rendering: pixelated;
}

#Tonnerre div img:hover{
    height: 93vh;
    box-shadow: rgba(15,19,22,0.8) 40vw 0px 0px 40vw, rgba(15,19,22,0.8) -40vw 0px 0 40vw;
    position: relative;
    z-index: 20;
    transition: 0.4s ease-in-out;
    image-rendering: pixelated;
}

#Couleur div img{
    height: 15vh;
    box-shadow: rgba(34,42,48,0) 40vw 0px 0px 40vw, rgba(34,42,48,0) -40vw 0px 0 40vw;
    transition: 0.3s ease-out;
    margin: 0;
}



#Couleur .galerie3 div{
    width: max-content;
}

#Couleur .galerie3 div img{
    height: 20vh;
    box-shadow: rgba(34,42,48,0) 0vw 0px 0px 40vw, rgba(34,42,48,0) 0vw 0px 0 40vw;
    transition: 0.3s linear;
}

#Couleur .galerie3 div img:hover{
    box-shadow:rgba(34,42,48,0.8) 0vw 0px 0px 72vw;
    position: relative;
    z-index: 25;
    transition: 0.5s ease-in-out;
    image-rendering: pixelated;
    transform: scale(3.5);
    transform-origin: bottom right;
}


picture{
    background: transparent;
}  

.galerie3 picture{
    align-self: end;
}


div  img:hover{
    image-rendering: smooth;
    }
#Tonnerre div img:hover   {
    image-rendering: smooth;
    }   







/*1080*/
@media screen and (min-width: 1200px) and (max-width: 2200px){

    ul li:nth-child(2){
        display: none;
    }
    
.anim間{
    transform: translate(36vw,75vh);
    }    

.animCouleur{
    margin-top: 80vh;
  margin-left: 39vw;
}

}



/*4k*/
@media screen and (min-width: 4001px){
    ul li:nth-child(2){
        display: none;
    }

    div img:hover{
image-rendering: smooth;
}
    #Tonnerre div img:hover{
        image-rendering: smooth;
        }
}











/*Mobile Portrait*/
@media screen and (max-width:440px) and (orientation: portrait) {

body{
    width: auto;
}    

.anim間{
    z-index: 0;
}

.animTonnerre{
    z-index: 0;
}

header{
height: calc(var(--vh, 1vh) * 100);
width:  calc(var(--vh, 1vh) * 100);
position: fixed;
}

h1{
    font-size: 12vw;
    left: 0;
    bottom: auto;
    width: 100vw;
    text-align: center;
    padding: 0;
    line-height: 1.3;
    animation-name: slidedown;  
    animation-duration: 4s;
    /*animation-iteration-count: infinite; pour régler animation*/
    }

    @keyframes slidedown{
        from{
            
            transform: translateY(200px);
           opacity: 0;
        }
        30%{
            opacity: 0;
        }
    
        to{
           
            transform: translateY(0);
            opacity: 1;
        }
    }

.ligne{
margin-left: 10vw;
width: 80vw;
bottom: calc(var(--vh, 1vh) * 8);
animation-name: slidein;
animation-duration: 5s;
}  

.ligne2 .ligne3{
    bottom: calc(var(--vh, 1vh) * 8);
}
@keyframes slidein{
    from{
        margin-left: -100%;        
    }

    to{
        margin-left: 10vw;      
    }
}
nav{
    height: calc(var(--vh, 1vh) * 8); 
    width: 100vw;
}

ul{
    width: 100vw;
}
ul li:nth-child(2) {
    display: block;
  }
.間2 {
    font-size: calc(var(--vh, 1vh) * 4);
    display: block;
  }
a{
    height: 100%;
display: block;
}
.color間{
    display: none;
}
.colorTonnerre{
    display: none;
}

.colorContact{
    display: none;
}

.tonnerre{
    font-size: 0;
    height: 0;
    display: none;
}

.tonnerre2{
    font-size: calc(var(--vh, 1vh) * 4);
    display: block;
}

.tonnerre2 a{
    display: flex;
align-items: center;
justify-content: center;
}
.tonnerre2 span{
    font-size: calc(var(--vh, 1vh) * 4);
    display: block;
}

.couleur{
    font-size: 0;
    height: 0;
    display: none;
}
.couleur2{
    font-size: calc(var(--vh, 1vh) * 4);
    display: block;
}
.couleur2 a{
    display: flex;
align-items: center;
justify-content: center;
}
.couleur2 span{
    font-size: calc(var(--vh, 1vh) * 4);
    display: block;
}

.mailto{
    font-size: 0;
    height: 100%;
    display: block;
}

.mailto img{
    display: block;
    height: 100%;
    margin: auto;
    width: calc(var(--vh, 1vh) * 5);
}


li{
    width: 25%;
    margin: 0;
}

li:first-child{
    display: none;
}

li:last-child{
    width: 25%;
  }

li:last-child img{
    width: calc(var(--vh, 1vh) * 4);
    height: 100%;
}


.mentions{
    bottom: calc(var(--vh, 1vh) * 8.5);
    width: 100vw;
text-align: center;
font-size: 3vw;
} 



section{
    overflow-y: hidden;
    height: calc(var(--vh, 1vh) * 91);
    margin-bottom: calc(var(--vh, 1vh) * 9);
  
}

#Couleur{
    background-image: none;
  background-color: transparent;
}

.間art {
    margin-left: 0%;
    height: calc(var(--vh, 1vh) * 91);
    margin-bottom: calc(var(--vh, 1vh) * 9);
}
 @keyframes fadeIn{
     from {
         opacity: 0;
         transform: translateX(-5%);
                
       }
     
       to {
        opacity: 1;
        transform: translateX(0);
         
       }
 }
.decrire{
    height: calc(var(--vh, 1vh) * 31);
    top: calc(var(--vh, 1vh) * 61);
    width: 0;
    left: 0;
    right: auto;
    float: left;
    padding-left: 0;
  }

#Tonnerre .decrire{
    height: calc(var(--vh, 1vh) * 47);
    top: calc(var(--vh, 1vh) * 55);
    width: 0;
    left: 0;
    right: auto;
    float: left;
    padding-left: 0;
}  

.Couleur-art{
    margin: 0;
    height: calc(var(--vh, 1vh) * 92);
    background-image: none;
  background-color: transparent;
}
.galerie1{
    height: calc(var(--vh, 1vh) * 60);
    margin-left: 7vw;
    width: auto;
}

.galerie2{
    height: calc(var(--vh, 1vh) * 45);
    margin-left:10vw;
    padding-top:0 ;
}



#間 picture{
    background: rgba(34,42,48,0.8);
    height: calc(var(--vh, 1vh) * 60);
 }
 


 #間 picture img{
    height: calc(var(--vh, 1vh) * 60);
    box-shadow: none;
    transition: none;
}
#Tonnerre picture img{
    height: calc(var(--vh, 1vh) * 45);
    box-shadow: none;
    transition: none;
}
.間art h2{
    font-size: 8vw;
    border-left: none;
    border-top: #57B7FF solid 2px;
    padding-top: calc(var(--vh, 1vh) * 1);
    padding-left: 1vw;
    padding-right: 1vw;
    padding-bottom: calc(var(--vh, 1vh) * 2);
}

.decrire textarea{
    width: 80vw;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    margin-top: calc(var(--vh, 1vh) * 0);
    font-size: 3.5vw;
    height: calc(var(--vh, 1vh) * 25);
    border-bottom: none;

}

#間 textarea {
    background-color: transparent;
    backdrop-filter: none;
  }

  #Tonnerre textarea {
    background-color: rgba(15, 19, 22, 1);
    backdrop-filter: blur(2px);
  }

#Tonnerre .decrire {
    background-color: rgba(15, 19, 22, 1);
    backdrop-filter: none;
  }
#Tonnerre .decrire textarea{
    width: 80vw;
text-align: center;
padding-left: 0;
font-size: 3.5vw;
height: calc(var(--vh, 1vh) * 40);
border-bottom: none;
}

.Tonnerre-art {
    margin-left: 0;
    height: calc(var(--vh, 1vh) * 92);
margin-bottom:calc(var(--vh, 1vh) * 8);
  }

 @keyframes fadeIn2{
     from {
         opacity: 0;
         transform: translateX(-5%);
                
       }
     
       to {
        opacity: 1;
        transform: translateX(0);
         
       }
 }


.Tonnerre-art h2{
    font-size: 7vw;
    font-weight: bold;
    border-left: none;
    border-top: #C22D29 solid 2px;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: calc(var(--vh, 1vh) * 1);
    padding-bottom: calc(var(--vh, 1vh) * 2);
}

h2 span{
    padding-left: 1vw;
    align-self: end;
    font-weight: bold;
}

.tabs{
    transform: translateY(calc(var(--vh, 1vh) * -4));
    width: 100vw;
    justify-content: center;
}
label{
    font-size: calc(var(--vh, 1vh) * 2);
}

.tabs label:first-of-type {
    margin-left: 60%;
  }

.galerie3{
    display: flex;
flex-wrap: wrap;
height:calc(var(--vh, 1vh) * 92);
}

.galerie3 div:first-child{
left: 0;
z-index: 0;
}

.galerie3 p{
    height: calc(var(--vh, 1vh) * 80);
    padding: 0;
    position: relative;
    border: none;
width: 100vw;
display: flex;
justify-content: center;
align-items: end;
text-align: right;
flex-direction: row;
font-size: 2vh;
}

.galerie3 div:last-child{
    
height: calc(var(--vh, 1vh) * 58);
overflow: hidden;
justify-content: space-between;
margin-top: 0;
margin-left: -50vw;
z-index: 1;
backdrop-filter: blur(2px);
}

#Couleur .galerie3 div {
    align-self: start;
    gap: 2vw;
    
  }

.galerie3 picture {
    align-self: start;
  }
#Couleur .galerie3 div img {
    height: calc(var(--vh, 1vh) * 58);
    box-shadow: none;
    transition: none;
}

 /*article Couleur > animation: fadeIn3 ease 5s 1;*/
 @keyframes fadeIn3{
    from {
        opacity: 0;
        margin-left: -800vw;
        transform: translateY(0);
               
      }

      to {
       opacity: 1;
        
      }
}
@keyframes colorTransition4{
    from{
        opacity: 0;
        color: #ffffff;
        stroke: #ffffff;
    }
    5%{
        opacity: 1;
        
    }
    to{
        background-color: rgb(181, 181, 181);
        color: #222A30;
        stroke: #222A30;
    }
}
}















/*Tablette portrait*/


@media screen and (min-width:441px) and (max-width:1279px) and (orientation: portrait){

    body{
        width: auto;
    }    
    
    .anim間{
        z-index: 0;
    }
    
    .animTonnerre{
        z-index: 0;
    }
    

    header{
        height: calc(var(--vh, 1vh) * 100);
        width: 100vw;
        position: fixed;
        }
        
        h1{
            font-size: 8vw;
            left: 0;
            bottom: calc(var(--vh, 1vh) * 8);
            width: 100vw;
            text-align: center;
            padding: 0;
            line-height: 1.3;
            animation: slidedown 4s;  
            
            /*animation-iteration-count: infinite; pour régler animation*/
            }
        
            @keyframes slidedown{
                from{
                    
                    transform: translateY(200px);
                    opacity: 0;
                }
            30%{
                opacity: 0;
            }
                to{
                   
                    transform: translateY(0);
                    opacity: 1;
                }
            }
        
        .ligne{
            top: calc(var(--vh, 1vh) * 94);
        margin-left: 10vw;
        width: 80vw;
        bottom: auto;
        animation-name: slidein;
        animation-duration: 5s;
        }    
        @keyframes slidein{
            from{
                margin-left: -100%;        
            }
        
            to{
                margin-left: 10vw;      
            }
        }

        .anim間{display: none;}

        nav{
            top: calc(var(--vh, 1vh) * 94);  
        bottom: auto;
        width: 100vw;
        }
        
        ul{
            width: 100vw;
        }
        ul li:nth-child(2) {
            display: block;
          }
        .間2 {
            font-size: calc(var(--vh, 1vh) * 4);
            font-weight: bold;
            display: block;
          }

        a{
            height: 100%;
        display: block;
        }
        .color間{
            display: none;
        }
        .colorTonnerre{
            display: none;
        }
        
        .colorContact{
            display: none;
        }
        
        .tonnerre{
            display: none;
        }

        .tonnerre2{
            display: block;
        }
        .tonnerre2 a{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .tonnerre2 span{
            font-size: calc(var(--vh, 1vh) * 4);
            font-weight: bold;
            display: block;
        }
        
        .couleur{
            font-size: 0;
            height: 0;
            display: none;
        }
        .couleur2{
            font-size: calc(var(--vh, 1vh) * 4);
            display: block;
        }
        .couleur2 a{
            display: flex;
        align-items: center;
        justify-content: center;
        }
        .couleur2 span{
            font-size: calc(var(--vh, 1vh) * 4);
            display: block;
            font-weight: bold;
        }
        .mailto{
            font-size: 0;
            height: 100%;
            display: block;
        }
        
        .mailto img{
            display: block;
            height: 100%;
            margin: auto;
            width:calc(var(--vh, 1vh) * 5);
        }
        
        
        li{
            width: 25%;
            margin: 0;
        }
        
        li:first-child{
            display: none;
        }
        
        .mentions{
            bottom: calc(var(--vh, 1vh) * 7.5);
            width: 100vw;
        text-align: center;
        font-size: 12px;
        background: none;
        animation: fade 5s;
        z-index:1;
        } 
            @keyframes fade{
                from {
                    opacity: 0;
                        
                }
                75%{
                    opacity: 0;
                }
                to {
                    opacity: 1;
                    
                }
            }
        
        section{
            overflow-y: hidden;
            height: calc(var(--vh, 1vh) * 94);
            margin-bottom: calc(var(--vh, 1vh) * 6);
          
        }

        #間{
            background-image: none;
            
            background-color: transparent;
        }

        #Couleur{
            background-image: none;
            background-color: transparent;
        }


        .間art {
            margin-left: 0;
            height: calc(var(--vh, 1vh) * 94);
            margin-bottom: calc(var(--vh, 1vh) * 6);
        }
         
         @keyframes fadeIn{
             from {
                 opacity: 0;
                 transform: translateX(-5%);
                        
               }
             
               to {
                opacity: 1;
                transform: translateX(0);
                 
               }
         }

         .Tonnerre-art {
            margin-left: 0;
            height: calc(var(--vh, 1vh) * 93);
            margin-bottom: calc(var(--vh, 1vh) * 7);
          }
         
         @keyframes fadeIn2{
             from {
                 opacity: 0;
                 transform: translateX(-5%);
                        
               }
             
               to {
                opacity: 1;
                transform: translateX(0);
                 
               }
         }

        .decrire{
            height: calc(var(--vh, 1vh) * 27);
            width: 0;
            top: calc(var(--vh, 1vh) * 66);
            left: 0;
            right: auto;
            float: left;
            padding-left: 0;
          }


        #Tonnerre .decrire{
            top:calc(var(--vh, 1vh) * 58);
        }
        
        .間art h2{
        font-size: 5vw;
        border-left: none;
        border-top: #57B7FF solid 2px;
        padding-top: calc(var(--vh, 1vh) * 1);
        padding-left: 1vw;
        }

        .Tonnerre-art h2{
        font-size: 3vw;
        width: 24vw;
        border-left: none;
        border-top: #C22D29 solid 2px;
        padding-top: calc(var(--vh, 1vh) * 1);
        padding-left: 1vw;
        }

        h2 span{
            padding-left: 2vw;
            padding-right: 1vw;
        }
        
        .tabs{
            width: 100vw;
            justify-content: center;
            transform: translateY(calc(var(--vh, 1vh) * -2));
        }
        .tabs label:first-of-type {
            margin-left: 60%;
          }

        #Tonnerre .tabs label:first-of-type {
            margin-left: 76%;
          }

        .decrire textarea{
        width: 80vw;
        text-align: center;
        font-size: 2.4vw;
        height: calc(var(--vh, 1vh) * 23);
        border-bottom: none;
        padding-left: 0;
        padding-top: 0;
        
        }
        #間 textarea {
            background-color: transparent;
            backdrop-filter: blur(2px);
          }
        #Tonnerre .decrire textarea{
        width: 80vw;
        text-align: center;
        font-size: 2.4vw;
        height: calc(var(--vh, 1vh) * 32);
        padding-left: 8vw;
        padding-top: 0;
        background-color: rgb(15, 19, 22);
    padding-right: 8vw;
                        
        }
        
        .galerie1{
            margin-left: 38vw;
            width: auto;
        } 

        .galerie2{
            margin-left: 3vw;
            height: 52vh;
        }
          

        div picture img{
            height: calc(var(--vh, 1vh) * 65);
        }
        
        .galerie2 picture img{
            height: calc(var(--vh, 1vh) * 52);
        }

        .Couleur-art {
            margin-left: 0;
          }
        .galerie3{
            display: flex;
        flex-wrap: wrap;
        height: calc(var(--vh, 1vh) * 94);
        }
        
        .galerie3 p{
            height: 100%;
            padding: 0;
            position: relative;
            border: none;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: start;
        text-align: right;
        flex-direction: row;
        gap: 2vw;
        }
        .galerie3 p i{
            text-align: left;
            border-left: #000 solid 2px;
            height: 100%;
            align-items: end;
            display: flex;
            padding-left: 1vw;
        }
        .galerie3 div{
            width: 250vw;
            height: calc(var(--vh, 1vh) * 93);
        overflow: hidden;
        justify-content: space-between;
        }
        
        #Couleur .galerie3 div:first-child {
            align-self: start;            
            left: 0;
            margin-top: 0;
            height: calc(var(--vh, 1vh) * 35);
            z-index: 2;
            margin-left: 0;
          }

        .galerie3 div:last-child{
            align-self: end;
            z-index: 2;
            margin-left: -65vw;
            gap: 2vw;
          }
                
        #Couleur .galerie3 div img {
            height: calc(var(--vh, 1vh) * 58);
            box-shadow: none;
            transition: none;
        }
        @keyframes fade2{
        0% {
            opacity: 0;
            transform: translateX(50vw);
            background-color: transparent;
          }
          100% {
            opacity: 1;
            transform: translateX(0);
            backdrop-filter: none;
            background-color: transparent;
          }
        }

        @keyframes fade2間{
        0% {
            opacity: 0;
            backdrop-filter: none;
            background-color: transparent;
          }
          100% {
            opacity: 1;
            backdrop-filter: none;
            background-color: transparent;
          }

        }
         /*article Couleur > animation: fadeIn3 ease 5s 1;*/
         @keyframes fadeIn3{
            from {
                opacity: 0;
                margin-left: -800vw;
                transform: translateY(0);
                       
              }
            40%{
               opacity: 1;
               margin-left: -160vw;
            }
            50%{
                margin-left: -160vw;
            }
              to {
               opacity: 1;
                
              }
        }
        @keyframes colorTransition4{
            from{
                opacity: 0;
                
                color: #ffffff;
                stroke: #ffffff;
            }
            5%{
                opacity: 1;
            }
            to{
                opacity: 1;
                background-color:rgba(181, 181, 181, 0.9);
                color: #222A30;
                stroke: #222A30;
            }
        }
        
        } 













/*mobile paysage*/
@media screen and (max-width:940px) and (orientation: landscape) {
    body{
        width: auto;
    }    
    
    .anim間{
        z-index: 0;
    }
    
    .animTonnerre{
        z-index: 0;
    }
    
h1{
    font-size: 4.5vw;
    bottom: auto;
    margin: 0;
    width: 99vw;
    text-align: right;
    padding-left: 0;
    z-index: 1;
    animation-name: slideleft;  
    animation-duration: 4s;
    /*animation-iteration-count: infinite; pour régler animation*/
    
}
@keyframes slideleft{
    from{
        
        transform: translateX(100px);
       opacity: 0;
    }
    30%{
        opacity: 0;
    }
    to{
       
        transform: translateX(0);
        opacity: 1;
    }
}

.ligne{
    border-top: none;
    border-right: #B6DDFB solid 2px;
    width: 0;
    height: calc(var(--vh, 1vh) * 80);
    margin-left: 10vw;
    bottom: auto;
    background: none; 
    animation-name: slidedown;
    animation-duration: 4s;
    /*animation-iteration-count: infinite;*/   

}
@keyframes slidedown{
from{
    margin-top: -100%;        
}

to{
    margin-top: 0%;      
}
}
.ligne2 { /* boite vide pour animation ligne*/
border-right: #57B7FF solid 2px;
width: 0;
height: calc(var(--vh, 1vh) * 80);
margin-left: 10vw;
bottom: auto;
background: none; 
animation: color;
animation-duration: 2s;
/*animation-iteration-count: infinite;*/   

}
@keyframes color{
from{
    border-right: #B6DDFB solid 2px;      
}

to{
    border-right: #57B7FF solid 2px; 
}
}

.ligne3 { /* boite vide pour animation ligne*/
border-right: #C22D29 solid 2px;
width: 0;
height: calc(var(--vh, 1vh) * 80);
margin-left: 10vw;
bottom: auto;
background: none; 
animation: color2;
animation-duration: 2s;
/*animation-iteration-count: infinite;*/   

}
@keyframes color2{
from{
    border-right: #B6DDFB solid 2px;      
}

to{
    border-right: #C22D29 solid 2px; 
}
}
.ligne4 {
    border-right: #808080 solid 2px;
    width: 0;
    height: calc(var(--vh, 1vh) * 80);
    background: none; 
    z-index: 101;
    animation: color3;
    animation-duration: 2s;

}
@keyframes color3{
    from{
        border-right: #B6DDFB solid 2px;      
    }

    to{
        border-right: #808080 solid 2px; 
    }
}

nav{
    bottom: auto;
    left: 0;
    width: 10vw;
    height: calc(var(--vh, 1vh) * 100);
    z-index: 10;
    backdrop-filter: blur(5px);
}

ul{
    display: block;
    height: calc(var(--vh, 1vh) * 100);
    text-align: center;
    width: 100%;
}

li{
    width:100%;
    height: 20%;    
    animation-name: slideright;   
 
    /* animation-iteration-count: infinite;*/
 }
ul li:first-child{
    display: none;
}
ul li:nth-child(2){
    display: flex;
}
ul li:last-child{
    width: 100%;
}

li:last-child svg{
    width: 40%;
}
 
 @keyframes slideright{
     from {
         transform: translateX(-200px);
                
       }
     
       to {
         transform: translateX(0px);
         
       }
 }

.間 {
    
    display: none;
  }
.間2{
    font-size: 4.5vw;
    display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}  
a{
    font-size: calc(var(--vh, 1vh) * 6);
    height: 100%;
    display: block;
    width: 100%;
}

.color間{
    display: none;
}
.colorTonnerre{
    display: none;
}

.colorContact{
    display: none;
}

.tonnerre{
    display: none;
}
.tonnerre2{
    display: block;
    width: 100%;
}
.tonnerre2 a{
    display: block;
    font-size: 4.5vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}


.couleur{
    font-size: 0;
    height: 0;
    display: none;
}
.couleur2{
    font-size: calc(var(--vh, 1vh) * 4);
    display: block;
}
.couleur2 a{
    display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-weight: bold;
}
.couleur2 span{
    font-size: 4.5vw;
    display: block;
}

.mailto{
    font-size: 0;
    height: 100%;
    display: block;
}

.mailto img{
    display: block;
    width: 5vw;
    height: 100%;
    margin: auto;
}

li:last-child svg{
    width: 4.5vw;
    height: 100%;
    
}

.mentions{
    right: auto;
bottom: auto;
width: 99vw;
background: none;
text-align: right;
top: calc(var(--vh, 1vh) * 12);
font-size: 12px;
animation: fade 5s;
z-index: 1;
}

section{
    overflow-y: hidden;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    z-index: 1;
}
#Couleur{
    background-image: none;
}
div>img{
    height: calc(var(--vh, 1vh) * 100);
}

.間art {
    margin-left: 10vw;
    background: rgb(34,42,48);
  }
 
 @keyframes fadeIn{
     from {
         opacity: 0;
         transform: translateX(-5%);
                
       }
     
       to {
        opacity: 1;
        transform: translateX(0);
         
       }
 }

 .Tonnerre-art{
    margin-left: 10vw;
 }
 
 
 @keyframes fadeIn2{
     from {
         opacity: 0;
         transform: translateX(-5%);
                
       }
     
       to {
        opacity: 1;
        transform: translateX(0);
         
       }
 }
.decrire{
    width: 40vw;
    right: auto;
    float: left;
    height: calc(var(--vh, 1vh) * 100);
    padding-left: 0;
    left: 10vw;
    z-index: 8;
}

#Tonnerre .decrire{
    width: 30vw;
}

.galerie1{
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    z-index: 1;
    margin-left: 17vw;
    width: auto;
}
.galerie2{
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    z-index: 1;
    margin-left: 0;
}
#間 picture{
    background: rgba(34,42,48,0.8);
   
 }
 
 #Tonnerre picture{
     background: rgba(15,19,22,0.8);
     
 }
div picture img{
    height: calc(var(--vh, 1vh) * 100);
}

.間art h2{
    font-size: 5vw;
margin-bottom: 0;
position: absolute;
bottom: 0;
padding-bottom: calc(var(--vh, 1vh) * 2);
padding-top: calc(var(--vh, 1vh) * 0.5);
}



.Tonnerre-art h2{
    font-size: 3vw;
margin-bottom: 0;
position: absolute;
bottom: 0;
padding-bottom: calc(var(--vh, 1vh) * 2);
padding-top: calc(var(--vh, 1vh) * 0.5);
}

h2 span{
    font-size: 2vw;
}


.decrire textarea{
    font-size: 1.9vw;
    padding-top: 1vh;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28vw;
    height: calc(var(--vh, 1vh) * 79);
    padding-left: 1vw;
    margin-top: calc(var(--vh, 1vh) * 0);
    border-bottom: #3C4B55 solid 1px;
    padding-left: 1vw;
    padding-right: 0;
    padding-bottom: 0;
}

#間 .decrire textarea{
    font-size: 1.9vw;
padding-top: 1vh;
margin-top: 0;
position: absolute;
bottom: calc(var(--vh, 1vh) * 15);
width: 38vw;
height: calc(var(--vh, 1vh) * 79);
padding-left: 1vw;
padding-right: 0;
padding-bottom: 0;
border-bottom: #3C4B55 solid 1px;
}

.tabs{
    transform: none;
    margin-top: calc(var(--vh, 1vh) * 80);
    justify-content: center;
}

label{
    font-size: calc(var(--vh, 1vh) * 3);
transform: translateY(calc(var(--vh, 1vh) * 0));
width: 14%;
}
.tabs label:first-of-type {
    margin-left: 69%;
  }
  .galerie3 {
    height:calc(var(--vh, 1vh) * 100);
  }
.Couleur-art {
    margin-left: 10vw;
    background: #B5B5B5;
  }
 
.galerie3 div:first-child{
    left: 11vw;
    z-index: 0;
    }  

.galerie3 p{
    font-size: 2vw;
    margin-top: 58vh;
   height: auto;
}
.galerie3 div:last-child {
    width: 175vw;
    margin-right: 25vw;
    margin-left: 7vw;
    justify-content: space-between;
    align-self: center;
    z-index: 2;
}
#Couleur div img {
    height: calc(var(--vh, 1vh) * 30);
}
#Couleur .galerie3 div:last-child img {
    height: calc(var(--vh, 1vh) * 100);
    box-shadow: none;
    transition: none;
}
 /*article Couleur > animation: fadeIn3 ease 5s 1;*/
 @keyframes fadeIn3{
    from {
        opacity: 0;
        margin-left: -400vw;
        transform: translateY(0);
               
      }
    
      to {
       opacity: 1;
        
      }
}

@keyframes colorTransition3{
    from{
        background-color: rgba(15, 19, 22, 1);
    }
    to{
        background-color: rgba(15, 19, 22, 0.9);
    }
}

@keyframes colorTransition4{
    from{
        background-color: #222A30;
        color: #ffffff;
        stroke: #ffffff;
    }
    5%{
        background-color: rgba(181, 181, 181,0.9);
    }
    to{
        background-color: rgba(181, 181, 181,0.9);
        color: #222A30;
        stroke: #222A30;
    }
}
}









/*Tablette Paysage*/
@media screen and (min-width:940px) and (max-width:1260px) and (orientation: landscape), (not(hover)){
    body{
        width: auto;
    }    
    
    .anim間{
        z-index: 0;
    }
    
    .animTonnerre{
        z-index: 0;
    }
    
h1{
    font-size: 5vw;
    bottom: auto;
    margin: 0;
    width: 99vw;
    text-align: right;
    padding-left: 0;
    z-index: 1;
    animation: slideleft 4s; 
    /*animation-iteration-count: infinite; pour régler animation*/
    
}
@keyframes slideleft{
    from{
        
        transform: translateX(100px);
        opacity: 0;
    }
    30%{
        opacity: 0;
    }
    to{
       
        transform: translateX(0);
        opacity: 1;
    }
}
.mentions{
    right: auto;
bottom: auto;
width: 99vw;
background: none;
text-align: right;
top: calc(var(--vh, 1vh) * 8);
font-size: 12px;
animation: fade 5s;
z-index: 1;
}
.ligne{
    border-top: none;
    border-right: #B6DDFB solid 2px;
    width: 0;
    height: calc(var(--vh, 1vh) * 80);
    margin-left: 10vw;
    bottom: auto;
    background: none; 
    animation-name: slidedown;
    animation-duration: 4s;
    /*animation-iteration-count: infinite;*/   

}
@keyframes slidedown{
from{
    margin-top: -100%;        
}

to{
    margin-top: 0%;      
}
}

.ligne2 { /* boite vide pour animation ligne*/
border-right: #57B7FF solid 2px;
width: 0;
height: calc(var(--vh, 1vh) * 80);
margin-left: 10vw;
bottom: auto;
background: none; 
animation: color;
animation-duration: 2s;
/*animation-iteration-count: infinite;*/   

}
@keyframes color{
from{
    border-right: #B6DDFB solid 2px;      
}

to{
    border-right: #57B7FF solid 2px; 
}
}

.ligne3 { /* boite vide pour animation ligne*/
border-right: #C22D29 solid 2px;
width: 0;
height: calc(var(--vh, 1vh) * 80);
margin-left: 10vw;
bottom: auto;
background: none; 
animation: color2;
animation-duration: 2s;
/*animation-iteration-count: infinite;*/   

}
@keyframes color2{
from{
    border-right: #B6DDFB solid 2px;      
}

to{
    border-right: #C22D29 solid 2px; 
}
}

.ligne4 {
    border-right: #808080 solid 2px;
    width: 0;
    bottom: auto;
    height: calc(var(--vh, 1vh) * 80);
    background: none; 
    z-index: 101;
    animation: color3;
    animation-duration: 2s;

}
@keyframes color3{
    from{
        border-right: #B6DDFB solid 2px;      
    }

    to{
        border-right: #808080 solid 2px; 
    }
}

nav{
    bottom: auto;
    left: 0;
    width: 10vw;
    height: calc(var(--vh, 1vh) * 100);
    z-index: 10;
    background-color: transparent;
    backdrop-filter: blur(5px);
    }

ul{
    display: block;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    text-align: center;
}

li{
    width:100%;
    height: 20%;    
    animation-name: slideright;   
 
    /* animation-iteration-count: infinite;*/
 }
ul li:first-child{
    width: 100%;
    display: none;
}
ul li:nth-child(2){
    display: flex;
}
ul li:last-child{
    width: 100%;
}
 
 
 @keyframes slideright{
     from {
         transform: translateX(-200px);
                
       }
     
       to {
         transform: translateX(0px);
         
       }
 }
.間2 {
    font-size: 4.5vw;
    display: flex;
align-items: center;
justify-content: center;
width: 100%;
  }

a{
    font-size: calc(var(--vh, 1vh) * 6);
    height: 100%;
    display: block;
}

.color間{
    display: none;
}
.colorTonnerre{
    display: none;
}

.colorContact{
    display: none;
}

.tonnerre{
    display: none;
}
.tonnerre2{
    display: block;
    width: 100%;
}
.tonnerre2 a{
    font-size: 4.5vw;
    height: 100%;
    display: flex;
align-items: center;
justify-content: center;
}


.couleur{
    font-size: 0;
    height: 0;
    display: none;
}
.couleur2{
    font-size: calc(var(--vh, 1vh) * 4);
    display: block;
}
.couleur2 a{
    display: flex;
align-items: center;
justify-content: center;
}
.couleur2 span{
    display: block;
}

.mailto{
    font-size: 0;
    height: 100%;
    display: block;
    width: 100%;
}

.mailto img{
    display: block;
    width: 4.5vw;
    height: 100%;
    margin: auto;
}

li:last-child svg {
    width: 40%;
  }



section{
    overflow-y: hidden;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    z-index: 1;
}

div>img{
    height: calc(var(--vh, 1vh) * 100);
}
.間art {
    margin-left: 10vw;
    background: rgba(34,42,48,0.9);
  } 
 
 @keyframes fadeIn{
     from {
         opacity: 0;
         transform: translateX(-5%);
                
       }
     
       to {
        opacity: 1;
        transform: translateX(0);
         
       }
 }

 .Tonnerre-art {
    margin-left: 10vw;
  }


 
.decrire{
    width: 35vw;
    right: auto;
    float: left;
    height: calc(var(--vh, 1vh) * 100);
    padding-left: 0;
    left: 10vw;
    z-index: 8;
    backdrop-filter: blur(3px);
}

#Tonnerre .decrire{
    width: 100vw;
    right: auto;
    float: left;
    height: calc(var(--vh, 1vh) * 29);
    padding-left: 0;
    left: 10vw;
    z-index: 8;
    margin-top: calc(var(--vh, 1vh) * 71);
  
}

/*anim decrire à affiner tablet paysage*/
@keyframes fade2{
    from {
        opacity: 0;
        transform: translateX(50vw);
               
      }
    70%{
        opacity: 0;
        transform: translateX(12vw);
    }
    
    to {
       opacity: 1;
       transform: translateX(0);
      }

 }
.間art h2{
    font-size: 4vw;
margin-bottom: 0;
position: absolute;
bottom: 0;
padding-bottom: calc(var(--vh, 1vh) * 2);
padding-top: calc(var(--vh, 1vh) * 0.5);
}


.Tonnerre-art h2{
    font-size: 2.2vw;
margin-bottom: 0;
position: absolute;
bottom: 0;
padding-bottom: calc(var(--vh, 1vh) * 5);
padding-top: calc(var(--vh, 1vh) * 0.5);
}

h3{
    margin-top: calc(var(--vh, 1vh) * 88);
    
}

.decrire textarea{
    font-size: 1.6vw;
padding-top: 0;
position: absolute;
width: 34vw;
bottom: 0;
top: calc(var(--vh, 1vh) * 0);
padding-top: calc(var(--vh, 1vh) * 2);
height: calc(var(--vh, 1vh) * 78);
backdrop-filter: blur(5px);
} 

#Tonnerre h2 span{
    transform: translate(-9vw,3vh);
}

#Tonnerre .decrire textarea{
    bottom: calc(var(--vh, 1vh) * 1);
    top: calc(var(--vh, 1vh) * 1);
width: 60vw;
height: calc(var(--vh, 1vh) * 24.5);
margin-left: 16vw;
padding: 0;
border-bottom: none;
border-top: #3C4B55 solid 2px;
padding-top: calc(var(--vh, 1vh) * 1);

}

.tabs{
    transform: none;
    margin-top: calc(var(--vh, 1vh) * 80.5);
}
.tabs label:first-of-type {
    margin-left: 72%;
  }
label{
    font-size: calc(var(--vh, 1vh) * 2);
transform: none;
width: 14%;
color: #9DBCD0;
}

#Tonnerre .tabs{
    margin-top: calc(var(--vh, 1vh) * 0);
}
#Tonnerre label:first-of-type {
    margin-left: 76%;
  }
#Tonnerre label{
    transform: translateY(calc(var(--vh, 1vh) * 1));
    width: 4vw;
}

.galerie1{
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    z-index: 1;
    padding-left: 2vw;
    background: #222A30;
    width: auto;
}
.galerie2{
    height: calc(var(--vh, 1vh) * 72);
    position: relative;
    z-index: 1;
    margin-left: -84vw;
}

#間 picture{
   background: rgba(34,42,48,0.8);
   height: calc(var(--vh, 1vh) * 70);
}

#Tonnerre picture{
    background: rgba(15,19,22,0.8);
    height: calc(var(--vh, 1vh) * 70);
}

div picture img{
    height: calc(var(--vh, 1vh) * 100);
}

div img:focus{
    height: calc(var(--vh, 1vh) * 93);
    box-shadow: rgba(34,42,48,0.8) 40vw 0px 0px 40vw, rgba(34,42,48,0.8) -40vw 0px 0 40vw;
    position: relative;
    z-index: 20;
    transition: 0.4s ease-in-out;
    image-rendering: pixelated;
}
.galerie2 picture img{
    height: calc(var(--vh, 1vh) * 70);
}

#Couleur{
    background-image: none;
}

.Couleur-art {
    margin-left: 0;
}  

.galerie3{
    height: calc(var(--vh, 1vh) * 100);
}

.galerie3 p{
    height: 100%;
    width: fit-content;
    margin-left: 1vw;
    padding-bottom: 2vh;
    align-self: end;
    align-items: end;
    justify-content: center;
    font-size: calc(var(--vh, 1vh) * 2.2);
}
.galerie3 p i {
   
    height: fit-content;
}


#Couleur .galerie3 div {
    width: none;
  }

.galerie3 div{
    width: none;
    justify-content: space-between;
    align-self: auto;

}

#Couleur .galerie3 div:first-child {
    width: 45vw;
    height: calc(var(--vh, 1vh) * 100);
    padding-left: 10vw;
    align-self: start;
    left: 0;
    z-index: 1;
  }

  #Couleur .galerie3 div:last-child {
    height: calc(var(--vh, 1vh) * 78);
    width: max-content;
    align-self: start;
    margin-left: 0;
    z-index: 1;
    gap: 1vw;
  }
  .galerie3 picture {
    align-self: start;
  }

#Couleur .galerie3 div img {
    height: calc(var(--vh, 1vh) * 78);
    box-shadow: none;
}


 /*article Couleur > animation: fadeIn3 ease 5s 1;*/
 @keyframes fadeIn3{
    from {
        opacity: 0;
        margin-left: -600vw;
        transform: translateY(0);
               
      }
   
      to {
       opacity: 1;
        
      }
}

@keyframes colorTransition3{
    from{
        background-color: rgba(15, 19, 22, 0.5);
    }
    to{
        background-color: rgba(15, 19, 22, 1);
    }
}

@keyframes colorTransition4{
    from{
        background-color: #000000;
        color: #ffffff;
        stroke: #ffffff;
        background-image: none;
    }
    50%{
        background-color: rgba(100, 100, 100, 0.5);
    }
    to{
        background-color: rgba(181, 181, 181,0.9);
        color: #222A30;
        stroke: #222A30;
        background-image: none;
    }
}

}