body {
    margin: 0;
    max-width:100%;
    max-height:100%;
    background-color: #000;
}
.venue-video{
    position:fixed;
    top: 0;
    left: 0;
    filter: grayscale();
    opacity: 20%;
    width: 100%;
    z-index: -1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
}
@-moz-document url-prefix(){
    .venue-video{
        filter: grayscale() brightness(0.1);
    }
}
div.weddingCouple.coupleShared, div.save-the-date {
    margin-top: -5%;
    max-width: 50%;
    margin-left:auto;
    margin-right:auto;
}
.date {
    font-size: 6vw;
    color: darkgoldenrod;
    font-family: fantasy,calibri;
    position: relative;
    text-align: center;
    animation: fade-in 15s;
}
.alex-path {
    /* 3934.002 */
    animation: draw-alex 10s;
    stroke-dasharray: 3934.002;
    fill: #444;
    fill-opacity: 30%;
}
.ash-path {
    /* 7510.58 */
    animation: draw-ash 10s;
    stroke-dasharray: 7510.58;
    fill:black;
    fill-opacity: 30%;
}
.outline-path {
    stroke: darkgoldenrod; 
    /* 4404.006 */
    animation: draw-outline 10s;
    stroke-dasharray: 4404.006;
    animation-name: draw-outline, 10;
    fill: rgb(255, 255, 255);
    fill-opacity: 30%;
}
div.weddingCouple.coupleShared > svg > path {
    stroke: darkgoldenrod; 
    stroke-width: 4px;
}
.save-the-date-path {
    stroke: darkgoldenrod; 
    stroke-width: 4px;
    /* 5734.118 */
    animation: draw-std 15s;
    stroke-dasharray: 5734.118;
    fill: none;
    margin-top: 20%;
}

  @keyframes draw-alex {
    from {
        stroke-dashoffset: 3934.002;
        fill-opacity: 0;
    }
    50%{
        fill-opacity: 0;
    }
    66% {
      stroke-dashoffset: 0;
    }
    to {
        fill-opacity: 30%;
    }
  }
  @keyframes draw-ash {
    from {
        stroke-dashoffset: 7510.58;
        fill-opacity: 0;
    }
    50%{
        fill-opacity: 0;
    }
    66% {
      stroke-dashoffset: 0;
    }
    to {
        fill-opacity: 30%;
    }
  }
  @keyframes draw-std {
    from {
        stroke-dashoffset: 5734.118;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  
  @keyframes draw-outline {
    from {
        stroke-dashoffset: 4404.006;
        fill-opacity: 0;
    }
    50%{
        fill-opacity: 0;
    }
    66% {
      stroke-dashoffset: 0;
    }
    to {
        fill-opacity: 30%;
    }
  }
  @keyframes fade-in {
    from {
        opacity: 0;
    }
    to{
        opacity: 1;
    }
  }
  @keyframes fill-in {
    from{
        fill-opacity: 0;
    }
    to {
        fill-opacity: 1;
    }
  }