/* https://github.com/D3nn7/crt-css?tab=readme-ov-file */
/* https://geekflare.com/dev/double-border-in-css/ */
/* https://codepen.io/albpara/pen/JjRarO */
/* https://codepen.io/thebabydino/pen/vENZRYK */
/* https://codepen.io/lobotomy/pen/gOrdEKN */
/* https://css-tricks.com/old-timey-terminal-styling/ */

@keyframes textflicker {
    from {
        text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
    }
    to {
        text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
    }
}

.crt {
    padding: 1em;
    font-size: 1em;
    line-height: 1;
    text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
    letter-spacing: 0.125em;
    animation-duration: 0.01s;
    animation-name: textflicker;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width: 100%;
    margin: auto;
    background-color: #111111;
    border-radius: 0.7em;
}

.crt-bezel {
    border: solid 10px;
    border-color: greenyellow;
    border-style: double;
    border-radius: 1.3em;
    width: 60%;
    margin: auto;
    padding-right: 2em;
    background-color: #111111;
}

.crt-text {
    color: white;
    
}