html, body { height: 100%; } body { margin: 0 auto; color: rgb(0, 0, 0); background: rgb(58, 58, 58); font: normal 100%/1.5 monospace; } h1 { padding: 10px; text-align: center; border-radius: 5px; color: rgb(255, 255, 255); background: rgb(0, 0, 0); } p { padding: 5px; text-align: center; border-radius: 5px; color: rgb(255, 255, 255); background: rgb(0, 0, 0); } a { padding: 4px; text-decoration: none; border-radius: 5px; color: rgb(255, 255, 255); background: rgb(0, 0, 0); } label { padding: 4px; font: inherit; } img { text-align: center; border: 4px double rgb(255, 255, 255); } video { text-align: center; } select { width: 90px; height: 25.2px; appearance: none; font: inherit; color: rgb(0, 0, 0); caret-color: rgb(0, 0, 0); border: 3px solid rgb(0, 0, 0); } input { width: 280px; appearance: none; box-sizing: border-box; font: inherit; color: rgb(0, 0, 0); caret-color: rgb(0, 0, 0); border: 3px solid rgb(0, 0, 0); } input[type="submit"] { width: 75px; font-weight: bold; text-align: center; } input[type="submit"]:hover { color: rgb(180, 180, 180); background-color: rgb(0, 0, 0); } input[type="submit"]:active { color: rgb(255, 255, 255); border: 3px solid rgb(255, 255, 255); background-color: rgb(0, 0, 0); } input[type="radio"] { width: 0; height: 0; visibility: hidden; } input[type="radio"]:checked+label { padding: 4px; border-radius: 4px; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); } input[type="radio"]:hover:not(:checked)+label { padding: 4px; border-radius: 4px; color: rgb(180, 180, 180); background-color: rgb(0, 0, 0); } input[type=checkbox] { width: 15px; height: 15px; vertical-align:middle; cursor: pointer; } input[type=checkbox]:checked { background-color: rgb(255, 0, 0); } input[id="note"] { width: 360px; } input[id="password"] { width: 360px; } input[id="createnote"] { width: 360px; } input[id="decrypt"] { width: 360px; } input::file-selector-button { width: 110px; appearance: none; font: inherit; font-weight: bold; color: rgb(0, 0, 0); caret-color: rgb(0, 0, 0); border: none; } input::file-selector-button:hover { color: rgb(180, 180, 180); background-color: rgb(0, 0, 0); } input::file-selector-button:active { color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); } textarea { width: 420px; height: 180px; font: inherit; resize: none; border: 4px double rgb(0, 0, 0); } table { width: 100%; border-radius: 5px; background-color: rgb(0, 0, 0); } td { padding: 6px; border: 1px solid rgb(0, 0, 0); background-color: rgba(255, 255, 255, 0.048); } hr { border-top: 2px outset rgb(218, 218, 218); border-bottom: none; border-left: none; border-right: none; display: block; text-align: center; } #body { margin: 0 auto; text-align: start; display: flex; align-items: center; justify-content: center; color: rgb(0, 0, 0); background: rgb(58, 58, 58); font: normal 100%/1.5 monospace; } #app { padding: 20px; max-width: 414px; color: rgb(0, 0, 0); background-color: rgb(180, 180, 180); border: 2px outset rgb(218, 218, 218); } #image { margin: auto -0.5em; text-align: center; } #comment-section { height: 120px; margin: auto; overflow-y: auto; overflow-x: hidden; } #comment { width: 520px; padding: 4px; margin: auto; text-align: left; border-radius: 5px; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.815); } #report-description { width: 410px; padding: 8px; margin: auto; text-align: center; border-radius: 5px; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.815); } #wall { text-align: center; } #crop { width: 10%; height: 20%; float: left; border: none; cursor: pointer; overflow: hidden; object-fit: cover; filter: brightness(95%); } #crop:hover { filter: brightness(120%); } #crop-on-reported-list { width: 42px; height: 42px; border: none; cursor: pointer; overflow: hidden; object-fit: cover; } #rainbow { padding: 4px; margin: 4px; text-align: center; font-weight: bold; letter-spacing: 4px; animation: colorRotate 6s linear 0s infinite; } #whiteblink { text-align: center; font-weight: bold; animation: colorBlinkWhite 2s linear 0s infinite; } #navbut { padding: 8px; margin: 8px; font-size: 14px; font-weight: bold; border-radius: 5px; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); } #navbut:hover { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); } #pagination { padding: 4px; margin: 4px; bottom: 0; border-radius: 10px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); } #pagination:hover { color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); } #normaltext { padding: 0px; font: inherit; color: rgb(0, 0, 0); background: none; } #footer { width: 100%; height: 50px; font-weight: bold; text-align: center; position: fixed; bottom: 0; color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0); } @keyframes colorRotate { from { color: rgb(255, 255, 255); } 10% { color: rgb(255, 0, 0); } 50% { color: rgb(225, 255, 0); } 75% { color: rgb(0, 255, 132); } 100% { color: rgb(0, 106, 255); } } @keyframes colorBlinkWhite { from { color: rgb(255, 255, 255); } 10% { color: rgb(255, 255, 255); } 50% { color: rgb(128, 128, 128); } 75% { color: rgb(255, 255, 255); } 100% { color: rgb(255, 255, 255); } } #dropdown { padding: 0px; margin-right: -8px; position: relative; display: inline-block; } #dropdown-content { display: none; position: absolute; min-width: 154px; z-index: 1; } #dropdown-expand-content { display: none; } #dropdown-content a { display: block; } #dropdown-content a:hover { font-weight: bolder; color: rgb(0, 0, 0); background-color: rgb(172, 172, 172); } #dropdown:hover #dropdown-content { display: block; } #dropdown-expand:hover #dropdown-expand-content { display: block; }  @media only screen and (max-device-width: 800px) { body { zoom: 1.8; } input { width: 360px; } input[type="submit"] { width: 360px; } input[type="file"] { width: 360px; } td[id="input"] { display: table-row; } label[for=day] { margin: -2.8px; } label[for=week] { margin: -2.8px; } label[for=month] { margin: -2.8px; } } @media (orientation: portrait) { #crop { width: 20%; height: 22%; } }