body {
  background-color: black;
  color: white;
  font-family: Georgia, serif;
  text-align: center;
}

.pchart {
  background-color: #fff;
  color: #000;
  font-weight: 700;
  font-style: italic;
  font-size: large;
  border-width: 5px;
  border-color: #893bff;
  border-style: groove;
  text-shadow: 1px 1px #ffd700;
  padding-top: 10px;
  padding-bottom: 10px;
  border-collapse: collapse;
}
table {
  border-collapse: collapse;
}
tr {
  border: solid;
  border-width: 1px 0;
}

@media screen and (min-width: 500px) /* Desktop */ {
  table {
    text-align: center;
    border-collapse: separate;
  }
  th {
    font-size: 12px;
    padding: 5px 3px;
  }
  td {
    font-size: x-large;
    padding: 5px 3px;
  }
}
@media screen and (max-width: 500px) /* Tablet */ {
  table {
    max-width: 110%;
    min-width: 60%;
    text-align: center;
    border-collapse: separate;
  }
  th {
    font-size: 8px;
    padding: 4px 1px;
  }
  td {
    font-size: 18px;
    padding: 4px 1px;
  }
}
@media screen and (max-width: 320px) /* mobile */ {
  table {
    max-width: 110%;
    min-width: 60%;
    text-align: center;
    border-collapse: separate;
  }
  th {
    font-size: 7px;
    padding: 3px 1px;
  }
  td {
    font-size: 15px;
    padding: 3px 1px;
  }
}