:root {
    --global-background: #ffffff;
    --global-font-color: #000000;
}
* {
    box-sizing: border-box;
}
body { 
    margin: 0;
    padding: 0;
}

.clock{

border: 3px solid red;
width: 300px;
padding: 20px;
border-radius: 10px;
position: fixed;
text-align: center;
left: auto;
z-index:10;
bottom: 200px;
right: 20px;
animation-name: Uhr;
animation-duration: 0.3s;
}

@keyframes Uhr{

    0%{right: -400px;}
    5%{right: -400px;}
    90%{right: 40px;}
    100%{right: 20px;}

}

.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: 100px;
    height: 100px;
    /* background-color: red; */
    animation: infinite;
    animation-name: loading;
    animation-duration: 2s;

    
}

@keyframes loading{

    0%{rotate: 0deg;}
    20%{rotate: 90deg;}
    25%{rotate: 90deg;}
    45%{rotate: 180deg;}
    50%{rotate: 180deg;}
    70%{rotate: 270deg;}
    75%{rotate: 270deg;}
    95%{rotate: 360deg;}
    100%{rotate: 360deg;}

}

.weather{

    border: 3px solid red;
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    position: fixed;

    right: auto;
    z-index:10;
    bottom: 200px;
    left: 20px;

}

.weather1{

    text-align: center;

}

.weather2{

    text-align: center;
    
}

.news{

    border: 3px solid red;
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    position: fixed;
    right: auto;
    z-index:10;
    top: 200px;
    left: 20px;

}

.news1{

    text-align: center;
    
}

.menue{

    border: 3px solid red;
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    position: fixed;
    right: auto;
    z-index:10;
    bottom: 800px;
    right: 20px;

}

.newsfeed{

    border: 3px solid red;
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    position: fixed;
    right: auto;
    z-index:10;
    bottom: 20px;
    right: 20px;

}