:root {
--color-black: #000000;
--color-tan: #86745c;
--color-light-tan: #c2baab;
--color-dark-tan: #6a5c48;
}

body {
margin: 0;
font-family: monospace;
background: var(--color-black);
}

.container {
display: flex;
height: 100vh;
}

.instructions {
width: 40%;
background: var(--color-black);
color: white;
padding: 20px;
overflow-y: auto;
}

.instructions h2 {
color: var(--color-light-tan);
}

.instructions code {
color: var(--color-light-tan);
}

.terminal {
width: 60%;
background: #111;
color: #00ff00;
padding: 20px;
display: flex;
flex-direction: column;
}

#output {
flex-grow: 1;
overflow-y: auto;
margin-bottom: 10px;
}

input {
padding-top: 10px;
padding-bottom: 10px;
font-family: monospace;
width: 100%;
}

button {
background: var(--color-tan);
color: white;
border: none;
padding: 10px;
cursor: pointer;
margin-top: 15px;
}

.centered {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.card {
background: white;
padding: 30px;
border-radius: 8px;
text-align: center;
}