@import url(https://fonts.googleapis.com/css?family=Gilda+Display);
@import url(https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap);

html { background-color:black; color: white; overflow: hidden; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: medium; }

.error { text-align: center; font-family: 'Gilda Display', serif; text-align: center; width: 100%; height: 120px; margin: auto; position: absolute; top: 0; bottom: 0; left: -60px; right: 0; -webkit-animation: noise-3 1s linear infinite; animation: noise-3 1s linear infinite; overflow: default; }

/* Glitch titles */
body:after, body:before { font-family: 'Share Tech Mono', monospace; font-size: 100px; text-align: center; width: 550px; margin: auto; position: absolute; top: 25%; bottom: 0; left: 0; right: 35%; opacity: 0; color: white; pointer-events: none; }
body:after { -webkit-animation: noise-1 .2s linear infinite; animation: noise-1 .2s linear infinite; }
body:before { -webkit-animation: noise-2 .2s linear infinite; animation: noise-2 .2s linear infinite; }

.info { text-align: center; width: 200px; height: 60px; margin: auto; position: absolute; top: 40px; bottom: 0; left: -100px; right: 0; -webkit-animation: noise-3 1s linear infinite; animation: noise-3 1s linear infinite; }
.info:before, .info:after { font-family: 'Share Tech Mono', monospace; font-size: 100px; text-align: center; width: 800px; margin: auto; position: absolute; top: 20px; bottom: 0; left: 40px; right: 100px; opacity: 0; color: white; pointer-events: none; }
.info:before { -webkit-animation: noise-2 .2s linear infinite; animation: noise-2 .2s linear infinite; }
.info:after { right: 0; -webkit-animation: noise-1 .2s linear infinite; animation: noise-1 .2s linear infinite; }

@-webkit-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-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;} }
@-webkit-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-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;} }
@-webkit-keyframes noise-3 { 0%,3%,5%,42%,44%,100% {opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1);} 4.3% {opacity: 1; -webkit-transform: scaleY(4); transform: scaleY(4);} 43% {opacity: 1; -webkit-transform: scaleX(10) rotate(60deg); transform: scaleX(10) rotate(60deg);} }
@keyframes noise-3 { 0%,3%,5%,42%,44%,100% {opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1);} 4.3% {opacity: 1; -webkit-transform: scaleY(4); transform: scaleY(4);} 43% {opacity: 1; -webkit-transform: scaleX(10) rotate(60deg); transform: scaleX(10) rotate(60deg);} }

.wrap { top: 30%; left: 25%; height: 200px; margin-top: -100px; position: absolute; }
code { color: white; position: relative; z-index: 2; }
span.blue { color: #48beef; }
span.comment { color: #7f8c8d; }
span.orange { color: #f39c12; }
span.green { color: #33cc33; }

.back-inline { display:inline-block; margin: 6px 0 0; color:#9aa4ad; font-family: 'Share Tech Mono', monospace; text-decoration:none; position: relative; z-index: 3; }
.back-inline:hover { color:#cfd7de; text-decoration: underline; }

/* Code-specific content */
body.error-400:after, body.error-400:before { content: 'ошибка 400'; }
body.error-401:after, body.error-401:before { content: 'ошибка 401'; }
body.error-403:after, body.error-403:before { content: 'ошибка 403'; }
body.error-404:after, body.error-404:before { content: 'ошибка 404'; }
body.error-500:after, body.error-500:before { content: 'ошибка 500'; }
body.error-502:after, body.error-502:before { content: 'ошибка 502'; }
body.error-503:after, body.error-503:before { content: 'ошибка 503'; }
body.error-504:after, body.error-504:before { content: 'ошибка 504'; }

body.error-400 .info:before, body.error-400 .info:after { content: 'плохой запрос'; }
body.error-401 .info:before, body.error-401 .info:after { content: 'не авторизован'; }
body.error-403 .info:before, body.error-403 .info:after { content: 'доступ запрещён'; }
body.error-404 .info:before, body.error-404 .info:after { content: 'файл не найден'; }
body.error-500 .info:before, body.error-500 .info:after { content: 'ошибка сервера'; }
body.error-502 .info:before, body.error-502 .info:after { content: 'плохой шлюз'; }
body.error-503 .info:before, body.error-503 .info:after { content: 'сервис недоступен'; }
body.error-504 .info:before, body.error-504 .info:after { content: 'таймаут шлюза'; }