:root {


    --global-border-radius: 8px;

    /* CSS HEX */
    --dark-cyan: #119da4ff;
    --cerulean: #0c7489ff;
    --midnight-green: #13505bff;
    --black: #040404ff;
    --timberwolf: #d7d9ceff;
    --yet: #333333;
}

* {
    box-sizing: border-box;
}



body { 
    margin: 0;
    padding: 0;
    background-color: var(--black);
    color: var(--timberwolf);
    
}



.clock {
    position: fixed;
    bottom: 60px;
    right: 0px;
    z-index: 10;
    border: 6px, solid, var(--dark-cyan);
    border-radius: var(--global-border-radius);
    padding: 30px;
    margin: 10px;
    width: 300px;
    text-align: center;
    color: var(--timberwolf);
    background-color: var(--yet);

}

.clockDown {
    position: fixed;
    bottom: 20px;
    right: 0px;
    z-index: 10;
    border: 6px, solid, var(--dark-cyan);
    border-radius: var(--global-border-radius);
    padding: 30px;
    margin: 10px;
    width: 300px;
    text-align: center;
    color: var(--timberwolf);
    background-color: var(--yet);
}

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

.date-display {
    font-size: 1.4rem;
}

.solclock {
    position: fixed;
    bottom: 200px;
    right: 0px;
    z-index: 5;
    border: 6px, solid, var(--dark-cyan);
    border-radius: var(--global-border-radius);
    padding: 30px;
    margin: 10px;
    width: 300px;
    text-align: center;
    color: var(--timberwolf);
    background-color: var(--yet);
}


.weather {
    position: fixed;
    bottom: 60px;
    left: 0px;
    z-index: 10;
    border: 6px, solid, var(--dark-cyan);
    border-radius: var(--global-border-radius);
    padding: 30px;
    margin: 10px;
    width: 300px;
    text-align: center;
    color: var(--timberwolf);
    background-color: var(--yet);

}

.weatherDown {
    position: fixed;
    bottom: 20px;
    left: 0px;
    z-index: 10;
    border: 6px, solid, var(--dark-cyan);
    border-radius: var(--global-border-radius);
    padding: 30px;
    margin: 10px;
    width: 300px;
    text-align: center;
    color: var(--timberwolf);
    background-color: var(--yet);

}

.temp {
    font-size: 1.5rem;
}
.wind {
    font-size: 1.5rem;
}


.newsfeed {
    position: fixed;
    bottom: 0px;
    z-index: 5;
    border: 6px, solid, var(--dark-cyan);
    border-radius: var(--global-border-radius);
    padding: 5px;
    margin: 10px;
    width: 95%;
    text-align: center;
    color: var(--timberwolf);
    background-color: var(--yet);
    font-size: 1.5rem;

}


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

.loading-screen1 {
    position: fixed;
    left: 50%;
    top: 50%; 
    translate: -50%, -50%; 
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: var(--midnight-green); 
    animation-name: loading-animation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.loading-screen2 {
    position: fixed;
    right: 50%;
    bottom: 50%; 
    translate: -50%, -50%; 
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: var(--midnight-green); 
    animation-name: loading-animation;
    animation-duration: 1.9s;
    animation-iteration-count: infinite;
}
.loading-screen3 {
    position: fixed;
    right: 50%;
    top: 50%; 
    translate: -50%, -50%; 
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: var(--midnight-green); 
    animation-name: loading-animation;
    animation-duration: 2.2s;
    animation-iteration-count: infinite;
}
.loading-screen4 {
    position: fixed;
    left: 50%;
    bottom: 50%; 
    translate: -50%, -50%; 
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: var(--midnight-green); 
    animation-name: loading-animation;
    animation-duration: 1.7s;
    animation-iteration-count: infinite;
}

@keyframes loading-animation {
    0% {
        width: 100px;
        height: 100px;
        opacity: 1;
    }
    50% {
        width: 300px;
        height: 300px;
        opacity: 0.4;
    }
    90% {
        width: 90px;
        height: 90px;
        opacity: 0.9;
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 1;
    }
}

@media only screen and (max-width: 1100px) {
    .clock {
        bottom: 150px;
        right: 0px;
        z-index: 10;
        border: 6px, solid, var(--dark-cyan);
        border-radius: var(--global-border-radius);
        padding: 15px;
        padding-top: 30px;
        margin: 10px;
        width: 40%;
        min-height: 200px;
        text-align: center;
        color: var(--timberwolf);
        background-color: var(--yet);
        
    
    }
    
    .clockDown {
        bottom: 20px;
        right: 0px;
        padding: 30px;
        margin: 10px;
        width: 40%;
        min-height: 200px;
        text-align: center;
    }
    
    .time-display {
        text-align: center;
        font-size: 4rem;
    }
    
    .date-display {
        font-size: 2.3rem;
    }
    
    
.weather {
    bottom: 150px;
    left: 0px;
    padding: 30px;
    margin: 10px;
    width: 40%;
    min-height: 200px;
}

.weatherDown {
    bottom: 20px;
    left: 0px;
    padding: 30px;
    margin: 10px;
    width: 40%;
    min-height: 200px;
}

.temp {
    font-size: 4rem;
}
.wind {
    font-size: 2.5rem;
}

.newsfeed {
    bottom: 0px;
    padding: 5px;
    margin: 10px;
    width: 95%;
    font-size: 3rem;
}


}