:root {
  --color-primary: #000;
  --color-secondary: #fff;
  --thick-border: 3px solid var(--color-primary);
  --mid-border: 2px solid var(--color-primary);
  font-family: "Helvetica", Arial, sans-serif;
  font-weight: 300;
  color: var(--color-primary);
}

body {
  margin: 0;
}
header {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  padding: 2.378rem 1.75rem 2.378rem 3.4375rem;
  margin-bottom: 3.625rem;
  display: flex;
  justify-content: space-between;
  font-size: clamp(1.5rem, 1.063rem + 1.794vi, 3rem);
  font-weight: 700;
  img {
    height: 48px;
  }
}

main {
  margin: 0 3.4375rem;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin: 0;
  }

  h1 {
    font-size: clamp(2.25rem, 2.031rem + 0.897vi, 3rem);
    font-weight: 700;
  }

  h2 {
    font-size: clamp(2rem, 1.709rem + 1.196vi, 3rem);
    font-weight: 300;
  }

  h3 {
    font-size: clamp(0.75rem, 0.386rem + 1.495vi, 2rem);
    font-weight: 700;
  }

  h4 {
    font-size: clamp(1.25rem, 0.74rem + 2.093vi, 3rem);
    font-weight: 700;
  }

  h5 {
    font-size: clamp(1.625rem, 1.224rem + 1.644vi, 3rem);
    font-weight: 300;
  }

  h6 {
    font-size: clamp(1rem, 0.854rem + 0.598vi, 1.5rem);
    font-weight: 700;
  }

  .error {
    color: red;
    font-weight: 700;
    font-size: clamp(2.25rem, 2.031rem + 0.897vi, 3rem);
  }

  #dashboard-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: clamp(2.375rem, 1.701rem + 2.765vi, 4.688rem);
    #last-updated {
      font-size: 1.25rem;
      line-height: 1.5rem;
    }
  }

  .outlet {
    padding-top: 1.25rem;
    margin-bottom: clamp(4.063rem, 3.425rem + 2.616vi, 6.25rem);
    border-top: var(--thick-border);
    border-bottom: var(--thick-border);
    .header {
      margin-bottom: 1.25rem;
    }
    table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
      thead {
        th {
          text-align: left;
          padding: 0.8rem 0 0.5rem 0;
          border-top: var(--thick-border);
          border-bottom: var(--thick-border);
        }
        th:nth-child(2) {
          h3::after {
            content: "Qualified Leads";
          }
        }
        th:nth-child(3) {
          h3::after {
            content: "Appointments";
          }
        }
      }
      tbody {
        td {
          padding: 1.375rem 0 1rem 0;
        }
        tr:not(:last-child) {
          border-bottom: var(--mid-border);
        }
      }
    }
  }
}

@media screen and (max-width: 82rem) {
  header {
    img {
      display: none;
    }
  }
  main {
    #dashboard-header {
      display: flex;
      flex-direction: column;
      .header {
        border-bottom: var(--mid-border);
      }
      #last-updated {
        border-bottom: var(--thick-border);
      }
    }
    .outlet {
      table {
        th:first-child,
        td:first-child {
          width: clamp(6.25rem, 1.301rem + 20.305vi, 18.75rem);
        }
        thead {
          th:nth-child(2) {
            h3::after {
              content: "Q. Leads";
            }
          }
          th:nth-child(3) {
            h3::after {
              content: "Appts";
            }
          }
        }
      }
    }
  }
}