:root {
    --brown: #42332B;
    --dark_brown: #28211B;
    --white: #FFF;
    --copper: #F0DFD6;
    --orange: #B55F35;
    --orange-text: #d5906f;
    --tan: #E3C189;
}

a {
    color: var(--orange-text);
}

a:visited {
    color: var(--tan);
}


.main-content {
    /* Or use grid, depending on your layout */
    display: flex;
    /* Make sure the main content takes up the full viewport height */
    height: 100vh;
    /* width: 100%; */
    grid-template-rows: 1fr 1fr;
    column-gap: 2em;
}

.left-content {
    /* Allow the left content to take up available space */
    width: 50%;
    /* Enable vertical scrolling for the left content */
    overflow-y: scroll;

}

.right-content {
    /* Anchor the right content to the viewport */
    width: 50%;
    /* Make the right content take up the full viewport height */
    height: 100vh;
    /* background-color: #f0f0f0; */
    /* Add a background color for better visibility */
}

table {
    width: 100%;
    border-collapse: collapse;
    /* Optional: for cleaner borders */
}

th {
    color: var(--dark_brown);
    background-color: var(--tan);
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

tr:nth-child(odd) {
    background-color: var(--brown);
}

tr:nth-child(even) {
    background-color: var(--dark_brown);
}

h1,
h2 {
    font-family: "Meta Serif Pro";
}

p {
    font-family: "IBM Plex Sans";
}


/*from Troy the consultant*/
/*0f2c5c*/
/*555*/
.tablink {
    /* background-color: #0F2C5C; */
    /* color: white; */
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    background-color: var(--brown);
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tablink_container {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.tablink_container #about_box {
    margin-left: auto;

}

#about {
    background-color: var(--orange);
}

.tablink:hover {
    color: black;
    background-color: #d3b07e;
}

.tabcontent {
    color: black;
    display: none;
    padding: 100px 20px;
    height: 100%;
}

iframe {
    border: none;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    /* background-color: #f9f9f9; */
    border-radius: 6px;
    font-family: sans-serif;
    max-width: 800px;
    margin: auto;
    border: 1px solid black;
    background-color: var(--brown);
    color: var(--white);
}

.search-form label {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    font-size: 0.9rem;
    flex: 1 1 150px;
}

.search-form input[type="text"],
.search-form select {
    padding: 0.4rem;
    margin-top: 0.2rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

.search-form button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    background-color: #3366cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 1.3rem;
}

.search-form button:hover {
    background-color: #254a99;
}

.basic_background {
    background-color: var(--brown);
    color: var(--white);
}

.home_button {
    color: var(--copper);
}

.website_title {
    text-align: center;
    font-family: "Meta Serif Pro";

}

#defaultOpen {
    text-decoration: none;
    color: var(--copper);
    text-align: center;
    font-family: "Meta Serif Pro";
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.64px;
}

#defaultOpen:hover {
    color: black;
}

.which_checkboxes {
    display: flex;
    flex-direction: row;
}