/*FONTS START*/
@font-face {
    font-family: 'GothamPro';
    src: url('fonts/WOFF2/GothaProBla.woff2') format('woff2'),
         url('fonts/WOFF/GothaProBla.woff') format('woff'),
         url('fonts/OTF/GothaProBla.otf') format('opentype');
    font-weight: 900; /* Black */
    font-style: normal;
}

@font-face {
    font-family: 'GothamPro';
    src: url('fonts/WOFF2/GothaProBol.woff2') format('woff2'),
         url('fonts/WOFF/GothaProBol.woff') format('woff'),
         url('fonts/OTF/GothaProBol.otf') format('opentype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

@font-face {
    font-family: 'GothamPro';
    src: url('fonts/WOFF2/GothaProLig.woff2') format('woff2'),
         url('fonts/WOFF/GothaProLig.woff') format('woff'),
         url('fonts/OTF/GothaProLig.otf') format('opentype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'GothamPro';
    src: url('fonts/WOFF2/GothaProLigIta.woff2') format('woff2'),
         url('fonts/WOFF/GothaProLigIta.woff') format('woff'),
         url('fonts/OTF/GothaProLigIta.otf') format('opentype');
    font-weight: 300; /* Light Italic */
    font-style: italic;
}

@font-face {
    font-family: 'GothamPro';
    src: url('fonts/WOFF2/GothaProMed.woff2') format('woff2'),
         url('fonts/WOFF/GothaProMed.woff') format('woff'),
         url('fonts/OTF/GothaProMed.otf') format('opentype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'GothamPro';
    src: url('fonts/WOFF2/GothaProReg.woff2') format('woff2'),
         url('fonts/WOFF/GothaProReg.woff') format('woff'),
         url('fonts/OTF/GothaProReg.otf') format('opentype');
    font-weight: 400; /* Regular */
    font-style: normal;
}

/*FONTS END*/


html, body {
    margin: 0;
    padding: 0;
    width: 100%; /* Ensure the body takes up full viewport width */
    height: 100vh; /* Adjusted for full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: white;
}

#clock-widget-container {
    border-radius: 25px;
    padding: 20px; /* Adjust padding as needed */
    background-color: #E7F0FE; /* Ensure this is the desired color */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Make container stretch to the edges */
    box-sizing: border-box; /* Include padding in the width calculation */
}

#clock-widget {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Adjust if you need internal padding or margins */
    max-width: 600px; /* This now controls the max width of the content */
    margin: auto; /* Center the widget inside the container if it's narrower than 100% */
    padding: 10px;
    box-sizing: border-box;
}

.time-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.time-container span {
    margin: 2px 0;
    padding: 7px;
    text-align: center;
}

.time-container .label {
    font-family: 'GothamPro', sans-serif;
    font-weight: 300;
    font-size: 1em;
    color: #1966D2;
}

#day, #hour, #minute, #second {
    font-family: 'GothamPro', sans-serif;
    font-weight: 800;
    font-size: 2.5em; /* Adjust this as needed */
    color: #1966D2;
}



/*SIZING STYLES START*/
/* Style adjustments for screens with a max width of 800px */


/* Style adjustments for screens with a max width of 600px */
@media (max-width: 350px) {
    /* Adjust font size for the smallest layout */
    .time-container span {
        font-size: 1.5em !important;
    }
.time-container .label {
    font-size: 1.1em !important;
}
}



@media (max-width: 270px) {
    #clock-widget {
        flex-wrap: wrap; /* Allow the containers to wrap to the next line */
        max-width: none; /* Remove max-width restriction to allow wrapping */
        width: 85% !important;
        padding: 0;
    }
    .time-container {
        /* Take full width for half of the containers to stack them */
        flex-basis: 50%;
        flex-grow: 0;
        flex-shrink: 0;
        margin: 1px 0 !important; /* Reduce margin for stacked layout */
    }
    /* Adjust font size for the smallest layout */
    .time-container span {
        font-size: 1.3em !important;
    }
.time-container .label {
    font-size: 1em !important;
}
}
/*SIZING STYLES END*/

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #191919; /* Dark mode background */
    }

#clock-widget-container {
    background-color: #212121;
}

    .time-container .label {
        color: #828181; /* Dark mode label color */
    }

    #day, #hour, #minute, #second {
        color: white; /* White text for time and labels in dark mode */
    }
}