/* Resetting Default Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #e6e6e6;
    color: #333;
    margin: 0;
    padding: 0;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* Navbar */
/* Navbar Styling */
.navbar {
    background: #003366;
    color: #fff;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between; /* Space out the logo and UTC time */
    align-items: center;
}

/* UTC Time and Date Styling */
.utc-time-container {
    text-align: left; /* Align time and date to the right */
    font-family: 'Courier New', Courier, monospace; /* Monospaced font for uniform appearance */
    color: #00ccff; /* Highlight color for visibility */
}

#utcTimeDisplay {
    font-size: .9rem; /* Slightly larger for time */
    margin-bottom: 5px; /* Space between time and date */
}

#utcDateDisplay {
    font-size: .9rem; /* Slightly smaller for date */
    color: #fff; /* Keep date in white for better contrast */
}



/* Navbar Logo Styling */
.navbar .logo {
    font-family: 'Courier New', Courier, monospace; /* Monospaced font for a typewriter effect */
    font-style: italic;
    letter-spacing: 2px; /* Space out the letters */
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.navbar .logo span {
    font-size: 0.8rem; /* Smaller font size for the "by K4DZX" */
    margin-left: 10px; /* Add space between RADIO HORIZON and by K4DZX */
    font-style: normal;
    color: #00ccff; /* Highlight color for "by K4DZX" */
}


.nav-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-links li {
    margin: 0 15px;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #00ccff;
}

/* Dropdown Menu */
.nav-links .dropdown {
    position: relative;
}

.nav-links .dropdown-content {
    display: none;
    position: absolute;
    background-color: #003366;
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.nav-links .dropdown-content a {
    color: white;
    padding: 12px 16px;
    display: block;
    text-decoration: none;
}

.nav-links .dropdown-content a:hover {
    background-color: #00ccff;
}

.nav-links .dropdown:hover .dropdown-content {
    display: block;
}

/* Responsive Navbar */
@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        align-items: center;
    }

    .nav-links li {
        margin: 10px 0;
    }
}

/* Clocks and Map */
#clocks {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    margin: 20px 0;
    gap: 20px; /* Space between the boxes */
}

#clocks div {
    flex: 1; /* Equal width for all boxes */
    max-width: 300px; /* Set a maximum width */
    background-color: #ffffff; /* White background */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    padding: 15px;
    text-align: center;
}

#clocks h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #003366;
}

#clocks p, #clocks div {
    font-size: 1rem;
    color: #333;
}


#map {
    width: 100%;
    height: 300px;
    margin-top: 20px;
}

/* Log Section */
#logSection {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}

#logForm label {
    display: block;
    margin: 10px 0 5px;
}

#logForm input, #logForm select, #logForm button {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#logForm button {
    background: #003366;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s;
}

#logForm button:hover {
    background: #00ccff;
}

/* Footer */
footer {
    background: #003366;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
}

footer a {
    color: #00ccff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}
/* ISS Section */
#issSection {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    margin: 20px 0;
    gap: 20px; /* Space between the two sections */
}

#issTracking {
    flex: 1; /* Equal width */
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

#issTracking h3 {
    margin-bottom: 10px;
}

#issTracking ul {
    list-style: none;
    padding: 0;
}

#issTracking li {
    margin-bottom: 10px;
}

/* Responsive for Smaller Screens */
@media (max-width: 768px) {
    #issSection {
        flex-direction: column; /* Stack vertically */
    }

    #issTracking {
        flex: none; /* Reset width for stacked view */
    }
}
/* Solar Data Section */
.solar-data-container {
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Align content vertically */
    gap: 20px; /* Space between the two solar data sections */
    margin: 20px 0;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.solar-data {
    flex: 1; /* Equal width */
    max-width: 600px; /* Set a max width for consistency */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* Indicate interactivity */
}

.solar-data img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Optional: Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solar-data:hover img {
    transform: scale(1.7); /* Zoom effect */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}

/* Responsive Layout */
@media (max-width: 768px) {
    .solar-data-container {
        flex-direction: column; /* Stack vertically on small screens */
    }

    .solar-data {
        max-width: 100%; /* Full width on smaller screens */
    }
}

/* Call Sign Lookup Section */
#callSignLookup {
    display: flex;
    align-items: center; /* Align input and buttons vertically */
    justify-content: center; /* Center the entire section horizontally */
    gap: 10px; /* Space between the input and buttons */
    margin: 20px auto;
}

#callSign {
    padding: 10px;
    width: 60%; /* Adjust width as needed */
    max-width: 400px; /* Limit max width for larger screens */
    border: 1px solid #ccc;
    border-radius: 5px;
}

#callSignLookup button {
    padding: 10px 20px;
    background-color: #003366;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#callSignLookup button:hover {
    background-color: #00ccff;
}

@media (max-width: 768px) {
    #callSignLookup {
        flex-direction: column; /* Stack elements vertically on smaller screens */
        gap: 15px;
    }

    #callSign {
        width: 80%; /* Expand input width on smaller screens */
    }
}
/* Two-Column Layout */
.two-column-layout {
    display: flex;
    justify-content: space-between; /* Space between the two columns */
    align-items: flex-start; /* Align items at the top */
    gap: 20px; /* Space between the boxes */
    margin: 20px 0;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.two-column-layout .left-box,
.two-column-layout .right-box {
    flex: 1; /* Equal width for both boxes */
    background-color: #ffffff; /* White background */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    padding: 15px;
    max-width: 48%; /* Slight margin to ensure boxes don’t touch */
}

.two-column-layout h3 {
    font-size: 1.5rem;
    color: #003366; /* Match the site's primary color scheme */
    margin-bottom: 10px;
}

.two-column-layout ul {
    list-style: none;
    padding: 0;
}

.two-column-layout ul li {
    margin-bottom: 5px;
    font-size: 1rem;
    color: #333;
}

.two-column-layout iframe {
    border-radius: 10px; /* Optional: Rounded corners for iframe */
}

@media (max-width: 768px) {
    .two-column-layout {
        flex-direction: column; /* Stack boxes vertically on smaller screens */
    }

    .two-column-layout .left-box,
    .two-column-layout .right-box {
        max-width: 100%; /* Full width on smaller screens */
    }
}
/* Container for the Widgets */
.widget-container {
    display: flex;
    justify-content: space-between; /* Space between the widgets */
    align-items: flex-start; /* Align items at the top */
    gap: 20px; /* Add space between the widgets */
    margin: 20px 0;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* DXWatch Widget Styling */
.dxwatch-widget {
    flex: 1; /* Equal width */
    max-width: 48%; /* Limit maximum width */
}

/* Solar Globe Widget Styling */
.solar-globe-widget {
    flex: 1; /* Equal width */
    max-width: 48%; /* Limit maximum width */
    text-align: center; /* Center align the globe */
}

.solar-globe-widget img {
    border: 1px solid #ccc; /* Add a border around the globe */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Responsive Design */
@media (max-width: 768px) {
    .widget-container {
        flex-direction: column; /* Stack widgets vertically */
    }

    .dxwatch-widget, .solar-globe-widget {
        max-width: 100%; /* Full width on smaller screens */
    }
}