html, body {
   height: 100%;
}
body {
   font-family: Arial, sans-serif;
   font-size: 16px;
   padding-bottom: 50px;
}
.menu a:link, .menu a:visited {
   color: #333;
}
.menu a:hover, .menu a:active {
   text-decoration: underline;
}
.illu {
   max-width: 45vw; 
   margin: 4% auto 0;
}

svg {
   display: block;
   height: auto;
   max-width: 45vw; 
   margin: 4% auto 0;
   opacity: 0;
   animation: fade 1s 1s 1 forwards ease-in;
}

.st1/*, .st2*/ {
   stroke-dasharray: 947;
   stroke-dashoffset: 947;
   opacity: 0;
   animation: build 3.25s 2.25s 1 forwards ease-in-out;
}

@keyframes build {
   0% {
      stroke-dashoffset: 947;
      opacity: 0;
   }
   10% {
      opacity: 1;
   }
   99.9% {
      stroke-dasharray: 947;
      opacity: 1;
   }
   100% {
      stroke-dasharray: 0;
      stroke-dashoffset: 0;
      opacity: 1;
   }
}

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

@media only screen and (max-width: 820px) {
   svg, .illu {
      max-width: 75vw; 
      margin: 14% auto 0;
   }
   
}