.bx-container { display: flex; height: 100%; width: 100%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: linear-gradient(to right, #7f1cb1, #000000); justify-content: space-between; } .bx-browser { display: flex; margin: 10px; flex-direction: column; width: 50%; height: 80%; border: 1px solid rgb(128 128 128 / 50%); border-radius: 4px; box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4); background: rgb(255 255 255 / 85%); } .bx-title-bar { flex: 0 0 40px; display: flex; } .bx-wm-button-container { display: flex; flex: 0 0 75px; align-items: center; justify-content: flex-start; } .bx-wm-buttons { flex: 0 0 auto; content: ''; width: 0.5em; height: 0.5em; margin-left: 10px; border-radius: 50%; background-color: #f44; box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5; } .bx-page { background: white; flex: 1 1 auto; overflow: auto; } .bx-address-bar { flex: 1 1 auto; margin: 10px 0px 10px 0px; background: white; border-radius: 2px; } .bx-extensions { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; margin: 10px; } a.bx-extension-launcher { flex: 0 0 20px; display: flex; cursor: pointer; } .bx-extension-launcher img { height: 20px; width: 20px; } .bx-extension { position: absolute; top: 40px; background: white; border: 1px solid rgb(128 128 128 / 50%); border-radius: 4px; box-shadow: 0 0.1em 1em 0 rgb(0 0 0 / 40%); } .bx-extension-popup { position: absolute; top: 80px; left: 55%; background: white; border: 1px solid rgb(128 128 128 / 50%); border-radius: 4px; box-shadow: 0 0.1em 1em 0 rgb(0 0 0 / 40%); } /* Logging */ .bx-log { display: flex; flex-direction: column; flex: 0 0 25%; background: rgb(255 255 255 / 50%); overflow-y: auto; flex-flow: reverse; font-family: monospace; } .bx-log-entry { display: flex; flex-direction: row; } span.bx-timestamp { flex: 0 0 0px; margin-right: 0.5em; } span.bx-log-message { flex: 1 1 auto; }