:root {
  --dark-sky: rgba(0, 0, 0, 1.0);
  --midnight: rgba(10, 11, 10, 1.0);
  --marble: rgba(250, 250, 250, 1.0);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background: var(--dark-sky);
}

.md-fl {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.md-svg {
    fill: var(--midnight);
    margin: auto;
    width: 60vw;
    opacity: 1.0;
    animation: fade ease-out 800ms;
    animation-iteration-count: 1;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1.0;
    }
}

/* .md-svg .md-shine {
    fill: var(--marble);
    transform: skew(-20deg) translateX(104px);
    animation: shine 1s;
    animation-delay: 5s
} */

/* @keyframes shine {
    0% {
        transform: skew(-30deg) translateX(-24px);
    }
    100% {
        transform: skew(-30deg) translateX(1200px);
    }
} */