*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    width:100vw;
    height:100vh;

    overflow:hidden;

    background:#000;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:monospace;

    position:relative;

}

/************************
GRID
************************/

.grid{

    position:fixed;

    inset:0;

    background:

    linear-gradient(
        rgba(255,255,255,.03) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.03) 1px,
        transparent 1px
    );

    background-size:
    50px 50px;

    animation:
    moveGrid 20s linear infinite;

}

@keyframes moveGrid{

    from{

        transform:
        translateY(0);

    }

    to{

        transform:
        translateY(50px);

    }

}

/************************
SCANLINE
************************/

.scanline{

    position:fixed;

    inset:0;

    background:

    repeating-linear-gradient(

        0deg,

        transparent 0px,

        transparent 2px,

        rgba(255,255,255,.03) 3px

    );

    pointer-events:none;

}

/************************
LOGIN
************************/

.loginBox{

    width:340px;

    text-align:center;

    z-index:10;

}

/************************
LOGO
************************/

#logo{

    font-size:55px;

    font-weight:100;

    letter-spacing:15px;

    color:#fff;

    animation:

    flicker 4s infinite;

}

@keyframes flicker{

    0%{

        opacity:1;

        text-shadow:

        0 0 10px #fff,

        0 0 30px #fff;

    }

    48%{

        opacity:1;

    }

    50%{

        opacity:.4;

    }

    52%{

        opacity:1;

    }

    80%{

        opacity:.8;

    }

    100%{

        opacity:1;

    }

}

/************************
SUBTITLE
************************/

.subtitle{

    margin-top:20px;

    color:#fff;

    font-size:13px;

    letter-spacing:5px;

    animation:

    glitch 3s infinite;

}

@keyframes glitch{

    0%{

        transform:
        translateX(0);

    }

    2%{

        transform:
        translateX(-2px);

    }

    4%{

        transform:
        translateX(2px);

    }

    6%{

        transform:
        translateX(0);

    }

    100%{

        transform:
        translateX(0);

    }

}

/************************
BUTTON
************************/

#googleBtn{

    margin-top:70px;

    width:100%;

    height:55px;

    background:none;

    border:1px solid #fff;

    color:#fff;

    font-size:13px;

    letter-spacing:4px;

    cursor:pointer;

    font-family:monospace;

    transition:.3s;

    box-shadow:

    0 0 15px rgba(255,255,255,.15);

}

#googleBtn:hover{

    background:#fff;

    color:#000;

    box-shadow:

    0 0 30px #fff;

}