* { font-family: Arial, Helvetica, sans-serif; } html { height: 100%; } body { margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; } main { padding: 1rem 2rem; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; } #service-holder { display: flex; flex-direction: column; } #service-holder .service { display: grid; grid-template-columns: 1fr 1fr; } #service-holder .service > .service-status { text-align: right; } a { color: #000; transition: 0.5s all; } a:hover { color: #333; } @media (prefers-color-scheme: dark) { body { background-color: #222; } main { border-color: #333; background-color: #333; color: #fff; } a { color: #0ff; } a:hover { color: #0aa; } } #links { display: flex; flex-direction: column; } #links a { margin-bottom: 0.5rem; }