/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {
	padding-left: 1.4em;
	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
	box-sizing: border-box;
}
/* end reset browser styles */

/* MY CSS */

body
{
    /*background-image: url(background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;*/
    background: url(Matrix.gif) repeat;
    background-color: #000;
}

.msg {
    position: relative;
    font-size: 3em;
    font-family: monospace;
    margin: 40vh auto;
    border: 3px solid lightgreen;   
    text-transform: uppercase;
    color: lightgreen;
    background-color: rgba(0,50,0,.5);
    width: 12em;
    height: 1.3em;
    text-align: center;
}

.msgcontent1 {
    position: absolute;
    left: 10px;
    right: 10px;
    animation: disappear 3s ease-in forwards;
}

.msgcontent2 {
    position: absolute;
    left: 10px;
    right: 10px;
    font-weight: bold;
    opacity: 0;
    animation: appear .1s ease-in 3.5s forwards;
}

.console {
    position: absolute;
    right: 50px;
    bottom: 50px;
    width: 30%;
    border: 2px solid lightgreen;
    background-color: green;
    opacity: 0;
    /*-webkit-animation: hacking 1s ease-in 3s;
    -ms-animation: hacking 1s ease-in 3s;*/
    animation: hacking 1s ease-in 5s forwards;
}

.console img {
    width: 100%;
    padding: 0 0 -5px 0;
}

.console h1 {
    border-bottom: 1px solid lightgreen;
    color: lightgreen;
}

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

@keyframes disappear {
    from {
        opacity: 1;
    }
    20% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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