:root{
--color-black:#000000;
--color-white:#ffffff;
}

/* GLOBAL */

body{

background:black;
color:white;

font-family:"Courier New", monospace;

margin:0;
padding:0;

height:100vh;
overflow:hidden;

font-size:18px;

}

/* MAIN APP LAYOUT */

.app{

display:flex;

width:100%;
height:100vh;

}

/* LEFT PANEL */

.instructions{

width:35%;
min-width:35%;

border-right:2px solid white;

padding:25px;

overflow-y:auto;

}

/* RIGHT PANEL */

.terminal{

width:65%;

display:flex;
flex-direction:column;

}

/* TERMINAL OUTPUT */

#output{

flex:1;

padding:20px;

overflow-y:auto;

background:black;

white-space:pre-wrap;

}

/* INPUT AREA */

.input-area{

display:flex;

border-top:2px solid white;

padding:15px;

}

.prompt{

margin-right:10px;

font-weight:bold;

}

/* INPUT FIELD */

input{

flex:1;

background:black;
color:white;

border:none;

outline:none;

font-family:monospace;

font-size:18px;

}

/* STEPS */

.step{

padding:15px;

margin-bottom:12px;

border:1px solid white;

}

.locked{

opacity:0.35;

}

.active{

background:#111;

}

.complete{

border:2px solid white;
background:#111;

}