/* Basic Reset */
    body,
    html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #454e59;
        color: #333;
        background-position: top;
        background-size: auto;
    }

    h3 {
    margin: 0;
    }

    /* Grid Layout for the Widgets */
    #dashboard {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        grid-template-rows: auto auto auto;
        gap: 20px;
        padding: 20px;
        box-sizing: border-box;

    }

    /* Generic Widget Styles */
    .widget {
        background-color: #DDE6ED;
        border-radius: 8px;
        box-shadow: 0 30px 15px rgba(0, 0, 0, 0.1);
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 200px;
        position: relative;
        overflow: hidden;

    }


.widget h2 {
    margin: 0 0 20px 0;
    font-size: 24px;
    color: #000000;
}
.widget h4 {
    margin: 0 0 1px 0;
    font-size: 15px;
    color: #000000;
}

    .widget p {
        margin: 0;
        font-size: 18px;
        color: #393939;
    }

    .widget i {
        margin-bottom: 15px;
        font-size: 24px;
        color: #5A6F7F;

    }


    /* Generic Icon Background Styles */
    .icon-background {
        position: absolute;
        top: -15%;
        left: -15%;
        width: 100%;
        height: 100%;
        font-size: 250px;
        opacity: 0.1;
        display: flex;
        justify-content: center;
        align-items: center;
    }






    /* Weather Widget */
    #weather {
        background-color: #5A6F7F;
        color: #fff;
        justify-content: center;

    }

    #weather-text {
        font-size: 40px;
    }


    .weather-icon-background {
        position: absolute;
        top: -15%;
        left: -15%;
        width: 100%;
        height: 100%;
        font-size: 250px;
        opacity: 0.1;
        display: flex;
        justify-content: center;
        align-items: center;
    }






    /* Digital Clock Widget */

    #date-time {
        background-color: #4f524f;
        color: #fff;
        font-size: 50px;
        justify-content: center;
    }




    /* Analogue Clock Widget */
    #time-analogue {
        position: relative;
        background-color: #4f524f;
        color: #fff;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        margin-left: 57.8px;
        margin-right: 57.8px;
    }

    #clock {
        position: relative;
        height: 40vw;
        width: 40vw;
        background-size: cover;
    }

    #hour,
    #minute,
    #second {
        position: absolute;
        background: black;
        border-radius: 10px;
        transform-origin: bottom;
    }

    #hour {
        width: 7px;
        height: 25%;
        top: 25%;
        left: 48.85%;
    }

    #minute {
        width: 5px;
        height: 30%;
        top: 19%;
        left: 48.9%;
    }

    #second {
        width: 2px;
        height: 40%;
        top: 9%;
        left: 49.25%;
        background-color: red;
        /* Smooth transition for the second hand */
        transition: transform 0.05s linear;
    }





/* BBC News Widget */
#news {
    background-color: #5A6F7F;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    padding: 20px; 
    align-items: start; 
    grid-auto-rows: min-content;
    column-gap: 10px;
}

#news-text-title {
    grid-column: 1 / -1; /* Makes title span all columns */
}

#news-text-title h3 {
    margin-top: 0; 
    margin-bottom: 16px;
}

#news-text-description {
    grid-row: 2;
    grid-column: 1 / span 1; 
}

#news-media {
    grid-row: 2;
    grid-column: 2 / span 1;
    display: flex; /* Makes it a flex container to center the image nicely */
    justify-content: center; 
    align-items: center;
    align-self: center;
    z-index: 1;
    
}

#news-media img {
    border-radius: 8px;
    max-width: 100%; /* Ensures image does not exceed its container */
    height: auto; /* Adjusts height automatically to maintain aspect ratio */
}







    /* Mill Hill News Widget */
    .mh-news-container {
        position: relative;
        overflow: hidden;
        grid-row: 1.5 / 4;
        height: 400px;
        grid-column: 2 / 4;

    }

    #mh-news {
        background-color: #DDE6ED;
        border-radius: 8px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        overflow: hidden;
    }

    .mh-news-media {
        height: 200px;
        width: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    #mh-news .news-date {
        font-size: 0.9em;
        color: #555;
        margin-bottom: 5px;
    }

    #mh-news .news-header h1 {
        font-size: 1.2em;
        margin-bottom: 5px;
    }

    #mh-news .news-excerpt {
        font-size: 1em;
        color: #333;
    }

    #mh-news .news-footer p {
        font-size: 10px;
        color: #666;
        margin-top: 15px;
        opacity: 0.8;
        position: absolute;
        bottom: 20px;
    }

    #mh-news .news-footer a {
        color: #0044cc;
        text-decoration: none;
    }

    #mh-news .news-footer a:hover {
        text-decoration: underline;
    }




    /* Bus Times Widget */
    .bus-container {
        grid-row: 2 / 4;
        height: 400px;
        display: block;
    }

    #bus-times {
        background-color: #5A6F7F;
        color: #fff;
        grid-row: span 1;
    }

    .bus-icon-background {
        top: -10%;
        left: -10%;
        width: 100%;
        height: 100%;
        font-size: 250px;
    }

    #bus-text {
        text-align: left;

    }

    #bus-times li {
        transition: color 0.5s ease-in-out;
    }





    /* Periods Widget */
    #periods {
        background-color: #5A6F7F;
        color: #DDE6ED;
        height: 400px;
        justify-content: center;
    }

    #periods-timings {
        display: flex;
        flex-direction: column;
    }

    .period-block {
        padding: 10px;
        margin-bottom: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 13px;
        width: 300px;
        text-align: center;
    }

    .current-period {
        background-color: #6D526B;
        color: white;
        transition: color 0.5s ease-in-out;
    }

    @keyframes pulse {
        0%, 100% {
        background-color: #5A6F7F;
        color: #DDE6ED;
        }
        50% {
        background-color: #6d526b80;
        color: white;
        }
    }
    
    .up-next {
        animation: pulse 2s ease-in-out infinite;
    }
    

/* Song Widget */
#song {
    background-color: #DDE6ED;
    color: #526D82;
    padding: 5px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    height: 95px; 
    padding-bottom: 10px;
}

#song h3 {
    font-size: 13px; 
    margin: 0; 
    padding: 5px;
}

.track-details {
    background-color: #DDE6ED;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 8px; 
    width: 90%;
    max-height: 55px;
    text-align: left;
    align-items: center;
    font-size: 10px; 
}

.track-details h2 {
    margin-top: 0;
    font-size: 14px; 
}
.track-details img {
    width: 40%;
    height: 100%; 
}


.track-info {
    display: flex;
    align-items: center;
}

.track-info div {
    flex: 1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 5px;
}

.track-artwork {
    margin-right: 10px;
    max-width: 55px; /* Adjusted max-width */
    max-height: 55px; /* Adjusted max-height */
    border-radius: 8px;
}

.track-artwork img {
    max-width: 40px; 
    max-height: 40px; 
    border-radius: 8px;
}

.track-details p {
    color: #3e5b71;
    margin: 0;
    font-size: 12px; 
    
}





    /* To-do (Maybe...) Widget */
    #to-do {
        background-color: #DDE6ED;
        color: #526D82;
        height: 65px;
        justify-content: center;
    }







    /* Notice (Current CS Projects) Widget */
    #notice {
        background-color: #DDE6ED;
        color: #5A6F7F;
        height: 65px;
        justify-content: center;
        display: block;

    }

    #notice li {
        color: #393939
    }








    /* Credits Widget */
    #credits {
        background-color: #DDE6ED;
        color: #526D82;
        height: 65px;
        justify-content: center;

        display: block;
    }