body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #DEDEDE;
  color: black;
}
h1 {
    font-size: 15px;
    color: white;
    text-align: center;
    position: absolute;
    width: 100%;
}
h2 {
    font-size: 15px;
    color: white;
    position: absolute;
    text-align: right;
    width: 100%;
    bottom: 0%;
}

#affiche {
  overflow: hidden;
  position: relative;
  width: 64vh;
  height: 90vh;
  background: #D25220;
}
#terrain_1 {
  stroke-dasharray:2000;
  transition: stroke-dasharray 20s;
  stroke-dashoffset:2000;
}

#affiche.activated #terrain_1 {
  stroke-dasharray:1000;
}

#terrain_2 {
  stroke-dasharray:2000;
  transition: stroke-dasharray 20s;
  stroke-dashoffset:2000;
}

#affiche.activated #terrain_2 {
  stroke-dasharray:1000;
}
#ligne_verticale_1{
  stroke-dasharray:1000;
  transition: stroke-dasharray 15s;
  stroke-dashoffset:1000;
}
#affiche.activated #ligne_verticale_1{
  stroke-dasharray:1650;
}

#ligne_verticale_2{
  stroke-dasharray:1000;
  transition: stroke-dasharray 15s;
  stroke-dashoffset:1000;
}
#affiche.activated #ligne_verticale_2{
  stroke-dasharray:1650;
}

#ligne_horizontale_1{
  stroke-dasharray:500;
  transition: stroke-dasharray 30s;
  stroke-dashoffset:500;
}
#affiche.activated #ligne_horizontale_1{
  stroke-dasharray:1000;
}

#ligne_horizontale_2{
  stroke-dasharray:500;
  transition: stroke-dasharray 30s;
  stroke-dashoffset:500;
}
#affiche.activated #ligne_horizontale_2{
  stroke-dasharray:1000;
}

#ligne_centrale{
  stroke-dasharray:500;
  transition: stroke-dasharray 30s;
  stroke-dashoffset:500;
}
#affiche.activated #ligne_centrale{
  stroke-dasharray:1000;
}

#filet{
  stroke-dasharray:500;
  transition: stroke-dasharray 20s;
  stroke-dashoffset:500;
}
#affiche.activated #filet{
  stroke-dasharray:1000;
}

#texte {
    opacity: 0;
}

#affiche.activated #texte{
    transition: all 20s;
    opacity: 1;
}

/* ---------------------------------------------------------------------- balle de tennis */

#tennis-ball {
  position: absolute;
  overflow: hidden;
  height: 15em;
  width: 15em;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #cc0;
  background: radial-gradient(ellipse at center, #cc0 0%, darken(#cc0, 15) 100%);;
  box-sizing: border-box;
  margin: -7.5em 0 0 -7.5em;
  box-shadow: 10px 20px 25px 10px rgba(#000, .2);
  }

#before{
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    border: solid 1em #fff;
    border-radius: 50%;
    box-sizing: border-box;
    right: 70%;
    }
#after{
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    border: solid 1em #fff;
    border-radius: 50%;
    box-sizing: border-box;
    left: 70%;
    }

#tennis-ball {
        opacity: 1;
        cursor: pointer;
        animation-name: show;
        animation-duration: 1s;
        animation-fill-mode: both;
    }

/*#affiche:hover #tennis-ball{
        transition: all 35s;
        opacity: 0;
  }*/

#tennis-ball {
    cursor: pointer;
    animation: clicked  2.5s alternate infinite;
    transition: all 500ms;
}

#tennis-ball.invisible {
    /*opacity: 0;*/
    margin-top: 200vh;

}

@keyframes clicked {
    0% {
        transform: scale(1) rotate(90deg);
    }
    100% {
        transform: scale(1.2) rotate(130deg);
    }
}
}