tagblog/css/404-crt.css

section#content {
  height:90%;
}
section#content > * {
  background-color: black;
  /* amber */
  background-image: radial-gradient(
    #50100E, #170708 80%
  );
  position: relative;
  /* amber bg */
  border: 0.1em solid rgba(80,16,14,0.5);
  border-radius: .3em;
  box-shadow: 0 0 8px 3px #170708;
  margin:.5rem;
  padding: .5rem;
}
/*
Thanks to http://aleclownes.com/2017/02/01/crt-display.html for the CRT effects!
*/

article.fullpage::before,article.fullpage::after {
  /* needs to be calculated from parent element border radius and thickness */
  border-radius:.2em;
}
article.fullpage > *::before {
  content:"$> ";
}
article.fullpage > *:last-child::after {
  content:"█";
  display: block;
  animation: cursor-blink 1s infinite;
}
article.fullpage *, article.fullpage * * {
  /* amber */
  color: #FFCD2F;
  font: 1rem monospace;
  /* amber */
  text-shadow: 0 0 .3em #FFCD2F, 0 0 .5em #FFCD2F, 0 0 .1em #FFCD2F;
  padding:0;
}
article.fullpage::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* amber */
  background: rgba(255,205,47,0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: crt-flicker 0.5s infinite;
}
article.fullpage::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(0,0,0, 0.1) 50%, rgba(0, 0, 0,0.2) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(0, 255, 0, 0.05), rgba(0, 0, 255, 0.05));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  section#content > * {
    border-radius: .5em;
    padding: 1rem;
    width:90%;
    height:90%;
    margin:5%;
  }
  article.fullpage::before,article.fullpage::after {
    /* needs to be calculated from parent element border radius and thickness */
    border-radius:.4em;
  }
  article.fullpage *, article.fullpage * * {
    font-size: 1.5rem;
  }
}

/* blinking cursor */
@keyframes cursor-blink {
  0% { opacity:1; }
  50% { opacity:1; }
  60% { opacity:0; }
  80% { opacity:0; }
}
/*
ORIGINAL
@keyframes crt-flicker {
  0% {    opacity: 0.27861;  }
  5% {    opacity: 0.34769;  }
  10% {    opacity: 0.23604;  }
  15% {    opacity: 0.90626;  }
  20% {    opacity: 0.18128;  }
  25% {    opacity: 0.83891;  }
  30% {    opacity: 0.65583;  }
  35% {    opacity: 0.67807;  }
  40% {    opacity: 0.26559;  }
  45% {    opacity: 0.84693;  }
  50% {    opacity: 0.96019;  }
  55% {    opacity: 0.08594;  }
  60% {    opacity: 0.20313;  }
  65% {    opacity: 0.71988;  }
  70% {    opacity: 0.53455;  }
  75% {    opacity: 0.37288;  }
  80% {    opacity: 0.71428;  }
  85% {    opacity: 0.70419;  }
  90% {    opacity: 0.7003;  }
  95% {    opacity: 0.36108;  }
  100% {    opacity: 0.24387;  }
}
*/
@keyframes crt-flicker {
  0% {    opacity: 0.2;  }
  5% {    opacity: 0.4;  }
  15% {    opacity: 0.3;  }
  20% {    opacity: 0.2;  }
  25% {    opacity: 0.4;  }
  35% {    opacity: 0.3;  }
  40% {    opacity: 0.2;  }
  45% {    opacity: 0.4;  }
  55% {    opacity: 0.3;  }
  60% {    opacity: 0.2;  }
  65% {    opacity: 0.4;  }
  75% {    opacity: 0.3;  }
  80% {    opacity: 0.2;  }
  85% {    opacity: 0.4;  }
  95% {    opacity: 0.3;  }
  100% {    opacity: 0.2;  }
}