* {
    padding: 0;
    margin: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #000;
    color: #860909;
}

svg { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%;
    height: 100%;
}

.c {
    animation: fireFlicker 15s infinite;
}

.fire {
    animation: fireFlicker2 2s infinite linear;
}

@font-face {
    font-family: 'Spacedock Stencil';
    src: url('./fonts/spacedock-stencil.ttf') format('truetype');
}
span {
    font-family: "Spacedock Stencil";
    position: fixed;
    bottom: 2rem;
    font-size: 5rem;
    width: 100%;
    text-align: center;
    animation: fade-in 5s ease;
}

@media only screen and (max-width: 800px) {
    span {
        font-size: 3rem;
    }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fireFlicker {
    0% { opacity: 0.9; }
    15% { opacity: 0.93; }
    22% { opacity: 0.926; }
    25% { opacity: 0.98; }
    39% { opacity: 0.92; }
    44% { opacity: 0.93; }
    49% { opacity: 0.926; }
    52% { opacity: 0.98; }
    57% { opacity: 0.94; }
    60% { opacity: 0.97; }
    65% { opacity: 0.98; }
    77% { opacity: 0.926; }
    90% { opacity: 0.97; }
    100% { opacity: 0.9; }
}

@keyframes fireFlicker2 {
    0%, 10% { opacity: 1; }
    15%,20% { opacity: 0.977; }
    22%,23% { opacity: 0.963; }
    25%,35% { opacity: 0.962; }
    39%,42% { opacity: 0.958; }
    44%,47% { opacity: 0.967; }
    49%,50% { opacity: 0.953; }
    52%,54% { opacity: 0.962; }
    57%,58% { opacity: 0.966; }
    60%,63% { opacity: 0.953; }
    65%,72% { opacity: 0.962; }
    77%,85% { opacity: 0.973; }
    90%,95% { opacity: 0.953; }
    100% { opacity: 1; }
}