@font-face {
  font-family: 'optima';
  src: url(font/optimabold.otf) format('opentype')
}


body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #DEDEDE;
  color: black;
  font-family: 'optima';
}
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, #chiffres {
  position: absolute;
}
#terrain_1 {
  stroke-dasharray:1600;
  transition: stroke-dasharray 5s;
  stroke-dashoffset:1600;
}

.affichage_terrain #affiche #terrain_1 {
  stroke-dasharray:3500;
  transition-delay: 5s;
}

#terrain_2 {
  stroke-dasharray:1600;
  transition: stroke-dasharray 5s;
  stroke-dashoffset:1600;
}

.affichage_terrain #affiche #terrain_2 {
  stroke-dasharray:3500;
  transition-delay: 5s;
}
#ligne_verticale_1{
  stroke-dasharray:1000;
  transition: stroke-dasharray 5s;
  stroke-dashoffset:1000;
}
.affichage_terrain #affiche #ligne_verticale_1{
  stroke-dasharray:2000;
  transition-delay: 5s;
}

#ligne_verticale_2{
  stroke-dasharray:1000;
  transition: stroke-dasharray 5s;
  stroke-dashoffset:1000;
}
.affichage_terrain #affiche #ligne_verticale_2{
  stroke-dasharray:2000;
  transition-delay: 5s;
}

#ligne_horizontale_1{
  stroke-dasharray:500;
  transition: stroke-dasharray 5s;
  stroke-dashoffset:500;
}
.affichage_terrain #affiche #ligne_horizontale_1{
  stroke-dasharray:1200;
  transition-delay: 5s;
}

#ligne_horizontale_2{
  stroke-dasharray:500;
  transition: stroke-dasharray 5s;
  stroke-dashoffset:500;
}
.affichage_terrain #affiche #ligne_horizontale_2{
  stroke-dasharray:1200;
  transition-delay: 5s;
}

#ligne_centrale{
  stroke-dasharray:600;
  transition: stroke-dasharray 5s;
  stroke-dashoffset:600;
}
.affichage_terrain #affiche #ligne_centrale{
  stroke-dasharray:1200;
  transition-delay: 5s;
}

#filet{
  stroke-dasharray:635;
  transition: stroke-dasharray 5s;
  stroke-dashoffset:635;
  stroke:black;

}
.affichage_terrain #affiche #filet{
  stroke-dasharray:1258;
  transition-delay: 5s;
}


#texte {
    opacity: 0;
}

.affichage_terrain #affiche #texte{
    transition: all 3s;
    opacity: 1;
}


#chiffres {

}
#D{
  stroke-dasharray:1200;
  transition: all 7s;
  stroke-dashoffset:1200;
  transition-delay: 0;
}
.loaded #D {
  stroke-dashoffset:0;
}

#Z{
  stroke-dasharray:920;
  transition: all 10s;
  stroke-dashoffset:920;
  transition-delay: 0;
}
.loaded #Z {
  stroke-dashoffset:0;
}

#H1{
  stroke-dasharray:1300;
  transition: all 7s;
  stroke-dashoffset:1300;
  transition-delay: 0;
}
.loaded #H1 {
  stroke-dashoffset:0;
}

#U_1_{
  stroke-dasharray:1300;
  transition: all 5s;
  stroke-dashoffset:1300;
  transition-delay: 0;
}
.loaded #U_1_ {
  stroke-dashoffset:0;
}

.affichage_terrain.loaded #U_1_,
.affichage_terrain.loaded #H1,
.affichage_terrain.loaded #U,
.affichage_terrain.loaded #Z,
.affichage_terrain.loaded #D {
  stroke-dashoffset:1300;
}

#affiche {
  cursor: pointer;
}