
/* hello */
@font-face {
    font-family: 'jf_dot_ayu';
    src: url('https://ternox.com/font/JF-Dot-Ayu18.eot');
    src: url('https://ternox.com/font/JF-Dot-Ayu18.eot?#iefix') format('embedded-opentype'),
         url('https://ternox.com/font/JF-Dot-Ayu18.woff2') format('woff2'),
         url('https://ternox.com/font/JF-Dot-Ayu18.woff') format('woff'),
         url('https://ternox.com/font/JF-Dot-Ayu18.ttf') format('truetype'),
         url('https://ternox.com/font/JF-Dot-Ayu18.svg#jf_dot_ayu_gothic_18regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {

  color: #F1F2DA;
  font-family: 'jf_dot_ayu';
    font-size: 19px;

  margin: auto;
line-height: 34px;
    word-spacing: 1px;
    letter-spacing: 2px;
  -webkit-font-smoothing: none;

  

    background: url(https://vi.vn.ua/back.gif) #00303B fixed bottom left;
    background-size: 292px;
    image-rendering: optimizeSpeed;            
    image-rendering: -moz-crisp-edges;          
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   
    -webkit-font-smoothing: none;
    font-smooth: never;
    p
}


/* Glitch links (kept) */
a{transition:color .2s}
a:hover{color:#fff}
a.glitch{position:relative; text-decoration:none; text-shadow: 0 0 8px rgba(0,230,255,.35)}
a.glitch::before, a.glitch::after{content:attr(data-text); position:absolute; left:0; top:0; pointer-events:none}
/* split-channel chroma */
a.glitch::before{color:var(--neon-c); clip-path: polygon(0 2%, 100% 2%, 100% 45%, 0 45%); animation:gl1 2.2s infinite linear}
a.glitch::after{color:var(--neon-m); clip-path: polygon(0 55%, 100% 55%, 100% 98%, 0 98%); animation:gl2 1.9s infinite linear}
@keyframes gl1{0%{transform:translate(0)} 20%{transform:translate(1px,-1px)} 40%{transform:translate(0)} 60%{transform:translate(-1px,1px)} 80%{transform:translate(0)} 100%{transform:translate(0)}}
@keyframes gl2{0%{transform:translate(0)} 25%{transform:translate(-1px,1px)} 50%{transform:translate(0)} 75%{transform:translate(1px,-1px)} 100%{transform:translate(0)}}

/* Responsive */
@media (max-width: 560px){ .head{flex-direction:column; align-items:flex-start} nav{margin-left:0} }


.code {
    width: auto;
    background-color: #F1F2DA;
    color: #000;
    padding: 8px 12px;
    font-size: 0.8em;
    word-wrap: break-word;
}


#block0 {

display: block;
    max-width: 660px;
    margin-left: auto;
    margin-top: 33px;
    margin-right: auto;
    background: repeating-linear-gradient(0deg, rgba(255, 0, 128, 0.02) 0 2px, transparent 2px 4px), radial-gradient(1200px 800px at 70% -10%, #0f1a2a9c 0%, #070a11b8 40%, #04060abf 100%);
    padding: 30px;
    border: #46cad7;
    border-style: groove;

}

