123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Fira+Sans:wght@200&display=swap');

body {    background-color: #35465c;}
button {  border-radius: 28px;  font-family: Arial;  color: #ffffff;  font-size: 15px;  background: #35465c;  border: 2px solid white;  padding: 5px 10px 5px 10px;  text-decoration: none;}
button:hover {  background: #26384d;  text-decoration: none;}
.logoText {  margin-top: 150px;}
#loadingError{  color: rgb(215, 16, 16);}
#localHostInputID {  width: 250px;}
#root {    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;}
.metricsContainer {    background-color: white;  margin: 10px;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  text-align: center;}
.metricContainer {  width: 150px;  border: 1px solid rgba(0, 0, 0, 0);  border-radius: 2px;  padding: 5px;  display: inline-block;  border-right: 0px;  text-align: right;}
.valueContainer {    width: 150px;    border: 1px solid rgba(0, 0, 0, 0);    border-radius: 2px;    padding: 5px;    display: inline-block;    font-weight: bold;    border-left: 0px;    text-align: left;  }#hank {    text-align: center;    font-size: 100px;    margin-bottom: 7px;    margin-top: 20px;}
#lol {    text-align: center;    color: white;}
div {    font-family: 'Cabin', sans-serif;}

.field {    display: flex;    flex-direction: row;}
.catContainer {    display: flex;    justify-content: center;    align-items: center;}
.text {    text-align: left;}