*,:before,:after {
    box-sizing: border-box;
}

::-moz-selection {
    color: #000;
    background: #fff;
}

::selection {
    color: #000;
    background: #fff;
}

body {
    height: 100vh;
    background: #fff;
}

#terminal {
    width: 70%;
    border: 2px solid #ECE9D8;
    box-shadow: 0 0 1px #000,0 0 10px 10px #d3d3d3;
}

.heading {
    background: -webkit-linear-gradient(left,#0054E3,#3D95FF);
    background: -webkit-linear-gradient(left,#0054E3,#3D95FF);
    background: linear-gradient(to right,#0054E3,#3D95FF);
    padding: 5px 0 5px 6px;
    border: 2px solid #D4D0C8;
}

.heading > div {
    margin-right: 5px;
}

.heading div:first-child {
    font: 18px/1.2 Helvetica;
    letter-spacing: 1px;
    color: #fff;
    margin-right: auto;
}

.heading div:first-child i {
    color: #000;
    margin-right: 5px;
}

.heading div:nth-child(2) {
    font-size: 40px;
}

.heading div:not(:first-child) {
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background: #ECE9D8;
    box-shadow: 1px 1px 1px #000,0 0 1px grey inset;
}

.sidebar {
    padding: 2px 4px;
    background: #ECE9D8;
}

.sidebar > span {
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    box-shadow: 1px 1px 1px #000,0 0 1px grey inset;
}

.sidebar span:nth-child(2) {
    height: 15px;
    margin-bottom: auto;
}

.content {
    font: 20px/1.2 monospace;
    color: green;
    background: #000;
    padding: 10px;
}

p.typing {
    width: 26ch;
    font-size: 2em;
    white-space: nowrap;
    overflow: hidden;
    border-right: .05em solid;
    -webkit-animation: typing 8s steps(26),caret 1s steps(1) infinite;
    animation: typing 8s steps(26),caret 1s steps(1) infinite;
}

@-webkit-keyframes typing {
    from {
        width: 0;
    }
}

@keyframes typing {
    from {
        width: 0;
    }
}

@-webkit-keyframes caret {
    50% {
        border-right-color: transparent;
    }
}

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

.content a {
    color: #fff;
    text-decoration: none;
}

@media (max-width:970px) {
    #terminal {
        width: 100%;
    }
}

@media (max-width:700px) {
    #terminal {
        height: 100vh;
    }

    .content {
        font-size: 1em;
    }

    .main_content {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }
}