/*** Reset ***/
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

@keyframes wackeln {
    8%   { transform: rotate(0deg); }
    16.5% { transform: rotate(-15deg); }
    25%  { transform: rotate(15deg); }
    33%  { transform: rotate(-30deg); }
    41.5%  { transform: rotate(30deg); }
    50%  { transform: rotate(-45deg); }
    58%  { transform: rotate(45deg); }
    66.5%  { transform: rotate(-30deg); }
    75%  { transform: rotate(30deg); }
    83%  { transform: rotate(-15deg); }
    91%  { transform: rotate(15deg); }
    100% { transform: rotate(0deg); }
}
/*** General ***/
body{
    height: 100vh;
    background-image: url("img/thun.png");
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: center;
    & header{
        display: flex;
        flex-direction: row;
        background-color: lightgray;
        align-items: center;
        padding: 10px;
        width: 100%;
        & img{
            width: 50px;
            height: auto;
        }
        & ul{
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-left: auto;
            gap: 20px;
            list-style: none;
            & li.thun a{
                color: black;
                text-decoration: none;
                font-size: 30px;

            }
            & li.bern a{
                color: black;
                text-decoration: none;
                font-size: 30px;
            }
            & li.biel a{
                color: black;
                text-decoration: none;
                font-size: 30px;
            }
             & li a.aktiv {       /* hier hinzufügen */
            color: red;
            }
            & li a:hover {
                text-decoration: underline;
            }
        }
    }
    & main{
        flex: 1;
        color: black;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        gap: 100px;
        width: 100%;
        height: 100%;
        padding: 0 20px;
        & .Temperatur, & .Luftfeuchtigkeit, & .Windgeschwindigkeit {
            flex: 1;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            background-color: rgb(173, 216, 230, 0.8) ;
            border-radius: 10px;
            & img{
                width: 70px;
                height: auto;
            }
        }
        & .Temperatur{
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: flex-start;
            &:hover img {
                animation: wackeln 2s ease;
            }
        }
        & .Luftfeuchtigkeit{
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            &:hover img {
                animation: wackeln 2s ease;
            }
        }
        & .Windgeschwindigkeit{
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: flex-end;
            &:hover img {
                animation: wackeln 2s ease;
            }
        }

    }
    & footer{
        & .Status{
            display: flex;
            flex-direction: row;
            background-color: lightgrey;
            width: 100%;
            padding: 10px;
            align-items: center;
            & #text-za{
                font-size: 20px;
            }
            & #status-zeit{
                font-size: 20px;
            }
            & #copyright {
                margin-left: auto;
                font-size: 20px;
            }
        }
    }
}