*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#0b0b0b;
    color:#d8d4c7;
    font-family:Consolas, monospace;
    min-height:100vh;
    padding:40px;
}

/* CRT Effect */

body::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;

    background:
    repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.02),
        rgba(255,255,255,.02) 1px,
        transparent 2px,
        transparent 4px
    );

    opacity:.15;
    z-index:999;
}

.container{
    max-width:850px;
    margin:auto;
    border:1px solid #9b8f78;
    padding:35px;
    background:#111;
    box-shadow:0 0 20px rgba(155,143,120,.15);

    animation:flicker 8s infinite;
}

.logo{
    text-align:center;
    color:#9b8f78;
    font-size:28px;
    margin-bottom:20px;
}

.status{
    margin-bottom:30px;
    border-left:3px solid #9b8f78;
    padding-left:15px;
}

label{
    display:block;
    margin-top:15px;
}

input{
    width:100%;
    background:#000;
    color:#d8d4c7;
    border:1px solid #444;
    padding:12px;
    margin-top:5px;
}

input:focus{
    outline:none;
    border-color:#9b8f78;
}

button{
    width:100%;
    margin-top:20px;
    padding:12px;
    background:#1d1d1d;
    color:#d8d4c7;
    border:1px solid #9b8f78;
    cursor:pointer;
    transition:.3s;
}

button:hover{
    background:#9b8f78;
    color:#000;
}

.error{
    margin-top:20px;
    color:#b84848;
}

.footer{
    margin-top:30px;
    text-align:center;
    color:#666;
}

.archive-status{
    position:fixed;
    bottom:10px;
    right:10px;
    font-size:10px;
    color:#222;
    transition:.5s;
}

.archive-status:hover{
    color:#666;
}

.typewriter{
    overflow:hidden;
    white-space:nowrap;
    border-right:2px solid #9b8f78;
    width:0;

    animation:
        typing 3s steps(40,end) forwards,
        cursor .8s infinite;
}

#boot-screen{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    color:#9b8f78;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

#boot-text{
    font-size:18px;
    opacity:0;
    animation:fadein 2s forwards;
}

.recovery{
    text-align:center;
    font-size:22px;
    margin-top:150px;
}

@keyframes fadein{
    from{opacity:0;}
    to{opacity:1;}
}

@keyframes typing{
    from{width:0;}
    to{width:100%;}
}

@keyframes cursor{
    50%{border-color:transparent;}
}

@keyframes flicker{
    0%,97%,100%{opacity:1;}
    98%{opacity:.95;}
    99%{opacity:.9;}
}