/* mobile specific stuff 
i dont know what im doing */

@media (max-width: 1150px){
	html, body {
		font-size: 1.50em;
	}

	.container {
  		grid-template-rows: 1fr 1.5em 1fr 5fr auto 0px;
  		grid-template-columns: 1fr 1fr;
  		grid-template-areas:
			"sitecount pets"
			"quotes quotes"
			"navigation navigation"
			"main main"
			"blinker blinker"
			"cbox name";
	}

	.left-sidebar, .right-sidebar {
		width: 100%;
		height: 4em;
		max-height: 20vh;
		font-size: 1.75em;
		text-align: center;
	}
	
	.main-content {
		width: auto;
		max-height: 50vh;
		margin: 20px;
	}

	#cbox {
		display: none;
	}

	img {
		min-height: 1.1em;
		flex-shrink: 0;
	}
}