:root{--color-text: #333;--color-ok: #62bd19;--color-problems: orange;--color-down: red;--circle-size: 1rem;--ring-size: calc(.5rem + var(--circle-size));font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img{max-width:100%}.center-all{display:flex;align-items:center;justify-content:center}body{display:flex;flex-direction:column;min-height:100vh;color:var(--color-text);background-color:#f8f8ff;padding:0;margin:0}body>header,body>main,body>footer{width:min(100%,60ch);margin:auto}body>header,body>footer{display:flex;gap:1em;align-items:center;justify-content:center}body>footer{font-size:.9rem}main{flex:1}.monitor{padding:1rem;font-size:1.2em;display:flex;--color-status: var(--color-text)}.monitor+.monitor{border-top:1px dotted var(--color-text)}.monitor[data-status=up]{--color-status: var(--color-ok)}.monitor[data-status="8"]{--color-status: var(--color-problems)}.monitor[data-status=down]{--color-status: var(--color-down)}.monitor a{flex:1;color:var(--color-text)!important;text-decoration:none}.monitor .status{color:var(--color-status)}.ring-container{position:relative;height:var(--ring-size);width:var(--ring-size);margin:0 .5rem}.ring-container>.circle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.circle{width:var(--circle-size);height:var(--circle-size);background-color:var(--color-status);border-radius:50%}.ringring{--border-width: 3px;border:var(--border-width) solid var(--color-status);border-radius:50%;height:var(--ring-size);width:var(--ring-size);position:absolute;animation:pulsate 2s ease-out;animation-iteration-count:infinite;opacity:0}@keyframes pulsate{0%{transform:scale(.1);opacity:0}50%{opacity:1}to{transform:scale(1.2);opacity:0}}