@media only screen and (max-width: 1300px) {
	.content .features {
		flex-wrap: wrap;
		justify-content: center;
	}

	.content .features>div {
		flex-basis: unset;
		padding: 10px;
	}
}

@media only screen and (max-width: 800px) {
	body {
		overflow-x: hidden;
	}

	h1 {
		font-size: 25pt;
		font-weight: 900;
		margin: 15px 0px;
	}

	h2 {
		font-size: 15pt;
		font-weight: 900;
		margin: 10px 0px;
	}

	header {
		gap: 25px 50px;
		justify-content: center;
	}

	.content .overview,
	.content .changelog {
		margin: 100px 0;
	}

	.overview article::after {
		right: 0 !important;
	}

	.content .features {
		margin-bottom: 100px;
	}
}

@media only screen and (max-width: 650px) {
	.content .features .screenshots {
		width: 90vw;
		height: 90vw;
		border-radius: 25px;
	}

	.downloadbar>*,
	.downloadbar button {
		width: 100%;
	}

	.content .changelog article,
	.overview article {
		border-radius: 25px;
		padding: 25px 25px;
	}

	.overview article::after {
		font-size: 80px;;
	}

	.overview article {
		padding-bottom: 40px;
	}
}

@media only screen and (max-width: 450px) {
	header .socials {
		width: 100%;
		justify-content: space-between;
	}

	header .navbar {
		flex-direction: column-reverse;
	}

	header .socials {
		font-size: 20pt;
	}

	header .socials a {
		width: 30px;
		height: 30px;
	}

	autoscroll {
		width: 50px;
		height: 50px;
		font-size: 25pt;

		right: 20px;
		bottom: 20px;
	}
}

@media only screen and (max-width: 300px) {
	h1 {
		font-size: 20pt;
		font-weight: 900;
		margin: 15px 0px;
	}

	h2 {
		font-size: 7pt;
		font-weight: 900;
		margin: 10px 0px;
	}
}