@import url('main.css');

#content-header {
	height: 315px;
	margin-bottom: -120px;
}

#streaming {
	grid-column: var(--col-all);
}

#schedule {
	grid-column: var(--col-3);
}

#schedule div {
	width: 200px;
	margin: 20px auto;
}

#schedule div small {
	margin-top: 10px;
	display: block;
	text-align: center;
}

#schedule table {
	padding: 10px 25px;
	border-radius: 15px;

	color: white;

	border-collapse: separate;
}

#schedule td {
	padding: 5px 0px;
	color: var(--light-grey-content);
	border: 0px;
}

#schedule time {
	color: white;
}

#schedule th {
	padding-right: 15px;

	text-align: right;
	border: 0px;
}

#twitch-embed {
	width:900px;
	height: 506px;
	background: var(--dark-grey);
	margin: 30px auto 0px auto;
}

#about-the-stream {
	grid-column: var(--col-1-2);
}

@media (max-width: 940px) {
	#about-the-stream {
		grid-column: var(--col-1);
	}

	#schedule {
		grid-column: var(--col-2);
	}
}

@media (max-width: 900px) {
	#twitch-embed {
		width: calc(100% + 40px);
		margin: 30px -20px;
	}

	#twitch-embed iframe {
		width: 100%;
	}

	#twitch-embed, #twitch-embed iframe {
		height: auto;
		aspect-ratio: 9 / 5;
	}
}

@media (max-width: 500px) {
	.curve {
		width: 960px;
		height: 39px;
		transform: translateX(calc(50vw - 960px/2));
	}

	#content-header {
		height: 200px;
		margin-bottom: 10px;
	}
}