:root {
    --global-background: #181616;
    --global-font-color: #ffffff;
    
    --global-radius: 8px;
    
    
    --prussian-blue: #012a4aff;
    --indigo-dye: #013a63ff;
    --indigo-dye-2: #01497cff;
    --indigo-dye-3: #014f86ff;
    --ucla-blue: #2a6f97ff;
    --cerulean: #2c7da0ff;
    --air-force-blue: #468fafff;
    --air-superiority-blue: #61a5c2ff;
    --sky-blue: #89c2d9ff;
    --light-blue: #a9d6e5ff;
}

* {
    box-sizing: border-box;
}

body { 
    margin: 0;
    padding: 0;
    background-color: var(--global-background);
    color: var(--global-font-color);
}



.clock{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    border-radius: var(--global-radius);
    color: var(--light-blue);
    background-color: var(--indigo-dye);
    width: 300px;
    padding: 30px;
}

.time-display{
    text-align: center;
    font-size: 2.5rem;
}

.date-display{
    text-align: center;
    font-size: 1.1rem;
}


.slideshowImage{
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    max-width: 50%;
    max-height: 50%;
    border-radius: var(--global-radius);
    z-index: 15;
}

.loading-screen{
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 100px;
    height: 100px;
    background-color:  var(--air-force-blue);
    border-radius: 50%;
    animation-name: loading-animation;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

@keyframes loading-animation{

    0%{
        width: 100px;
        height: 100px;
        opacity: 1;
    }

    100%{
        width: 300px;
        height: 300px;
        opacity: 0;
    }

}



.weather{
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10;
    color: var(--light-blue);
    background-color: var(--indigo-dye);
    border-radius:  var(--global-radius);
    width: 150px;
    padding: 30px;
}


.weather-display{
    text-align: center;
    font-size: 1.1rem;    
}

.news{
    position: fixed;
    width: 98%;
    top: 20px;
    left: 20px;
    z-index: 10;
    color: var(--light-blue);
    background-color: var(--indigo-dye);
    border-radius:  var(--global-radius);
    padding: 30px;
    text-align: center;
}

.news-title{
    text-align: left;
    font-size: 1.3rem;
    font-weight: bold;    
}

.news-topline{
    text-align: left;
    font-size: 0.9rem;
    text-align: center;    
}

.read-more{
    background-color: var(--indigo-dye);
    left:50%;
    font-size: 0.5rem;
    padding: auto;     
}

a{
    text-decoration: none;
    color: var(--light-blue);
}

a:hover{
    color: var(--cerulean);
}

@media only screen and (max-width: 600px){

    .clock{
    position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 10;
        border-radius: var(--global-radius);
        color: var(red);
        background-color: var(--indigo-dye);
        width: 300px;
        padding: 30px;
    }
    


}