body {
  font-family: Arial, sans-serif;
  margin: 0; padding: 0;
}
nav {
  background: #333; padding: 10px;
}
nav a {
  color: white; margin-right: 10px; text-decoration: none;
}
main { padding: 15px; }
table {
  width: 100%; border-collapse: collapse; margin-top: 10px;
}
table th, table td {
  border: 1px solid #ddd; padding: 8px;
}
@media(max-width:600px){
  table, thead, tbody, th, td, tr {
    display: block;
  }
  tr { margin-bottom: 10px; }
  td { text-align: right; padding-left: 50%; position: relative; }
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0; width: 50%; padding-left: 15px; font-weight: bold;
    text-align: left;
  }
}
form {
  display: flex;
  flex-direction: column;
}
form input, form select, form button {
  margin-bottom: 10px;
  padding: 8px;
  font-size: 1rem;
}