@import "https://fonts.bunny.net/css?family=roboto:400";@import "reset.css";body{text-align:center;color:#fff;background-color:#333;justify-content:center;align-items:center;height:100vh;font-family:Roboto,sans-serif;display:flex}.app{background-color:#222;border-radius:1em;padding:2em}h1{color:#ddd;margin-bottom:1em;font-size:2rem}#startStopBtn{color:#ddd;box-sizing:border-box;cursor:pointer;background-color:#0000;border:.15em solid #6060ff;border-radius:.3em;width:8em;height:3em;margin:0 auto;line-height:2.7em;transition:all .3s;display:inline-block;box-shadow:0 0 #0000001a,inset 0 0 #0000001a}#startStopBtn:hover{box-shadow:0 0 2em #0000001a,inset 0 0 1em #0000001a}#startStopBtn.running{color:#fff;background-color:#ff3030;border-color:#ff6060}#startStopBtn:before{content:"Start"}#startStopBtn.running:before{content:"Abort"}#test{margin-top:2em}.testArea{box-sizing:border-box;width:14em;height:9em;display:inline-block;position:relative}div.testName{z-index:9;width:100%;font-size:1.4em;position:absolute;top:.1em;left:0}div.meterText{z-index:9;width:100%;font-size:2.5em;position:absolute;bottom:1.5em;left:0}#dlText{color:#6060aa}#ulText{color:#309030}#pingText,#jitText{color:#aa6060}div.meterText:empty:before{content:"0.00";color:#505050!important}div.unit{z-index:9;width:100%;position:absolute;bottom:2em;left:0}.testGroup{width:100%;display:inline-block}@media (width<=65em){body{font-size:1.5vw}}@media (width<=40em){body{font-size:.8em}div.testGroup{margin:0 auto;display:block}}#progressBar{background-color:#eee;width:90%;height:.3em;margin:0 auto 2em;display:block;position:relative}#progress{background-color:#6060ff;width:0%;height:100%;transition:width 2s;position:absolute;top:0;left:0}.svg{display:block}