/* Подключение кастомных шрифтов из папки проекта */
@font-face {
    font-family: "ToshibaSat";
    src: url("../fonts/WebPlus_ToshibaSat_8x16.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

input, button, pre, nav {
    font-family: "ToshibaSat", monospace;
}

pre {
    font-family: "ToshibaSat", monospace;
    font-size: 18px;
    line-height: 1.2;
}

.topbar{
position:fixed;
top:0;
left:0;
right:0;

display:flex;
justify-content:center;

gap:60px; /* расстояние между кнопками */

padding:20px 30px;

background:hsl(154 50% 5%);
border-bottom:1px solid hsl(154 84% 40%);

z-index:10;
}

.topbar span{

font-size:22px;        /* размер кнопок */
padding:10px 18px;     /* размер области кнопки */

cursor:pointer;

border:1px solid transparent;
}

.topbar span:hover{

border:1px solid hsl(154 84% 70%);
text-shadow:0 0 10px hsl(154 84% 70%);

}

/* The curvy screen glare effect */
  #glare {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* ensure the effect doesn't cover the text */
    background: radial-gradient(hsl(154 5% 15%) 0%, hsl(154 50% 5%) 70%);
}

/* low-resolution screen overlay interlacing */
@keyframes lines {
  0% {background-position: 0px 0px}
  50% {background-position: 0px 0px}
  51% {background-position: 0px 2px}
  100% {background-position: 0px 2px}
}

#interlaced {
  position: fixed;
  background: repeating-linear-gradient(transparent 0px 1px, hsl(154 0% 0%/.3) 3px 4px);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  animation: lines 0.09s linear infinite;
}

@keyframes blink {
    0% {opacity: 0}
    30% {opacity: 1}
    70% {opacity: 1}
    100% {opacity: 0}
}

.blink {
    animation: blink 0.8s linear infinite;
}



body {
    font-family: "ToshibaSat", monospace;
    image-rendering: pixelated;
    font-smooth: never;
    -webkit-font-smoothing: none;
}



/* Подвал */
footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    color: hsl(154 84% 50%);
}

.centered {
    text-align: center;
}