body {
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
      background: rgb(255, 255, 255);
      color: rgb(51, 51, 51);
      place-items: center;
    }
    header {
      background: #0a4d8c;
      color: #fff;
      padding: 2rem;
      text-align: center;
    }
    .body-details{
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 0, 0, 0.116);
    }
    section {
      padding: 2rem;
      margin: 2rem 5px;
      max-width: 1100px;
      background: rgb(100, 183, 247);
      border-radius: 8px;
      width: 80vw;
    }
    h2 {
      color: #0a4d8c;
      margin-top: 0;
    }
    .card-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }
    .card {
      border: 1px solid #0a4d8c;
      border-radius: 6px;
      padding: 1rem;
      background: linear-gradient(
        to bottom,
        rgb(189, 216, 243) 50%,
       rgb(100, 172, 245),
        rgb(22, 114, 185)
      );
      box-shadow: 0 10px 10px #0a4d8c;
      margin: 20px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
    }
    table, th, td {
      border: 1px solid #ffffff;
    }
    th, td {
      padding: 0.75rem;
      text-align: center;
    }
    th {
      background: #0a4d8c;
      color: #fff;
    }
    form {
      display: grid;
      gap: 1rem;
    }
    label {
      font-weight: bold;
    }
    input, select, textarea, button {
      padding: 0.6rem;
      font-size: 1rem;
    }
    button {
      background: #0a4d8c;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background: #083a68;
      box-shadow: 0 0 7px rgb(224, 240, 244);
    }
    .form-btns{
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .form-btns button{
        margin: 3px;
    }
    .form-btns .clear-btn{
        background-color: grey;
    }
    .message {
      margin-top: 1rem;
      font-weight: bold;
      font-size: x-large;
      color: red;
    }
    input:hover,
    textarea:hover,
    .card:hover{
        box-shadow: 0 0 7px rgb(224, 240, 244);
    }