:root {
    --global-background: #0e0e0e;
    --global-font-color: #ffffff;

    --gobal-border-radius: 8px;

    --platinum: #dcdcddff;
    --platinum-trans: rgba(220, 220, 221, 0.2);
    --french-gray: #c5c3c6ff;
    --outer-space: #46494cff;
    --paynes-gray: #4c5c68ff;
    --blue-munsell: #1985a1ff;
}

* {
    box-sizing: border-box;
}

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


.clock {
    position: fixed;
    /* border: 2px solid red; */
    bottom: 80px;
    right: 20px;
    z-index: 10;
    border-radius: var(--gobal-border-radius);
    color: var(--blue-munsell);
    background-color: var(--platinum-trans);
    width: 300px;
    padding: 30px;
}

.time-display {
    /* border: 2px solid red; */
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2.6rem;
    font-weight: bold;
}

.date-display {
    /* border: 2px solid red; */
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    font-weight: bold;
}



.weather {
    position: fixed;
    /* border: 2px solid red; */
    bottom: 80px;
    left: 20px;
    z-index: 10;
    border-radius: var(--gobal-border-radius);
    color: var(--blue-munsell);
    background-color: var(--platinum-trans);
    width: 150px;
    padding: 30px;
}


.weather-display {
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.0rem;
    font-weight: bold;
}

.newsfeed {
    position: fixed;
    /* border: 2px solid red; */
    bottom: 10px;
    left: 20px;
    z-index: 5;
    border-radius: var(--gobal-border-radius);
    color: var(--blue-munsell);
    background-color: var(--platinum-trans);
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    padding-left: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    
}




.slideshow-image {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    max-width: 100%;
    max-height: 100%;
}


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



@keyframes loading-animation {

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

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