@import url("https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css");

:root {
    --light-colour: #F9ECCC;
    --dark-colour: #587D71;
    --text-size-large: 8rem;
    --text-size-small: 6rem;
    --typewriterSpeed: 5s;
    --textLength: ;
}

body {
    background-color: var(--light-colour);
    font-family: 'VT323', monospace;
    overflow-y: hidden; /* Hide vertical scrollbar */
    overflow-x: hidden; /* Hide horizontal scrollbar */
}

#text-top-bottom {
    font-size: var(--text-size-small);
}

#text-middle {
    font-size: var(--text-size-large);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: max-content;
}

/* Text animation */
#text-middle::before, 
#text-middle::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#text-middle::before {
    background: var(--light-colour);
    animation: typewriter var(--typewriterSpeed) steps(var(--textLength)) 1s forwards;
    animation-delay: 1s;
}

#text-middle::after {
    width: 0.3rem;
    background: black;
    animation:
        typewriter var(--typewriterSpeed) steps(var(--textLength)) 1s forwards,
        blink 750ms steps(var(--textLength)) infinite;
}

@keyframes typewriter {
    to { 
        left: 100%;
    }
}

@keyframes blink {
    to {
        background: transparent;
    }
}