@media screen and (max-width:1300px){
	.main {
		width: 1100px;
	}
	.banner {
		height: 190px;
	}
}

@media screen and (max-width:1200px){
	.main {
		width: 1000px;
	}
	.banner {
		height: 180px;
	}
}

@media screen and (max-width:1100px){
	.main {
		width: 900px;
	}
	nav .container > div > ul > li > a {
		padding: 20px 10px;
	}
	.banner {
		height: 165px;
	}
}

@media screen and (max-width: 940px) {
	.main {
		width: calc(100% - 32px);
		margin: 16px auto;
	}

	nav .container {
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 5px 8px;
	}

	nav .container > div > ul > li > a {
		padding: 12px 9px;
	}

	.feedContainer {
		gap: 16px;
		padding: 14px;
	}
}

@media screen and (max-width: 680px) {
	.main {
		width: calc(100% - 20px);
		margin: 10px auto;
	}

	nav .container {
		display: block;
	}

	nav .container > div {
		float: none;
	}

	nav .container > div > ul {
		display: flex;
		flex-wrap: wrap;
	}

	nav .container > div > ul > li > a {
		padding: 10px 9px;
		font-size: 13px;
	}

	.banner {
		height: 135px;
		min-height: 135px;
		margin-top: 12px;
		border-radius: 10px;
		background-size: auto 100%;
	}

	.heroIntro {
		display: block;
		margin-bottom: 12px;
		padding: 17px;
		border-radius: 0 0 10px 10px;
	}

	.heroIntro h1 {
		font-size: 21px;
	}

	.heroIntro .heroAction {
		display: inline-block;
		margin-top: 14px;
	}

	.feedContainer {
		display: block;
		margin: 12px 0;
		padding: 10px;
		border-radius: 10px;
	}

	.leftPane,
	.rightPane {
		width: 100%;
	}

	.rightPane {
		margin-top: 12px;
	}

	.leftPane > table,
	.leftPane > #news,
	.leftPane > #changelogTable {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	footer {
		display: block;
		padding: 8px 12px;
	}

	footer p {
		margin: 5px 0;
	}
}