@font-face {
	 font-family: "C64 User";
	 src: url("../fonts/C64_Pro-STYLE.woff") format("woff");
}

@font-face {
	 font-family: "C64 User Mono";
	 src: url("../fonts/C64_Pro_Mono-STYLE.woff") format("woff");
}

@font-face {
	 font-family: "C64 Pro";
	 src: url("../fonts/C64_Pro-STYLE.woff") format("woff");
}

@font-face {
	 font-family: "C64 Pro Mono";
	 src: url("../fonts/C64_Pro_Mono-STYLE.woff") format("woff");
}

.c64_top {
    text-align: center;
}

.title {
    text-align: center;
}

.centered {
    margin-left: auto;
    margin-right: auto;
}

.indicator {
    color: rgb(223, 220, 255);
    text-decoration: underline;
}

.snippet {
    font-size: x-small;
    font-family: "C64 Pro Mono", monospace;
    overflow: scroll;
}


@-webkit-keyframes typing {
    from { width: 0 }
    to { width: 30% }
}

@-moz-keyframes typing {
    from { width: 0 }
    to { width: 30% }
}

@-webkit-keyframes blink-caret {
    from, to { border-color: #A396ff }
    50% { border-color: transparent }
}

@-moz-keyframes blink-caret {
    from, to { border-color: #A396FF }
    50% { border-color: transparent }
}

.typing { 
    text-align:left;
    font-size:1em;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    border-right: 1em solid transparent;
    padding-right:1em;
    top: 0;
    padding-top: 0;

    -webkit-animation: typing 5s steps(32, end), /* # of steps = # of characters */
    blink-caret .5s step-end 10; /*infinite;*/
    -moz-animation: typing 5s steps(32, end), /* # of steps = # of characters */
    blink-caret .5s step-end 10; /*infinite;*/
}

#run {
    text-align:left;
    font-size:1em;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    border-right: 1em solid transparent;
    padding-right:1em;
    top: 0;
    padding-top: 0;

    -webkit-animation-delay: 8500s
    -moz-animation-delay: 8500s;
    -webkit-animation: blink-caret .5s step-end 10; /*infinite;*/
    -moz-animation: blink-caret .5s step-end 10; /*infinite;*/
}