@import url('https://fonts.cdnfonts.com/css/seven-segment');

body{
    cursor: none;
    margin:0;
    padding:0;
    overflow: hidden;
}

#channels{
    margin-left:5%;
    margin-right:5%;
    margin-top:3%;
    text-align: center;
}

.channel{
    border: solid #b9b9b9 5px;
    border-radius:30px;
    width:22%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1%;
    transition:1000ms;
}

.channel:hover{
    border:solid #6ebfda 5px;
    transition:150ms;
    box-shadow: 0px 0px 20px #6ebfda;
}

.nochannel{
    border: solid #b9b9b9 5px;
    border-radius:30px;
    width:22%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1%;
    transition:1000ms;
}

/*#bottom-nav{
    background-image: url(gfx/menu-bottom.png);
    background-size:cover;
    background-size: contain;
    background-repeat: no-repeat;
    width:100%;
}
*/

#bottom-nav {
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    justify-content: space-between; /* Links – Mitte – Rechts verteilen */
    background-image: url(gfx/menu-bottom.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}


#bottom-nav div{
    display:inline-block;
}

#menu-left{
    width:33%;
    background-image: none;
    margin-top:2%
}

#menu-center{
    width:33%;
    background-image: none;
}

#menu-right{
    width:33%;
    background-image: none;
    text-align: right;
    margin-top:2%
}

#options{
    width:25%;
    background-image: none;
    margin-left:15%;
    border:solid #6ebfda 5px;
    border-radius:1000px;
}

#pinnwand{
    width:25%;
    background-image: none;
    margin-right:15%;
    border:solid #6ebfda 5px;
    border-radius:1000px;
}

.button{
    
    transition: 200ms;
}

.button:hover{
    scale:120%;
    transition: 200ms;
}


/*Cursor*/
.custom-cursor {
        position: fixed;
        width: 128px;
        height: 128px;
        background: url('cursor2.png') no-repeat center / contain;
        pointer-events: none;
        transform: translate(-50%, -50%);
        z-index: 9999;
    }



#uhrzeit {
    margin-top:2%;
    width:100%;
    background-image: none;
    text-align:center;
    font-size:700%;
    /*border: solid black;*/
    font-weight: bold;
    font-family: 'Seven Segment', arial;
    color:#a4a4a4;
}

#clock{
    width:100%;
    background-image: none;
    text-align:center;
    font-size:500%;
    /*border: solid black;*/
    font-weight: bold;
    font-family: arial;
    color:#6d6d6d;
    margin-top:9%;
    margin-bottom:1.5%;
}


#sd-card{
    position:fixed;
    margin-left:18%;
    margin-top:5%;
    background-image: none;
}

#sd-card img{
    background-image: none;
}

a{
    background-image: none;
}



/*Channel select*/

    .wiimenuvisible {
        overflow: hidden; /* damit nichts rausguckt */
        transition: 500ms;
        opacity: 1;
        background-image: url(gfx/background.png);
        background-size: 30px;
    }
    /*Disc kanal*/
    .channel1visible {
        opacity: 0;
        pointer-events: none; /* verhindert Klicks */
        max-height: 0;
        transition: 2000ms;
    }

#channel1visible {
    background-image:none;
    background-color:black;
    transition: 2000ms;
}

#channel1{
    border-radius:20%;
    height:1080px;
    background-color:white;
    transition: 1000ms;
    overflow: hidden;
    font-family: arial;
}


#channel1-header{
    width:100%;
    background-color:white;
    background-image: none;
    transition: 1000ms;
    height: 190px;
    background-image: url(gfx/channel-header-background.png);
    background-size: cover;
}

 @keyframes spin {
        0%   {rotate: 0deg;}
        25%  {rotate: 90deg;}
        50%  {rotate: 180deg;}
        75%  {rotate: 270deg;}
        99%  {rotate: 360deg;}
        
    }

#channel1-header span{
    width:20%;
    float:right;
    font-size: 300%;
    font-weight: bold;
    margin-right:10%;
    margin-top:5%;
    color:white;
}




#channel1-section{
    width:100%;
    background-color:white;
    background-image: none;
    transition: 1000ms;
    height: 670px;
}

#channel1-section marquee{
    margin-top:13%;
}

#channel1-section img{
    margin-left:40%;
    animation-name: spin;
    animation-duration: 0.1s;
    animation-iteration-count:infinite;
}

#channel1-nav{
    width:100%;
    background-image: url(gfx/channelselect-nav-background.png);
    transition: 1000ms;
    height:220px;
    text-align: center;
    border:solid rgb(53, 53, 53) 5px;
    background-size: 2%;
    
}

#channel1-button{
    width:20%;
    background-color:white;
    text-align:center;
    padding:2%;
    padding-top:3%;
    padding-bottom:3%;
    display:inline-block;
    margin-top:0.7%;
    margin-left:5%;
    margin-right:5%;
    border-radius: 100px;
    font-size: 300%;
    transition: 500ms;
    border:solid #6ebfda 10px;
}

#channel1-button-na{
    width:20%;
    background-color:rgb(221, 221, 221);
    text-align:center;
    padding:2%;
    padding-top:3%;
    padding-bottom:3%;
    display:inline-block;
    margin-top:0.7%;
    margin-left:5%;
    margin-right:5%;
    border-radius: 100px;
    font-size: 300%;
    transition: 500ms;
    border:solid #b9b9b9 10px;
    color: rgb(194, 194, 194);
}

#channel1-button:hover{
    scale: 110%;
    transition: 500ms;
}

/*Disc-kanal ende*/

/*wetter kanal*/

.wetterkanal {
        opacity: 0;
        pointer-events: none; /* verhindert Klicks */
        max-height: 0;
        transition: 2000ms;
}

#wetterkanal {
    background-image:none;
    background-color:black;
    transition: 2000ms;
}

#wetter{
    border-radius:20%;
    height:1080px;
    background-color:white;
    transition: 1000ms;
    overflow: hidden;
    font-family: arial;
    background: linear-gradient(135deg, #0090e8, #000d8e);
}


#wetter-header{
    width:100%;
    
    transition: 1000ms;
    height: 190px;
    background-image: url(gfx/channel-header-background.png);
    background-size: cover;
}

#wetter-header span{
    width:20%;
    float:right;
    font-size: 300%;
    font-weight: bold;
    margin-right:10%;
    margin-top:5%;
    color:white;
}




#wetter-section{
    width:100%;
    background-image: none;
    transition: 1000ms;
    height: 670px;
}

#wetter-nav{
    width:100%;
    background-image: url(gfx/channelselect-nav-background.png);
    transition: 1000ms;
    height:220px;
    text-align: center;
    border:solid rgb(53, 53, 53) 5px;
    background-size: 2%;
    
}

#wetter-button{
    width:20%;
    background-color:white;
    text-align:center;
    padding:2%;
    padding-top:3%;
    padding-bottom:3%;
    display:inline-block;
    margin-top:0.7%;
    margin-left:5%;
    margin-right:5%;
    border-radius: 100px;
    font-size: 300%;
    transition: 500ms;
    border:solid #6ebfda 10px;
}

#wetter-button-na{
    width:20%;
    background-color:rgb(221, 221, 221);
    text-align:center;
    padding:2%;
    padding-top:3%;
    padding-bottom:3%;
    display:inline-block;
    margin-top:0.7%;
    margin-left:5%;
    margin-right:5%;
    border-radius: 100px;
    font-size: 300%;
    transition: 500ms;
    border:solid #b9b9b9 10px;
    color: rgb(194, 194, 194);
}

#wetter-button:hover{
    scale: 110%;
    transition: 500ms;
}

/*wetter kanal-ende*/