html, body { margin: 0px 5px 5px 5px; background-color: #003f00; color: #a0cf0a; } ::selection { background-color: #2e7320; color: #a0cf0a; } body { margin: auto; width: 728px; font-family: Terminus, monospace; } pre, input, textarea { font-family: Terminus, monospace; } input, textarea { border: 1px solid #a0cf0a; color: #a0cf0a; background-color: #003f00; } input[readonly="readonly"] { width: 80%; } i { font-style: normal; background-color: #a0cf0a; color: #003f00; } @media screen and (max-width: 728px) { body { width: 100%; } } div.window-bar { background-color: #a0cf0a; color: #003f00; /*padding: 2px 8px 2px 8px;*/ padding: 4px 8px 4px 8px; } div.window { background-color: #003f00; margin-top: 10px; margin-bottom: 10px; } div.window-content { padding: 15px; border: 2px solid #a0cf0a; border-top: 0px; } .post-date { float: right; } img.pfp { float: left; padding: 2px; border: 2px solid #a0cf0a; margin-right: 15px; display: block; } div.bio { grid-area: bio; } .clearfix::after { content: ""; clear: both; display: table; } hr { border: 1px solid #a0cf0a; } footer { text-align: center; } a, label.show-info { color: #a0cf0a; text-decoration: underline; } .monospace { font-family: monospace; } img.mood { display: none; } div.hidden-info { display: none; font-family: monospace; } label.show-info { cursor: pointer; } input.show-info:checked ~ div.hidden-info { display: flex; } pre.hidden-info { margin: 5px 0px 0px 0px; } div.grid-container { display: grid; grid-template-columns: auto auto auto; } div.bio-grid-container { display: grid; /*grid-template-columns: 98px auto auto;*/ grid-template-areas: 'pfp bio'; } pre { white-space: pre-wrap; word-break: break-word; }