/* SVG animation inside main rectangle */
.svgwrapper {
  width: 70%;
  max-width: 420px;
  transition: transform .4s ease;
}

.main-rectangle:hover .svgwrapper {
  transform: scale(.95);
  cursor: pointer;
}

/* Override SVG stroke color for dark theme */
.parc,
.ptrait,
.ierrick,
.pointi1,
.pointi2 {
  stroke: #ccc;
}

/* --- Animations --- */

.parc {
  stroke-dasharray: 279;
  stroke-dashoffset: 279;
  stroke-width: 6;
  animation: parc 2s ease-in-out forwards;
}
@keyframes parc { to { stroke-dashoffset: 0; } }

.ptrait {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  stroke-width: 10;
  animation: ptrait .5s .5s ease-in-out forwards;
}
@keyframes ptrait { to { stroke-dashoffset: 0; } }

.ierrick {
  stroke-dasharray: 323;
  stroke-dashoffset: 323;
  stroke-width: 4;
  animation: ierrick .75s .8s ease-in forwards;
}
@keyframes ierrick {
  to { stroke-width: 6; stroke-dashoffset: 0; }
}

.pointi1 { opacity: 0; animation: pointi1 .25s .75s ease-in forwards; }
.pointi2 { opacity: 0; animation: pointi2 .25s 1.15s ease-in forwards; }
@keyframes pointi1 { to { opacity: 1; } }
@keyframes pointi2 { to { opacity: 1; } }