body {
    background: #1b2838 none repeat scroll 0 0;
    margin: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

@font-face {
    src: url(/assets/terminal_copy.ttf);
    font-family: "Terminal";
}

@font-face {
    src: url(/assets/sys.ttf) format("truetype");
    font-family: "Sys";
}

.screen::before {
    background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100%;
    height: 100%;
    z-index: -1;
}

.scanlines .overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scanlines .overlay::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("/assets/crt.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
}

.scanlines .overlay::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: " ";
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.picture {
    height: 100vh;
    overflow: hidden;
    width: 100vw;
    z-index: -1;
    transform: scale(0, 0);
    background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
}

.video {
/*    width: 100%;
    height: 100%;
    object-fit: cover;*/
    object-fit: cover;
    width: 100vw;
    height: 100vh;
}

.menu {
    opacity: 0;
    background-color: #0069ff;
    box-sizing: border-box;
    font-family: "Sys";
    font-size: 32px;
    height: auto;
    text-transform: uppercase;
    width: 34%;
    text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
    filter: blur(1px);
    color: #fff;
    -webkit-animation: jerkup 100ms infinite;
    animation: jerkup 100ms infinite;
}

.menu header {
    color: #e7e05c;
    margin-bottom: 10px;
    padding: 5px 15px;
    -webkit-animation: 5s ease 2000ms normal none infinite running glitch;
    animation: 5s ease 2000ms normal none infinite running glitch;
}

.menu ul {
    margin: 0;
    padding: 0;
    -webkit-animation: 5s ease 2000ms normal none infinite running glitch;
    animation: 5s ease 2000ms normal none infinite running glitch;
}

.menu ul li {
    box-sizing: border-box;
    list-style: outside none none;
    padding: 5px 15px;
}

.menu ul li.active {
    background-color: #1af2ff;
}

.menu ul li a {
    color: #fff;
    text-decoration: none;
}

.menu footer {
    background-color: #2afd72;
    margin-top: 10px;
    padding: 5px 15px;
    -webkit-animation: 5s ease 2000ms normal none infinite running glitch;
    animation: 5s ease 2000ms normal none infinite running glitch;
}

.menu footer::after {
    clear: both;
    content: " ";
    display: table;
}

.menu footer .key {
    float: left;
    width: 50%;
}

.menu footer .key span {
    background-color: #0069ff;
    border: 6px solid #e7e05c;
    border-radius: 6px;
    display: inline-block;
    height: 34px;
    line-height: 36px;
    padding-left: 6px;
}

.menu footer .key:last-child {
    text-align: right;
}

.on .picture {
    -webkit-animation: 3000ms linear 0ms normal forwards 1 running on;
    animation: 3000ms linear 0ms normal forwards 1 running on;
}

.off .picture {
    -webkit-animation: 750ms cubic-bezier(0.23, 1, 0.32, 1) 0ms normal forwards 1 running off;
    animation: 750ms cubic-bezier(0.23, 1, 0.32, 1) 0ms normal forwards 1 running off;
}

.text {
    color: lime;
    content: "AV-1";
    opacity: 0;
    filter: blur(0.5px);
    font-family: Sys;
    font-size: 6vmin;
    left: 5%;
    position: absolute;
    text-shadow: 0 0 3px lime;
    top: 10%;
    width: 200px;
}

.on .text,
.on .menu {
    opacity: 1;
    transition: opacity 10ms ease 2000ms;
}

@-webkit-keyframes on {
    0% {
        transform: scale(1, 0.8) translate3d(0, 0, 0);
        filter: brightness(4);
        opacity: 1;
    }
    3.5% {
        transform: scale(1, 0.8) translate3d(0, 100%, 0);
    }
    3.6% {
        transform: scale(1, 0.8) translate3d(0, -100%, 0);
        opacity: 1;
    }
    9% {
        transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        filter: brightness(4);
        opacity: 0;
    }
    11% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        filter: contrast(0) brightness(0);
        opacity: 0;
    }
    100% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        filter: contrast(1) brightness(1.2) saturate(1.3);
        opacity: 1;
    }
}

@keyframes on {
    0% {
        transform: scale(1, 0.8) translate3d(0, 0, 0);
        filter: brightness(4);
        opacity: 1;
    }
    3.5% {
        transform: scale(1, 0.8) translate3d(0, 100%, 0);
    }
    3.6% {
        transform: scale(1, 0.8) translate3d(0, -100%, 0);
        opacity: 1;
    }
    9% {
        transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        filter: brightness(4);
        opacity: 0;
    }
    11% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        filter: contrast(0) brightness(0);
        opacity: 0;
    }
    100% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        filter: contrast(1) brightness(1.2) saturate(1.3);
        opacity: 1;
    }
}

@-webkit-keyframes off {
    0% {
        transform: scale(1, 1);
        filter: brightness(1);
    }
    40% {
        transform: scale(1, 0.005);
        filter: brightness(100);
    }
    70% {
        transform: scale(1, 0.005);
    }
    90% {
        transform: scale(0.005, 0.005);
    }
    100% {
        transform: scale(0, 0);
    }
}

@keyframes off {
    0% {
        transform: scale(1, 1);
        filter: brightness(1);
    }
    40% {
        transform: scale(1, 0.005);
        filter: brightness(100);
    }
    70% {
        transform: scale(1, 0.005);
    }
    90% {
        transform: scale(0.005, 0.005);
    }
    100% {
        transform: scale(0, 0);
    }
}

.text span {
    filter: blur(1px);
    position: absolute;
}

.text span:nth-child(1) {
    color: red;
    margin-left: -2px;
    filter: blur(2px);
}

.text span:nth-child(2) {
    color: lime;
    margin-left: 2px;
    filter: blur(2px);
}

.text span:nth-child(3) {
    color: blue;
    position: 20px 0;
    filter: blur(1px);
}

.text span:nth-child(4) {
    color: #fff;
    filter: blur(1px);
    text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
}

.text span:nth-child(5) {
    color: rgba(255, 255, 255, 0.1);
    filter: blur(15px);
}

.text span {
    -webkit-animation: blur 30ms infinite, jerk 50ms infinite;
    animation: blur 30ms infinite, jerk 50ms infinite;
}

@-webkit-keyframes blur {
    0% {
        filter: blur(1px);
        opacity: 0.8;
    }
    50% {
        filter: blur(1px);
        opacity: 1;
    }
    100% {
        filter: blur(1px);
        opacity: 0.8;
    }
}

@keyframes blur {
    0% {
        filter: blur(1px);
        opacity: 0.8;
    }
    50% {
        filter: blur(1px);
        opacity: 1;
    }
    100% {
        filter: blur(1px);
        opacity: 0.8;
    }
}

@-webkit-keyframes jerk {
    50% {
        transform: translateX(1px);
    }
    51% {
        transform: translateX(0);
    }
}

@keyframes jerk {
    50% {
        transform: translateX(1px);
    }
    51% {
        transform: translateX(0);
    }
}

@-webkit-keyframes jerkup {
    0% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes jerkup {
    0% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(0);
    }
}

.text span:nth-child(2) {
    -webkit-animation: jerkup 1s infinite;
    animation: jerkup 1s infinite;
}

.text span:nth-child(3) {
    -webkit-animation: glitch1 1s infinite;
    animation: glitch1 1s infinite;
}

@-webkit-keyframes glitch1 {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(0);
    }
    31% {
        transform: translateX(10px);
    }
    32% {
        transform: translateX(0);
    }
    98% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(10px);
    }
}

@keyframes glitch1 {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(0);
    }
    31% {
        transform: translateX(10px);
    }
    32% {
        transform: translateX(0);
    }
    98% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(10px);
    }
}

.text span:nth-child(2) {
    -webkit-animation: glitch2 1s infinite;
    animation: glitch2 1s infinite;
}

@-webkit-keyframes glitch2 {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(0);
    }
    31% {
        transform: translateX(-10px);
    }
    32% {
        transform: translateX(0);
    }
    98% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-10px);
    }
}

@keyframes glitch2 {
    0% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(0);
    }
    31% {
        transform: translateX(-10px);
    }
    32% {
        transform: translateX(0);
    }
    98% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-10px);
    }
}

.overlay .text {
    -webkit-animation: 5s ease 2000ms normal none infinite running glitch;
    animation: 5s ease 2000ms normal none infinite running glitch;
}

@-webkit-keyframes glitch {
    40% {
        opacity: 1;
        transform: scale(1, 1);
        transform: skew(0, 0);
    }
    41% {
        opacity: 0.8;
        transform: scale(1, 1.2);
        transform: skew(80deg, 0);
    }
    42% {
        opacity: 0.8;
        transform: scale(1, 1.2);
        transform: skew(-50deg, 0);
    }
    43% {
        opacity: 1;
        transform: scale(1, 1);
        transform: skew(0, 0);
    }
}

@keyframes glitch {
    40% {
        opacity: 1;
        transform: scale(1, 1);
        transform: skew(0, 0);
    }
    41% {
        opacity: 0.8;
        transform: scale(1, 1.2);
        transform: skew(80deg, 0);
    }
    42% {
        opacity: 0.8;
        transform: scale(1, 1.2);
        transform: skew(-50deg, 0);
    }
    43% {
        opacity: 1;
        transform: scale(1, 1);
        transform: skew(0, 0);
    }
}

.menu ul li a,
.menu footer .key span {
    cursor: pointer;
    pointer-events: auto;
}

.menu {
    pointer-events: auto;
}

.scanlines .overlay {
    pointer-events: none;
}