@media screen and (max-width: 600px){.container{width:100%;padding:10px;}
}

body {
  font-family: Arial, sans-serif;
  background: #fff;
  max-width:400px; /* Breite begrenzt sich auf 1200px */
   width: 100%; 
  text-align: center;
  border: 2px solid black; 
}

.card {
  width: 90%;          /* Breite auf kleinen Bildschirmen */
  max-width: 420px;    /* Maximale Breite auf großen Bildschirmen */
  margin: 20px auto;   /* Zentriert und 20px Abstand oben/unten */
}

/*.card {
  width: 420px;
  margin: auto;
}*/

h1 {
  margin-bottom: 10px;
}

.top-values, .mid-values {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
  font-size: 15px;
}

.top-values span,
.mid-values span,
.stats span {
  font-weight: bold;
  font-size: 18px;
}

.wr {
  width: 75%;
  margin: 10px 0;
}

.live {
  color: #2a16de;
  font-size: 18px;
}

.live-value {
  font-size: 28px;
  font-weight: bold;
  color: red;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  margin-top: 10px;
}

.green { color: green; }
.red { color: red; }