* {
  box-sizing: border-box;
}

body {
  /* max-width: 800px; */
  font-size: 1vw;
  font-family: Roboto Mono, monospace;
}

.wrapper > div {
  border-radius: 5px;
  background-color: rgb(240, 240, 240);
  padding: 1em;
}

.wrapper {
  display: grid;
  grid-template-areas: 
    "current current" 
    "capacity capacity" 
    "charge charge_time"
    "voltage power"
    "plot plot"
    "last_update last_update";
  gap: 10px;
}
.value {
  text-align: center;
  font-size: 12em;
}
.label {
  font-size: 5em;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {background-color: #33ccff;}
tr:nth-child(even) {background-color: #f2f2f2;}

#fogstar {
  height: 44vh;
  width: calc((16/9)*44vh);
}

.button {
  border: 1px solid black ;
  background-color: "#808080";
  width: 96%;
  height: 120px;
  font-size: 6em;
}

@media (min-width:1181px){
  .button {
    border: 1px solid black ;
    background-color: "#808080";
    width: 100px;
    height: 20px;
  font-size: 0.5em;
  }
}

@media (min-aspect-ratio: 16/9), (min-width:1180px) {
  .wrapper  {
    grid-template-columns: 23% 23% 23% 23%;
    grid-template-areas: 
    "current current plot plot"
    "capacity capacity plot plot"
    "charge charge_time voltage power"
    "last_update last_update last_update last_update";
  }
  .value {
    color: black;
    font-size: 4.4em ; 
  }
  .label {
    font-size: 2em;
  }

  #fogstar {
    height: calc((9/16)*44vw);
    width: 44vw;
  }
}

.current {
  grid-area: current;
}

.capacity {
  grid-area: capacity;
}

.charge {
  grid-area: charge;
}


.charge_time {
  grid-area: charge_time;
}

.voltage {
  grid-area: voltage;
}
.power {
  grid-area: power;
}

.plot {
  grid-area: plot;
}
.last_update {
  grid-area: last_update;
  
}

#last_update {
  font-size: 3em;
  text-align: center;
}