body {

    font-family: Arial, sans-serif;
}

header {
    text-align: center;
}

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 10px;
}

#map {
    flex: 1 1 500px;
    min-width: 200px;
    height: 85dvh;
}

@media (max-width: 900px) {
    main {
        flex-direction: column;
    }
    table.cards {
        display: block !important;
    }
    table.table {
        display: none;
    }
}

#tableContainer {
    flex: 1 1;
    display: grid;
    align-self: flex-start;
    margin: 0 auto;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;

}

th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;

}

table {
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

.newCall {
    background-color: #d6ecd4;
}

.youngCall {
    background-color: #f9f9a0;
}

.oldCall {
    background-color: #f9d6d6;
}

.deadCall {
    background-color: #f9a0a0;
}