@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');

*{
    font-family: "Noto Sans TC";
}

#top{
    background: url("https://v3-statics.mirrormedia.mg/images/68a04a3e-89fd-4f45-9e31-359fd0c26e53.jpg");
    background-size: cover;
    background-position: 60% 15%;
}

@media only screen and (max-width: 1000px) {
    #top, #mid2, #listen, #comment{ min-height: fit-content; }
    #mid{ min-height: 100vh; }
}
@media only screen and (max-width: 600px) {
    h2{ font-size: 2.6rem !important; }
    small{ display: block; margin-top: .8rem; }
    h3{ font-size: 1.2rem !important; }
    li{ font-size: 1rem !important;}
    #mid, #listen{ height: fit-content; }
    .table-wrap {
        overflow-x: auto;
        max-width: 100%;
    }
    .table-wrap table {
        width: 720px;
        min-width: 100%;
        table-layout: auto;
    }
    td, th{ font-size: 11pt !important; padding: .2rem; }
    #comments{ height: 60vh !important; }
}

#mid, #listen{
    background: linear-gradient(0deg,#000000 0%, #38372d 100%);
    padding-top: 4rem;
}

#comments{
    height: 80vh;
    overflow: auto;
}

#mid2{
    background: linear-gradient(180deg,#000000 0%, #38372d 100%);
    padding-top: 8rem;
}
#comment{
    background: linear-gradient(180deg,#000000 0%, #38372d 100%);
    padding-top: 4rem;
    padding-bottom: 4rem;
}
#comment span.warning{
    font-size: 1.4rem;
    display: block;
    text-align: center;
    color: #ffe87a;
}
#banner_text{
    filter: drop-shadow(0 0 10px #000);
    display: block;
    margin: auto;
    width: 90%;
}

h2{
    font-size: 3.8rem;
    color: #ffe87a;
    text-align: center;
}
h3{
    font-size: 1.8rem;
    color: #FFF;
    margin-bottom: 1.2rem;
}
small{
    font-size: 50%;
}

hr{
    opacity: 1;
    color: #ffffff9e;
    margin: 2rem 0;
}

li{
    margin-bottom: .1em;
    font-size: 1.6rem;
    color: #FFF;
}

table{
    color: #FFF;
    border: 1px solid #FFF;
    width: 100%;
}

td,th{
    border: 1px solid #FFF;
    padding: .6rem;
    font-size: 1.2rem;
}

.comment-item {
    margin-bottom: 1.6rem;
    padding: 1.2rem;
    background-color: #f9f9f917;
    border-radius: 10px;
    border: 1px solid #FFF;
    color: #FFF;
}

.comment-item strong{ font-size: 14pt; }
    
.comment-item p{
    font-size: 16.2pt;
    width: 100% !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}