body { background-color: #1c1c1c; font-family: 'Source Code Pro', monospace; font-size: 14px; font-weight: 400; color: #fff; padding: 0; margin: 0; } .terminal-window { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #2d2d2d; box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.1); border-radius: 5px; overflow: hidden; width: auto; max-width: 90%; height: auto; max-height: 90%; } .terminal-header { display: flex; align-items: center; background-color: #1c1c1c; height: 35px; padding: 0 10px; } .terminal-buttons { display: flex; } .terminal-button { width: 12px; height: 12px; margin-right: 5px; border-radius: 50%; } .terminal-button.close { background-color: #ff5f56; } .terminal-button.minimize { background-color: #ffbd2e; } .terminal-button.expand { background-color: #28c940; } .terminal-title { flex: 0.9; text-align: center; } .terminal-body { display: flex; flex-direction: column; padding: 10px; } .terminal-output { flex: 1; padding: 10px; overflow-y: auto; white-space: pre-wrap; } .terminal-output p { margin: 0 0 5px 0; } .terminal-input { display: flex; align-items: center; background-color: #1c1c1c; height: 35px; padding: 0 10px; } .terminal-input span { color: #fff; margin-right: 10px; } .terminal-input input { background-color: transparent; border: none; font-family: 'Courier New', Courier, monospace; font-size: 16px; color: #fff; flex: 1; } table { width: 100%; border-spacing: 0; } td { padding: 5px; vertical-align: top; } .label { text-align: right; padding-right: 10px; color: #ffc107; } .value { color: #fff; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background-color: #55555500; } @media (max-width: 600px) { .terminal-window { width: 90%; height: auto; } }