style.css

body {
background: #6D7074;
}
.terminal-window {
text-align: left;
width: 80%;
height: 600px;
border-radius: 10px;
margin: auto;
position: relative;
}
.terminal-window header {
background: #E0E8F0;
height: 30px;
border-radius: 8px 8px 0 0;
padding-left: 10px;
}
.terminal-window header .button {
width: 12px;
height: 12px;
margin: 10px 4px 0 0;
display: inline-block;
border-radius: 8px;
}
.terminal-window header .button.green {
background: #3BB662;
}
.terminal-window header .button.yellow {
background: #E5C30F;
}
.terminal-window header .button.red {
background: #E75448;
}
.terminal-window section.terminal {
color: white;
font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
font-size: 11pt;
background: #30353A;
padding: 10px;
box-sizing: border-box;
position: absolute;
width: 100%;
top: 30px;
bottom: 0;
overflow: auto;
}
.terminal-window section.terminal .typed-cursor {
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.terminal-data { display: none; }
.terminal-window .gray { color: gray; }
.terminal-window .green { color: green;}