body {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Ensure items start from the top */
    height: 100vh;
    background-color: #1b5448;
    margin: 0;
    padding: 40px 20px; /* Ensure top and bottom spacing */
}

/* 
	old background: #1b5448
	new background: #1b5448
	
	old font color: #B77729
	new font color:
	
 */

.time-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align the children */
    padding: 20px; /* Add some padding to the time container */
    max-width: 70%; /* Ensure the time container does not exceed 90% of the screen width */
    max-hight: 70%; /* max-width: 1200px;  Set a maximum width for large screens */
    box-sizing: border-box; /* Include padding in the element's total width and height */
}

#site-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 4vw; /* Adjust as needed */
    color: #B77729;
    margin-bottom: 10px;
    text-align: left;
    width: 100%;
    padding-top: 20px; /* Add padding to the top */
}

#site-name, #local-site-name {

    font-family: 'JetBrains Mono', monospace;
    font-size: 4vw;
    color: #B77729;
    margin-bottom: 10px;
    text-align: left;
    padding-left: 5%; /* Adjust padding to align both headers properly */
}




#arizona-clock, #local-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12vw; /* Set a uniform font size for both clocks */
    font-weight: 700;
    display: flex;
    align-items: baseline;
    color: #B77729;
}

#arizona-clock, #local-clock span {
    display: inline-block;
}

#ampm {
    font-size: 5vw; /* Smaller font size for the AM/PM */
    margin-left: 10px;
    vertical-align: top;
}

#date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 5vw; /* Font size for the date */
    color: #B77729; /* Color for the date text */
    margin-top: 5px;
    text-align: left; /* Left align the date */
    width: 100%; /* Ensure the date element takes full width */
}

#additional-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2vw; /* Font size for the additional text */
    color: #B77729; /* Color for the additional text */
    margin-top: 20px; /* Space between date and additional text */
    text-align: left; /* Left align the additional text */
    width: 100%; /* Ensure the additional text element takes full width */
    padding: 10px; /* Add some padding inside the additional text element */
    box-sizing: border-box; /* Include padding in the element's total width and height */
}

.divider {
    width: 100%;
    border: 0;
    border-top: 3px solid #B77729; /* Color for the horizontal line */
    margin: 20px 0; /* Space around the horizontal line */
}

#local-time-container {
    text-align: center;
    margin-top: 20px; /* Space between Arizona time and local time */
}

#local-site-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 4vw;
    color: #B77729;
    margin-bottom: 10px;
    text-align: left; /* Left align the text */
	padding-left: 5%; /* Ensure it matches the "Time In Arizona" header */
    padding-right: 10px; /* Added spacing to the right */
}

#local-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15vw; /* Large font size for the time */
    font-weight: 700; /* Bold font weight */
    display: flex;
    align-items: baseline;
    color: #B77729; /* Dark color for the text */
}

#local-clock span {
    display: inline-block;
}

#local-ampm {
    font-size: 5vw; /* Smaller font size for the AM/PM */
    margin-left: 10px;
    vertical-align: top;
}


 #local-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 5vw; /* Font size for the date */
    color: #B77729; /* Color for the date text */
    margin-top: 5px;
    text-align: left; /* Left align the date */
}


#local-timezone {
    font-family: 'JetBrains Mono', monospace;
    font-size: 4vw; /* Adjust font size as needed */
    color: #B77729;
    margin-bottom: 10px;
    padding-left: 5%; /* Ensure the timezone text is aligned with the header */
}

#local-time-header {
    display: flex;
    justify-content: flex-start; /* Adjust spacing between the two elements */
    align-items: center; /* Align items vertically */
    width: 100%; /* Ensure the header takes full width */
}

.timezone-table {
    width: 100%;
    text-align: center;
    color: #B77729;
    
}

.timezone-table table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
    color: #B77729;
}

.timezone-table tr:hover {
    background-color: #2B7D68; /* Slightly lighter shade for hover */
    color: #FFFFFF; /* Lighten text color for contrast */
}


.timezone-table th, .timezone-table td {
    padding: 5px;
    font-size: 3vw;
    border-left: 1px solid #B77729; /* Only left border for vertical lines */
    word-wrap: normal;
	width: 14.285%;
	font-family: 'JetBrains Mono', monospace; /* Already a compact font, but consider reducing the font size further */
    font-size: 1.5vw; /* Further reduce the font size */
}


/* Time zone area */


.timezone-table th:last-child, .timezone-table td:last-child {
    border-right: 0; /* Remove the border on the last column */
}

.timezone-table th:first-child, .timezone-table td:first-child {
    border-left: 0; /* Remove the border on the first column */
}

.timezone-table th {
    background-color: #1b5448;
    color: #B77729;
}

.timezone-table td {
    text-align: center;
}

.timezone-table tr {
    background-color: #1b5448;
    color: #B77729;
}

.time-container {
    max-width: 100%; /* Adjust if needed, should not exceed the screen width */
    overflow-x: auto; /* Allow horizontal scroll if the content overflows */
}





/* Collapsible button style */
.collapsible {
    background-color: #1b5448;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/* Collapsible content style */
.collapsible-content {
    padding: 0 18px;
    display: none; /* Hidden by default */
    overflow: hidden;
    background-color: #f1f1f1;
}

/* Table inside the collapsible content */
#hourly-timezones {
    width: 100%;
    border-collapse: collapse;
}

#hourly-timezones th, #hourly-timezones td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

#hourly-timezones th {
    background-color: #1b5448;
    color: white;
}

#hourly-timezones td {
    color: #B77729;
}

/* Site info section */
#site-discription {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2vw;
    color: #B77729; 
    margin-top: 5px;
    text-align: left; 
    width: 100%;
}


#form-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2vw;
    color: #B77729; 
    margin-top: 5px;
    text-align: left; 
    width: 100%;
}

/* Link styles within #form-link */
#form-link a:link,
#form-link a:visited,
#form-link a:hover,
#form-link a:active {
    color: #B77729;
}

#time-observation-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 3vw; /* Keep it similar to other text elements */
    color: #B77729; /* Use the existing color scheme */
    margin-top: 10px; /* Adjust spacing */
    margin-bottom: 20px; /* Space below the element */
    text-align: left; /* Ensure it aligns with the rest of the page */
    width: 100%; /* Ensure full width alignment */
    padding-left: 0%; /* Keep consistent with other sections */
    padding-right: 5%; /* Consistent padding */
}

#time-observation-status-expanded-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 3vw; /* Keep it similar to other text elements */
    color: #B77729; /* Use the existing color scheme */
    margin-top: 10px; /* Adjust spacing */
    margin-bottom: 20px; /* Space below the element */
    text-align: left; /* Ensure it aligns with the rest of the page */
    width: 100%; /* Ensure full width alignment */
    padding-left: 0%; /* Keep consistent with other sections */
    padding-right: 5%; /* Consistent padding */
}

#time-observation-status-expanded {
    font-family: 'JetBrains Mono', monospace;
    font-size: 3vw;
    color: #B77729;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: left;
    width: 100%;
    padding-left: 0%;
    padding-right: 5%;
}

#time-observation-status-expanded p {
    margin: 0; /* Remove default margins */
}

#fine_print {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1vw; /* Keep it similar to other text elements */
    color: #B77729; /* Use the existing color scheme */
    margin-top: 10px; /* Adjust spacing */
    margin-bottom: 20px; /* Space below the element */
    text-align: left; /* Ensure it aligns with the rest of the page */
    width: 100%; /* Ensure full width alignment */
    padding-left: 0%; /* Keep consistent with other sections */
    padding-right: 5%; /* Consistent padding */
}