:root {
  --color-background: #fcebd3;
  --color-table-header: #2d6a8a;
  --color-table-border: #17324d;
}

body {
  background-color: var(--color-background);
}

table {
  width: 40%;
  table-layout: fixed;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid var(--color-table-border);
  padding: 8px;
  text-align: left;
}
th {
  background-color: var(--color-table-header);
}

th:nth-child(1),
td:nth-child(1) {
  width: 20%;
}

th:nth-child(2),
td:nth-child(2) {
  width: 10%;
}

th:nth-child(3),
td:nth-child(3) {
  width: 10%;
}

.flag {
  width: 20px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 400px) {
  th,
  td {
    padding: 5px;
    font-size: 14px;
  }

  .flag {
    width: 18px;
  }
}