html,
body {
    height: 100%;
    padding:0;
    margin: 0;
    
    
}
* {
    image-rendering: pixelated; /*idk wat any of these do, or i do, but i just dont understand fully*/
text-rendering: geometricPrecision;
-webkit-font-smoothing: none;
-moz-osx-font-smoothing: grayscale;
position:relative;
}
.interlace {
  filter: contrast(1.05) saturate(1.1);
  position: relative;
}
h1,h2,h3,h4,h5,h6 {
    padding: 0;
    margin:0;
    text-align: center; 
}
#saz {
    position:relative;
}

.interlace::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
  to bottom,
  rgba(255,0,0,0.4) 0px,
  rgba(0,255,0,0.4) 2px,
  rgba(0,0,255,0.4) 4px
);
  pointer-events: none;
  mix-blend-mode: color-burn;
  z-index: 500;
}

@keyframes sx {
    from { background-position-x: 0;}
    to { background-position-x: 900px;}
}
#sa {
    padding: 10px;
    background: url('/darkgritty.png');
    background-size: 900px;
     text-shadow: black 3px 3px, 0 0 3px white;
    animation: sx 90s infinite linear;
    color:white;
    overflow: hidden;
    
    font-size: 24px;
    min-width: 98vw;
    min-height: 100vh;
    font-family: 'IBMVGA';
    z-index: 2;
    font-weight: 1000;
}
@keyframes flicker {
    0% {
color: rgb(206, 206, 206);
    }
    33% {

color: rgba(255, 255, 255, 0.719);
    }
    50% {
color: white;
        }
        60% {
            color:transparent;
        }
        70% {
            color:white;
        }
        75% {
            color:transparent;
        }
        80% {
color: rgba(255, 255, 255, 0.76);
        }
        100% {
color: rgb(138, 138, 138);
        }
}
@keyframes rip {
    from {
        width: 100%;
    }
    to {
        width: 0;
        visibility: hidden;
    }
}
@keyframes ripz {
    from {
        background: black;
    }
    to {
background: rgba(0, 0, 0, 0.664);
    }
}