*{margin:0;padding:0;}
html, body {height:100%;display:flex;flex-direction:column;}
main {flex:1;display:flex;justify-content:center;align-items: center;}
footer {text-align: center;padding: 8px;font-size:12px;}
a{color:black;text-decoration:none;}
ul{list-style-type: none;}

.main {width:400px;background-color:#f0f0f0;;border-radius: 12px;padding:12px;margin:1% 0;}
.header{width:100%;height:160px;display: flex;overflow:hidden;}
.header img {width:160px;border-radius:12px}
.header ul {flex-grow: 1;display: flex;flex-direction: column;align-items: center;}
.header ul {height:160px;position:relative;transition: top 0.5s ease;padding: 8px 0;}
.header ul li{line-height:40px;font-size: 16px;color: #333;padding-left:6px;}
.header ul li{transition: color 0.3s ease, font-weight 0.3s ease;text-align: center;}
.header ul li.active {color: #4caf50;font-weight: bold;}
.header #join {font-size:2rem;border:1px solid #222;}

.aside {width:100%;height:40px;line-height:40px;display: flex;}
.aside #times {flex-grow: 1;}
.aside img {width:36px;height:36px;}
.aside img:hover {transform: scale(1.05);cursor: pointer;}
.aside .size {position:relative;left:-6px;top:4px;}
.aside #muted {margin-left:5px;}

@media (max-width: 512px) {
    .aside img:hover {transform: none;}
}

#info {width:100%;font-size:38px;text-align:center;margin-bottom:12px;}
#duration{width:100%;height:8px;background-color:#888;margin-top:12px;}
#buffered{height:8px;background-color:#bbb;width:0%}
#progress{height:8px;background-color:#4caf50;width:0%;position:relative;top:-8px;}

.list {margin-bottom:4px;padding:8px 12px;display:none;}
.list {border: 1px solid #aaa;border-radius:8px;max-height:96px;overflow-y: auto;}
.list ul {display:flex;flex-direction: column;}
.list ul li {height:32px;line-height:32px;display:flex;align-items: center;white-space: nowrap;}
.list ul li span{padding-left:12px;font-size:20px;}
.list ul li span.active{color:#4caf50;}
.list ul li img{height:28px;}

#chat-container{min-height:240px;height:240px;display:none;}
#chat-container{flex:1;flex-direction:column;overflow:hidden;border:1px solid #ccc;}
.chat-box{flex:1;overflow-y:auto;padding:10px;border-bottom:1px solid #ccc}
.message{max-width:70%;padding:10px;border-radius:5px;clear:both;margin-bottom:4px;}
.message.user{background-color:#dcf8c6;float:right;text-align:right}
.message.other{background-color:#f8dcc6;float:left;text-align:left}
.message.from{float:left;text-align:left;font-size:12px;color:#ccc;padding:0;}
.message.tips{font-size:12px;max-width:100%;text-align:center;}
.message.tips span {color:#4caf50;cursor:pointer;}

.input-box{display:flex;border-top:1px solid #ccc;background-color:#f9f9f9}
.input-box input{flex:1;padding:10px;border:none;outline:none;font-size:16px}
.input-box button{padding:10px 20px;font-size:16px}

.list::-webkit-scrollbar {width: 8px;height:8px;}
.list::-webkit-scrollbar-thumb {border-radius:8px;}
.list::-webkit-scrollbar-thumb:hover {background: #4caf50;}
.list::-webkit-scrollbar-button {display: none;}

#text {background-color: transparent;}

@media (prefers-color-scheme: dark) {
  body, .main {background-color: #666;}
  .main{border:1px solid #777;}
  #text {background-color: #555 !important;}
  #alimg{filter: grayscale(60%);}
}