@import 'https://fonts.googleapis.com/css?family=Inconsolata';

        body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        height: 100%;
        background-color: #000000;
        background-image: radial-gradient(#ffd800, #041607), url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
        background-repeat: no-repeat;
        background-size: cover;
        font-family: 'Inconsolata', Helvetica, sans-serif;
        font-size: 1.5rem;
        color: #ffd800;
        color: #ffd800;
        text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px  1px 0 #000,
            1px  1px 0 #000;
        }

        .noise {
        margin: 0;
        padding: 0;
        pointer-events: none;
        position: absolute;
        background-image: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
        opacity: .02;
        }

        .overlay {
        pointer-events: none;
        position: absolute;
        width: 100%;
        height: 100%;
        background:
            repeating-linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0) 100%);
        background-size: auto 4px;
        z-index: 1;
        }

        .overlay::before {
        content: "";
        pointer-events: none;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(
            0deg,
            transparent 0%,
            rgba(32, 128, 32, 0.2) 2%,
            rgba(32, 128, 32, 0.8) 3%,
            rgba(32, 128, 32, 0.2) 3%,
            transparent 100%);
        background-repeat: no-repeat;
        animation: scan 7.5s linear 0s infinite;
        }

        @keyframes scan {
        0%        { background-position: 0 -100vh; }
        35%, 100% { background-position: 0 100vh; }
        }
        .logo{
            text-align: center;
        }
        .terminal {
        box-sizing: inherit;
        position: absolute;
        padding: 4rem;
        text-transform: uppercase;
        }

        .output {
        color: #ffd800;
        text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px  1px 0 #000,
            1px  1px 0 #000;
        }
        .output::before {
        content: "> ";
        }
        a {
        color: #fff;
        text-decoration: none;
        }

        a::before {
        content: "[";
        }

        a::after {
        content: "]";
        }

        .errorcode {
        color: white;
        }

@media (max-width: 480px) {
    body{
            background-repeat: repeat !important;
    }
    
    .noise{
        width: 100%;
        height: 100%;
    }
    .logo{
        margin: auto;
        text-align: justify;
        img{
            width: 200px;
            height: 200px;;
        }
    }
}