@font-face {
    font-family: 'f25bank';
    src: url("F25_Bank_Printer_Bold.ttf");
}

body {
    background-color: #000000;
    overflow: hidden;
    color: white;
    margin: 0;
    padding: 0;
    font-family: 'f25bank';
    font-size: 2vh;
}
.repeating {
    background-blend-mode: color-burn;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    animation: hole 2s linear infinite forwards;
}
.repeating p {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    height : 2vh;
    width : 50vw;
    margin: auto;
    animation: wiggle .1s linear infinite;
}

.repeating p::after {
    content: "NULL";
    animation: dialogue 60s linear infinite;
}

@keyframes hole {
    0% {
        background-image:
        radial-gradient(circle at center,
            #000000 5%,
            #3a0000 100%
        ),
        repeating-radial-gradient(circle at center,
            #2c2c2c 0%,
            #00000088 4%,
            transparent 5%,
            transparent 9%,
            #2c2c2c 10%
        );
    }
    50% {
        background-image:
        radial-gradient(circle at center,
            #000000 5%,
            #3a0000 100%
        ),
        repeating-radial-gradient(circle at center,
            transparent 0%,
            transparent 4%,
            #2c2c2c 5%,
            #00000088 9%,
            transparent 10%
        );
    }
    100% {
        background-image:
        radial-gradient(circle at center,
            #000000 5%,
            #3a0000 100%
        ),
        repeating-radial-gradient(circle at center,
            transparent 0%,
            transparent 4%,
            #2c2c2c 5%,
            #00000088 9%,
            transparent 10%
        );
    }
}

@keyframes wiggle {
    0% { transform: translate(1px, 1px); }
    10% { transform: translate(1px, -2px); }
    20% { transform: translate(-3px, 2px); }
    30% { transform: translate(-1px, 1px); }
    40% { transform: translate(2px, -2px); }
    50% { transform: translate(-2px, 2px); }
    60% { transform: translate(1px, 1px); }
    70% { transform: translate(3px, -3px); }
    80% { transform: translate(-2px, 3px); }
    90% { transform: translate(-1px, 2px); }
    100% { transform: translate(4px, -1px); }
}

@keyframes dialogue {
    0% { content: "When I was 12, I fell into a well."; }
    10% { content: "Pitching down the inky mosscakes,"; }
    20% { content: "Shining plate yawning above."; }
    30% { content: "A seeping thud and everything still."; }
    40% { content: "Paws and maws scratching at porcelain,"; }
    50% { content: "Excavating glittering ruby."; }
    60% { content: "Hulking opals taken from hollow coffers."; }
    70% { content: "In places, pasty white bedrock unearthed,"; }
    80% { content: "Before the treasure-laden rises up again."; }
    90% { content: "Sobbing wheezes, a little bruised wrist."; }
    100% { content: "My daughter, you look so beautiful."; }
}