.crt-container {
    position: relative;
    min-height: 100vh;
    overflow: hidden;

    background: #000;
    color: #00ff41;
    font-family: 'Garamond', monospace;

    /* RGB color separation */
    text-shadow:
        -1px 0 rgba(255,0,0,.35),
         1px 0 rgba(0,0,255,.35),
         0 0 5px rgba(0,255,65,.75),
         0 0 10px rgba(0,255,65,.4);

    /* Curved screen */
    border-radius: 12px;

    box-shadow:
        inset 0 0 120px rgba(255,255,255,.05),
        inset 0 0 200px rgba(0,0,0,.6);

    animation:
        startup .8s ease-out,
        textFlicker .15s infinite;
}

/* scanlines */

.crt-container::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.04) 0px,
            rgba(255,255,255,.04) 2px,
            transparent 2px,
            transparent 4px
        );

    pointer-events: none;
    z-index: 2;
}

/* overlay */

.crt-container::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,0) 60%,
            rgba(0,0,0,.45) 100%
        );

    pointer-events: none;
    z-index: 3;

    animation: flicker .15s infinite;
}

/* le text flickering */

@keyframes textFlicker {

    0% {
        opacity: .98;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .97;
    }
}

/* le flickering */

@keyframes flicker {

    0% {
        opacity: .20;
    }

    20% {
        opacity: .10;
    }

    40% {
        opacity: .25;
    }

    60% {
        opacity: .12;
    }

    80% {
        opacity: .18;
    }

    100% {
        opacity: .22;
    }
}

/* power up effect */

@keyframes startup {

    0% {
        transform: scaleY(0);
        opacity: 0;
    }

    40% {
        transform: scaleY(.02);
        opacity: 1;
    }

    70% {
        transform: scaleY(1.02);
    }

    100% {
        transform: scaleY(1);
    }
}