* {
    margin: 0;
    padding: 0;
    overflow-y: hidden;
}

html {
    background: #333;
    overflow-x: hidden;
    }

#text {
    font-size: 1.7vh;
}

.wrap {
    white-space: pre;
    color: #fff;
    font-family: Consolas, monospace;
    width: 25%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;

}

.type-wrap {
	margin-top: -50px;
}

.with {
    color: #a6e22e;
    font-size: 1.7vh;
}

.arrow {
    color: #f92672;
}

a {
    color: #e6db74;
    text-decoration: none;
}

/* code for animated blinking cursor */
.typed-cursor{
    opacity: 1;
    background-color: white;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    -ms-animation: blink 0.7s infinite;
    -o-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-ms-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-o-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}


@media screen and (max-width: 750px) {
    * {
        line-height: 0.9;
        overflow-x: hidden;
    }

    .wrap {
        width: 80%;
    }

    .type-wrap {
        margin-top: -20%;
    }

    #code {
        width: 380px;
        height: 720px;
    }
}