: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}*,::after,::before{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>footer,body>header,body>main{width:min(100%,60ch);margin:auto}body>footer,body>header{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,.1);opacity:0}50%{opacity:1}100%{transform:scale(1.2,1.2);opacity:0}}