header {
    background-color: var(--deep-space-blue);
    border-bottom: 1px solid var(--silver-glow);
}

body{
    background-color: var(--cloud-grey);
    color: var(--deep-space-blue);
}

#policy{
    background-color: var(--deep-space-blue);
    background-color: var(--cloud-grey);
    padding: 0 80px 40px;
    margin: 120px auto 40px;
    max-width: 1400px;
}

h1, h2{
    color: var(--amber-hover);
    color: var(--deep-space-blue);
}

h2{
    font-size: 2.5rem;
    font-weight: 600;
}

h3{
    color: var(--amber-hover-cta);
    color: var(--deep-space-blue);
        margin-top: 1rem;
    margin-bottom: 1rem;
}

h4{
    color: var(--card-yellow-2);
    color: var(--deep-space-blue);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

b, strong, h3, h4{
    font-family: "Lato", sans-serif;
    font-weight: 700;
}

p{
    line-height: 2;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

li, p{
    max-width: 600px;
}

li {
        line-height: 1.8;
    margin-bottom: .5rem;
    margin-top: .5rem;
}

ul {
        margin-bottom: .5rem;
    margin-top: .5rem;
}

a {
    color: var(--subtle-link);
    text-decoration: underline;
    text-underline-offset: 4px;
}

a:hover {
    color: var(--amber-dark-hover);
}

hr{
    margin: 40px auto;
    width: 100%;
    border: none;
    height: 1px;
    background-color: #999;
}

table{
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: var(--deep-space-blue);
    color: #ffffff;
    border: 1px solid #3a5068; /* Slightly lighter Deep Space Blue */
  }

  table th,
  table td {
    border: 1px solid #3a5068; /* Table border */
    text-align: left;
    padding: 12px 15px;
  }

  table th {
    background-color: #243648; /* Slightly darker for header */
  }

  table tr:nth-child(even) {
    background-color: #26405d; /* Slightly lighter for alternating rows */
  }

  table tr:hover {
    background-color: #3a5068; /* Highlight row on hover */
  }

  table td a {
    /* color: #ffda6f; */
    color: var(--deep-space-blue);
    text-decoration: none;
  }

  table td a:hover {
    text-decoration: underline;
  }

@media screen and (max-width: 768px),
screen and (max-width: 1024px) and (orientation: landscape) {
    
    #policy{
        padding: 20px;
        margin: 65px auto 40px;
        max-width: fit-content;
    }

    h2{
        font-size: 2.125rem;
    }

    p, li p{
        word-break: break-word;
    }

    table{
        font-size: 0.825rem;
        display: block;
        overflow-x: auto; /* Allow only the table to scroll horizontally */
        width: 100%;
    }

}