html {
    height: 100%;
}
body{
    font-variant-emoji: text;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    background-color: #eee;
    margin: 0px;
    color: #123;
    header{
        #hedaer_div_two{
            display: flex;
            img{
                display: flex;
                width: 50px;
                height: 50px;
                margin: 5px;
            }
        }
        width: 100%;
        h1{
           font-size: 25px;
        }
        a{
            color: #134;
            text-decoration:none;
        }
        background-color: #9ae;
        margin: 0px;
        padding: 8px;
    }
    main,footer{
        border-radius:5px;
        padding: 8px;
        a{
            color:#05c;
            text-decoration: none;
        }
        a:visited{
            color:#61c;
            text-decoration: none;
        }
        a:hover{
            color:#008;
        }
        a:visited:hover{
            color:#309;
            text-decoration: none;
        }
        .button{
            border-radius:5px;
            user-select: none;
            text-align: center;
            background-color: #dee;
            border: 2px solid #bcc;
            margin: 5px;
            width: 300px;
            a{
                text-decoration: none;
                color: #134;
            }
            a:visited{
                color:#314;
            }
            img{
                display: inline-block;
                text-align: center;
            }
        }
        .rss_css{
            .button{
                svg{
                    width: 20px;
                    height: 20px;
                }
                width: 32px;
                height: 32px;
            }
            ul{
                list-style-type: none;
                li{
                    border-radius:5px;
                    margin: 5px;
                    padding: 1px;
                    padding-left: 5px;
                    border: solid 1px #314;
                }
            }
        }
        .button:hover{
            background-color: #bcc;
            border: 2px solid #9aa;
        }
        table{
            border-collapse:  collapse; 
        }
        th,td{
            padding: 2px;
            border: solid 1px;
        }
        .koumoku{
            margin: 8px;
            padding:0px;
            border:2px solid #09e;
            h3{
                margin: 0px;
                padding:0px;
                background-color: #09e;
            }
            p{
                margin:4px;
            }
        }
        svg{
            margin-top: 5px;
        }
        .videosty{
            border-radius: 5px;
            background-color: #05c;
            color: #edeeee;
            margin: 1vh;
            padding: 2px;
            
            a{
                color:#cbcfee;
            }
            a:hover{
                color: #cbcfee;
            }
            a:visibility:hover{
                color: #cbcfee;
            }
            .title{
                border-radius: 5px;
                margin-top: 0px;
                background-color: #57e;
                font-weight: bold;
                padding: 2px;
            }
            .EX{
                border-radius: 5px;
                background-color: #e05;
                padding: 2px;
            }
            .info{
                border-radius: 5px;
                padding: 2px;
                background-color: #27d;
            }
        }
    }
    main{
        flex: 1;
    }
    footer{
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #a0aaee;
        a{
            h2{
                color: #134;
            }
        }
        .button{
            font-weight: bold;
            width: 50px;
            height: 50px;
            font-size: 32px;
        }
    }
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #555;
    color:#dde;
    header{
        background-color: #05c;
        color:#dde;
        a{
            color:#cde;
        }
        a:visited{
            color:#dce
        }
        a:hover{
            color:#bee;
        }
        a:visited:hover{
            color:#ebe
        }
        #hedaer_div_two{
            img{
                filter: invert(100%);
            }
        }
    }
    main,footer{
        color:#dde;
        a{
            color:#2be
        }
        a:visited{
            color:#b8e;
        }
        a:hover{
            color:#4de;
        }
        a:hover:visited{
            color:#eae;
        }
        .button{
            background-color: #bcc;
            border: 2px solid #9aa;
            color: #123;
        }
        .button:hover{
            background-color: #dee;
            border: 2px solid #bcc;
        }
        .videosty{
            a{
                color:#cbcfee;
            }
            a:hover{
                color: #cbcfee;
            }
            a:visibility:hover{
                color: #cbcfee;
            }
        }
    }
  }
}