.crt { margin: 1rem 0 1rem; border-radius: var(--rounded-corner); box-shadow: var(--glow); background: var(--crt-bg); pre { color: var(--primary-color); padding: 1rem 1rem; text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px; // Unset some
stuff
background-color: unset;
box-shadow: unset;
margin: unset;
}
}
.scanlines {
position: relative;
overflow: hidden;
}
.scanlines::after {
animation: scanlines 250ms linear infinite;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.25) 1px,
transparent 3px,
transparent 4px
);
content: "";
display: block;
height: calc(100% + 8px);
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
@keyframes scanlines {
from {
transform: translateY(-8px);
}
to {
transform: translateY(0px);
}
}
}
.cursor {
animation: blicking 1s infinite;
@keyframes blicking {
from {
opacity: 1;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
}
}