@media all and (max-width: 900px) {
	html {
		overflow-x: hidden;
	}

	html.noScroll {
		overflow-y: hidden;
	}

	body {
		width: 100%;
		overflow-x: hidden;
	}

	h1 {
		font-size: 40px;
		line-height: 55px;
	}

	h2 {
		font-size: 38px;
		line-height: 50px;
	}

	h3 {
		line-height: 32px;
	}

	div#header {
		max-width: 92%;
		height: 70px;
		display: block;
		justify-content: space-between;
		align-items: center;
		padding: 0 4%;
	}

	body.scrolledDown div#header {
		position: fixed;
		top: -80px;
		left: 50%;
		transform: translate(-50%, 0);
		opacity: 0.98;
		max-width: 1300px;
		box-shadow: 0 0 10px rgba(33, 33, 33, 0.2);
		z-index: 4;
		border-radius: var(--borderRadius);
	}

	body.scrolledDown div#header.showHeader {
		top: 0px;
	}

	div#header a img.logoType {
		max-width: 130px;
		position: absolute !important;
		top: 10px !important;
		left: 4% !important;
	}

	div#header nav div#navButton {
		width: 50px;
		height: 50px;
		font-size: 32px;
		justify-content: space-around;
		text-align: center;
		align-items: center;
		display: flex;
		font-family: "Inter";
		color: var(--colorText);
		position: absolute;
		top: 5px;
		right: 10px;
		cursor: pointer;
		user-select: none;
		font-weight: 100;
	}

	div#header nav ul#headerMenu {
		display: block;
		width: 100%;
		height: 100%;
		background-color: var(--colorBg);
		width: 100%;
		position: absolute;
		left: 0;
		top: -3000px;
		transition: 0.5s;
		z-index: 2;
	}

	div#header[data-page="security"] nav ul#headerMenu {
		background-color: var(--colorGreen);
	}

	div#header[data-page="software"] nav ul#headerMenu {
		background-color: var(--colorYellow);
	}

	div#header[data-page="games"] nav ul#headerMenu {
		background-color: var(--colorLavender);
	}

	div#header[data-page="about"] nav ul#headerMenu {
		background-color: var(--colorGranite);
	}

	div#header nav ul#headerMenu.active {
		top: 60px;
	}

	div#header nav ul.menu li {
		font-family: "Berkeley Mono";
		font-weight: 100;
		font-size: 32px;
		margin: 30px 0 30px 20px;
	}

	div#header a#letsChatButton {
		display: none;
		margin: 0 auto;
		position: absolute;
		bottom: 50px;
		width: 80%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;
		transition: 0.1;
		transition-property: opacity;
		z-index: 3;
	}

	div#header a#letsChatButton.active {
		opacity: 1;
	}

	div.sectionBig {
		border-radius: 0 !important;
		padding: 8% 4%;
	}

	div.sectionBig div.sectionFlex {
		flex-wrap: wrap;
	}

	.sectionHeader {
		max-width: 95%;
	}

	img.sectionImage {
		max-width: 100%;
		margin: 80px auto !important;
		display: block;
	}

	a.sectionButton {
		width: 92%;
		padding: 12px 3%;
		gap: 0;
		margin: 0 auto;
	}

	div.clientsList {
		margin: 0px auto 80px auto;
	}

	div.clientsList ul {
		animation: scroll 15s linear infinite;
	}

	div.sectionBreak {
		min-width: 300px;
	}

	div.sectionLeftImg div.sectionFlex {
		display: block;
	}

	div.sectionTestimonials {
		border-radius: 0;
		min-height: 700px;
	}

	div.sectionTestimonials div.sectionTop {
		margin-bottom: 60px;
	}

	div.sectionProject {
		border-radius: 0;
		padding: 10% 4%;
	}

	div.sectionProject div.sectionTop {
		flex-wrap: wrap;
		justify-content: center;
	}

	div.sectionProject div.sectionTop div.sectionTopRight img.sectionImage {
		width: 90%;
	}

	div.sectionProject div.sectionBottom ul.sectionList {
		display: block;
	}

	div.sectionProject div.sectionBottom ul.sectionList li {
		width: 95%;
	}

	div.sectionProject div.sectionBottom ul.sectionBigBites {
		display: block;
	}

	div.sectionProject div.sectionBottom ul.sectionBigBites li {
		margin: 20px auto;
		width: 100%;
		padding: 0;
	}

	div.sectionProject div.sectionBottom ul.sectionBigBites li a p {
		font-size: 16px;
	}

	div.postMeta div.metaLeft {
		display: none !important;
	}

	div.postMeta div.metaRight span.postCategory {
		display: block;
	}

	div.postMeta div.metaRight span.postTag {
		margin-top: 10px;
		display: block;
	}

	footer {
		width: 94%;
		border-radius: 0;
	}

	footer nav {
		max-width: 300px;
	}

	footer nav ul.menu li {
		width: 100px;
	}
}