body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#0b0b0b;
color:white;
}

/* HEADER */
header{
text-align:center;
background:#111;
padding:20px;
border-bottom:2px solid red;
}

.container{
width:95%;
margin:auto;
}

/* STREAM AREA */
.stream-area{
display:flex;
gap:15px;
margin-top:20px;
}

/* PLAYER */
.player{
flex:3;
}

.video-js{
width:100%;
height:75vh;
border-radius:10px;
}

/* TWITCH CHAT */
.chat{
flex:1;
background:#111;
border-radius:10px;
overflow:hidden;
}

.chat iframe{
border:none;
height:75vh;
}

/* SERVER BUTTONS */
.servers{
text-align:center;
margin:15px 0;
}

.servers button{
padding:12px 20px;
margin:5px;
background:red;
border:none;
color:white;
cursor:pointer;
font-weight:bold;
border-radius:6px;
}

.servers button:hover{
background:#ff3333;
}

/* SCHEDULE */
.schedule{
background:#111;
padding:20px;
border-radius:10px;
}

table{
width:100%;
border-collapse:collapse;
}

th, td{
padding:10px;
border-bottom:1px solid #333;
text-align:left;
}

.online{
color:lime;
}

.offline{
color:gray;
}

/* FOOTER */
footer{
text-align:center;
padding:20px;
margin-top:20px;
background:#111;
}

/* MOBILE */
@media(max-width:900px){

.stream-area{
flex-direction:column;
}

.video-js,
.chat iframe{
height:50vh;
}