@media screen and (min-width: 1156px) {
	.main-container {
		margin: 0 auto;
		max-width: 1156px;

		display: grid;
		grid-template-columns: 229px 686px 229px;
		grid-template-rows: 1260px 1fr;
		grid-gap: 3px;

		background: var(--border-gray);
		border: var(--border-gray) solid;
		border-width: 0 3px 3px 3px;
	}
	.middle {
		grid-column: 2/3;
		grid-row: 1/2;
	}
	.left-sb {
		grid-column: 1/2;
		grid-row: 1/2;
	}
	.right-sb {
		grid-column: 3/4;
		grid-row: 1/2;
	}
	.footer {
		grid-column: 1/4;
	}
}





@media screen and (max-width: 1156px) {
	body>img {
		display: none;
	}

	.main-container {
		display: grid;
		grid-template-columns: 3fr 1fr;
		grid-template-rows: 1fr;
	}
	.middle {
		grid-column: 1/2;
		border-bottom-width: 3px;
	}
	.left-sb {
		grid-column: 2/3;
		border-left-width: 3px;
		border-bottom-width: 3px;
	}

	#about {
		font-size: 14px;
	}
	#about li:nth-child(even) {
	}

	#about {
		font-size: 12px;
	}

	.right-sb {
		grid-column: 1/3;

		display: grid;
		grid-template-columns: 175px 1fr;
		grid-template-rows: calc(175px + 40px) 54px 89px 175px;
		/*grid-gap: 3px;*/
		grid-column-gap: 3px;
		background-color: var(--border-gray);

		border-bottom-width: 3px;
	}
	.right-sb>section {
		background-color: #000;
	}

	#frame {
		width: 100%;
		height: calc(100% - 40px);
		margin: 0 auto;
	}

	#pages {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 40px 1fr;
		grid-column-gap: 3px;
		background-color: var(--border-gray);
	}
	#pages>div {
		background-color: #000;
		border-width: 0;
		max-height: 100%;	
		overflow: auto;
	}
	#title-sitemap {
		grid-column: 1/2;
		grid-row: 1/2;
	}
	#title-coolpgs {
		grid-column: 2/3;
		grid-row: 1/2;
	}
	#pages>div {
		border: 0 var(--border-gray) solid;
		border-bottom-width: 3px;
	}

	#gb, #butt, #linkme, .footer {
		grid-column: 1/3;
	}
}





@media screen and (max-width: 950px) {
	.main-container {
		display: grid;
		grid-template-columns: 2.5fr 0.8fr;		
	}
}




@media screen and (max-width: 750px) {
	.banner {
		height: 90px;
	}
	.banner h1 {
		font-size: 3rem;
	}

	.main-container {
		display: block;
	}

	.left-sb {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 212px 238px 400px;
		grid-column-gap: 3px;
		background-color: var(--border-gray);
	}
	.left-sb>* {
		background-color: #000;
	}

	#log {
		grid-column: 1/2;
		grid-row: 1/3;
	}
	#log>div {
		height: calc(100% - 40px);
	}

	#cb {
		height: 400px;
		grid-column: 1/3;
		grid-row: 3/4;
	}
	#cb div {
		border-bottom-width: 0;
	}

	#about>div {
		height: calc(100% - 40px);
	}

	#stats {
		height: 100%;
	}
}





@media screen and (max-width: 550px) {
	.navbar, .footer {
		padding: inherit 4px;
	}

	#home-misc-1 {
		display: block;
	}
	#home-misc-1>div {
		max-height: 300px;
	}
}