html { background: #D7E2E2; font-family: 'Roboto'; color: #000F0F; } .recent { display: inline-block; left: 0; position: absolute; top: 0; width: 30%; } .event { font-size: 12pt; padding: 0 6pt 0 6pt; margin-left: 8pt; transition: 0.4s; width: 100%; } .event:hover { background: #226666; width: 105%; } .history-header { background-color: #013A3A; color: #D7E2E2; margin: 0 -10pt 12pt 10pt; padding: 10pt 0 10pt 0; text-align: center; font-size: 16pt; } .time { padding: 6pt 0 6pt 0; display: inline-block; width: 49%; text-align: left; } .name { padding: 6pt 0 6pt 0; display: inline-block; width: 49%; text-align: right; } .unknown_card { color: #E26B08; } .everything-else { display: inline-block; width: 69%; left: 30%; top: 0; position: absolute; text-align: center; } h1 { text-align: center; font-weight: 300; } .big-button { display: inline-block; background-color: #013A3A; color: #D7E2E2; text-align: center; font-size: 12pt; padding: 10pt; margin: 6pt 0 10pt 0; width: 120pt; border-radius: 2pt; transition: 0.2s; } .big-button:hover { background-color: #226666; } .button { width: 50%; background-color: #013A3A; color: #5E9292; padding: 6pt; text-align: center; font-size: 16pt; margin: 16pt 0 16pt 0; transition: 0.2s; } .separator { height: 10%; } .vertical-separator { height: 100%; width: 1px; background-color: #5E9292; position: absolute; top: 0; left: 33%; z-index: 100; } .shadow { background-color: black; display: none; height: 100%; left: 0; opacity: 0.0; position: absolute; top: 0; width: 100%; z-index: 200; } .overlay { background-color: #226666; color: #D7E2E2; display: none; height: 60%; left: 35%; padding: 8pt; position: absolute; top: -70%; width: 30%; z-index: 201; border-radius: 2pt; } .card-id { font-weight: 300; text-align: center; padding: 8pt; font-size: 24pt; } input[type=text] { font-size: 16pt; margin: 12pt 6pt 12pt 6pt; padding: 5pt 8pt 5pt 8pt; } .button { background-color: #013A3A; color: #5E9292; border: none; text-align: center; font-size: 10pt; width: 45%; margin: 8pt; position: absolute; bottom: 0; } #save { right: 0; } #cancel { left: 0; }