style.css

#contact:after {
   content: ' « Luciano Pereira B.B.S. »\00a0';
   cursor: pointer
}

#contact:hover:after {
   content: ' « Lµ¢iªn0 pӖЯӖ|₹Â Ƃ.Ƃ.Ѕ. »\00a0';
   cursor: pointer;
}

body {
   height: 100dvh;
   width: 100dvw;
   min-width: 450px;
   min-height: 550px;
   overflow-x: hidden;
   overflow-y: auto;
   background-color: #1B1B1B;
   display: flex;
   justify-content: center;
   align-items: center;
}

* {
   margin: 0;
   padding: 0;
}

a,
a:visited {
   font-style: normal;
   text-decoration: none;
}

.amber .crt-scan-area,
.amber a,
.amber a:visited {
   color: #ffb000;
}

.green .crt-scan-area,
.green a,
.green a:visited {
   color: #3f3;
}

.white .crt-scan-area,
.white a,
.white a:visited {
   color: #cce;
}

.amber #contact:hover,
.amber .crt-scan-area em,
.amber a:hover {
   background-color: #ffb000;
}

.green #contact:hover,
.green .crt-scan-area em,
.green a:hover {
   background-color: #3f3;
}

.white #contact:hover,
.white .crt-scan-area em,
.white a:hover {
   background-color: #cce;
}

.amber #buttongreen,
.amber #buttonwhite,
.amber span {
   color: #996000;
}

.green #buttonamber,
.green #buttonwhite,
.green span {
   color: #00a000;
}

.white #buttongreen,
.white #buttonamber,
.white span {
   color: #606080;
}

a:hover span {
   color: #141414
}

#contact:hover,
.amber a:hover,
.green a:hover,
.white a:hover,
a:hover {
   color: #141414;
   text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5), -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
}

.crt-scan-area {
   width: 80ch;
   max-width: 80ch;
   height: 31.99992em;
   margin: 2.66667em;
   overflow-y: hidden;
   white-space: pre-wrap;
   font-family: monospace;
}

.glitch {
   clip-path: polygon(0 0, 100% 0, 100% 0.5em, 0 0.5em);
   animation: glitch 10s linear infinite;
   transform: translatex(0.1rem);
}

@keyframes glitch {
   to {
      clip-path: polygon(0 calc(100% - .5em), 100% calc(100% - .5em), 0 100%, 0 100%);
   }
}

.amber:before {
   background: radial-gradient(ellipse at center, rgba(255, 176, 0, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
}

.green:before {
   background: radial-gradient(ellipse at center, rgba(51, 255, 51, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
}

.white:before {
   background: radial-gradient(ellipse at center, rgba(204, 204, 238, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
}

.amber .crt-scan-area {
   text-shadow: 0 0 1px rgba(255, 176, 0, 0.8);
}

.green .crt-scan-area {
   text-shadow: 0 0 1px rgba(51, 255, 51, 0.8);
}

.white .crt-scan-area {
   text-shadow: 0 0 1px rgba(204, 204, 238, 0.8);
}

.crt-scan-area em {
   color: #141414;
   font-style: normal;
   text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5), -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
}

.crt-bezel {
   font-size: clamp(10px, 2.25vw, 17px);
   line-height: 1.33333;
}

@media screen and (min-width: 980px) and (min-height:720px) {
   .crt-scan-area::before {
      content: " ";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
      z-index: 2;
      background-size: 100% 2px, 3px 100%;
      pointer-events: none;
   }

   .crt {
      position: relative;
      margin: 1.66667em;
      border-radius: 1.33333em;
      box-shadow: 0 0 1px 3px rgba(10, 10, 10, 0.7);
      background: #141414;
      overflow: hidden;
      z-index: 3;
   }

   .crt:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      box-shadow: inset 0 0 5px 5px rgba(255, 255, 255, 0.1);
      border-radius: 1.33333em;
      z-index: -1;
   }

   .overlay {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: transparent;
      background-size: 5px 5px, 5px 5px;
      background-position: -1px -1px, -1px -1px;
      background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      mix-blend-mode: difference;
   }

   .crt-bezel {
      display: inline-block;
      position: relative;
      margin: 0 auto;
      box-shadow: inset 0 0 1px 0.66667em #F5F5DC;
      border-radius: 1.33333em;
      background: #B5B59A;
      overflow: hidden;
   }

   .crt-bezel:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      background: linear-gradient(135deg, rgba(52, 52, 52, 0.5) 0%, rgba(252, 252, 252, 0.55) 19%, rgba(1, 1, 1, 0.64) 50%, rgba(100, 100, 100, 0.69) 69%, rgba(51, 51, 51, 0.73) 84%, rgba(22, 22, 22, 0.76) 93%, rgba(27, 27, 27, 0.78) 100%);
      opacity: 0.5;
   }

   .crt-bezel:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      background-color: #ddd;
      opacity: 0.1;
   }
}