avinal.github.io/custom/css/glitch-404.css

/*
 * Glitch - 404 Page
 * Build Date: October 2016
 * Author: joashp
 */

 @import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono%7CSpace+Mono");
 /*
  * http://meyerweb.com/eric/tools/css/reset/ 
  * v2.0 | 20110126
  * License: none (public domain)
  */
 
 html,
 body,
 div,
 span,
 applet,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 big,
 cite,
 code,
 del,
 dfn,
 em,
 img,
 ins,
 kbd,
 q,
 s,
 samp,
 small,
 strike,
 strong,
 sub,
 sup,
 tt,
 var,
 b,
 u,
 i,
 center,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 canvas,
 details,
 embed,
 figure,
 figcaption,
 footer,
 header,
 hgroup,
 menu,
 nav,
 output,
 ruby,
 section,
 summary,
 time,
 mark,
 audio,
 video {
     margin: 0;
     padding: 0;
     border: 0;
     font - size: 100 %;
     font: inherit;
     vertical - align: baseline;
 }
 
 
 /* HTML5 display-role reset for older browsers */
 
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section,
 main {
     display: block;
 }
 
 body {
     line - height: 1;
 }
 
 ol,
 ul {
     list - style: none;
 }
 
 blockquote,
 q {
     quotes: none;
 }
 
 blockquote: before,
 blockquote: after,
 q: before,
 q: after {
     content: '';
     content: none;
 }
 
 table {
     border - collapse: collapse;
     border - spacing: 0;
 }
 
 
 /* ---------------glitch 404 style---------------------- */
 
 html {
     background: radial-gradient(#000, #111);
     color: white;
     overflow: hidden;
     height: 100%;
     user-select: none;
 }
 
 .error-code {
     font-family: "Share Tech Mono";
     text-align: center;
     font-size: 75px;
     font-style: italic;
     text-align: center;
     width: 100px;
     height: 60px;
     line-height: 60px;
     margin: auto;
     position: absolute;
     top: 0;
     bottom: 0;
     left: -60px;
     right: 0;
     animation: noise 2s linear infinite;
     overflow: default;
 }
 
 .error-code:after {
     font-family: "Share Tech Mono";
     content: 'ME';
     font-size: 80px;
     font-style: italic;
     text-align: center;
     width: 150px;
     height: 60px;
     line-height: 60px;
     margin: auto;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     opacity: 0;
     color: #00ffbf;
     animation: noise-1 .2s linear infinite;
 }
 
 .info {
     text-align: center;
     font-size: 15px;
     font-style: italic;
     text-align: center;
     width: 200px;
     height: 60px;
     line-height: 60px;
     margin: auto;
     position: absolute;
     top: 140px;
     bottom: 0;
     left: 0;
     right: 0;
     animation: noise-3 1s linear infinite;
 }
 
 .error-code:before {
     font-family: "Share Tech Mono";
     content: 'ME';
     font-size: 80px;
     font-style: italic;
     text-align: center;
     width: 100px;
     height: 60px;
     line-height: 60px;
     margin: auto;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     opacity: 0;
     color: red;
     animation: noise-2 .2s linear infinite;
 }
 
 @keyframes noise-1 {
     0%,
     20%,
     40%,
     60%,
     70%,
     90% {
         opacity: 0;
     }
     10% {
         opacity: .1;
     }
     50% {
         opacity: .5;
         left: -6px;
     }
     80% {
         opacity: .3;
     }
     100% {
         opacity: .6;
         left: 2px;
     }
 }
 
 @keyframes noise-2 {
     0%,
     20%,
     40%,
     60%,
     70%,
     90% {
         opacity: 0;
     }
     10% {
         opacity: .1;
     }
     50% {
         opacity: .5;
         left: 6px;
     }
     80% {
         opacity: .3;
     }
     100% {
         opacity: .6;
         left: -2px;
     }
 }
 
 @keyframes noise {
     0%,
     3%,
     5%,
     42%,
     44%,
     100% {
         opacity: 1;
         transform: scaleY(1);
     }
     4.3% {
         opacity: 1;
         transform: scaleY(1.7);
     }
     43% {
         opacity: 1;
         transform: scaleX(1.5);
     }
 }
 
 @keyframes noise-3 {
     0%,
     3%,
     5%,
     42%,
     44%,
     100% {
         opacity: 1;
         transform: scaleY(1);
     }
     4.3% {
         opacity: 1;
         transform: scaleY(4);
     }
     43% {
         opacity: 1;
         transform: scaleX(10) rotate(60deg);
     }
 }