mobile.css

/* mobile overwrites! this is an !important document, huh? */

@media (max-width: 980px) /* code below will be used when device's width is less than 768px */
{
	h1 { font-size: 1.8em; } /* shorten h1 font size a little */

	th
	{
		/* set block display */
		display: block;

		/* set full width */
		width: 100% !important;

		/* set padding and margin */
		padding: 0;
		margin: 7.5vh 0;

		/* centering text */
		text-align: center !important;
	}

	.whitespace { height: 10vh; } /* change whitespace height */

	.title { font-size: 1.8em; } /* shorten title size a little */

	#header {height: 7.5% !important;}

	#header #header_logo
	{
		/* horizontally aligning */
		padding-left: 60% !important;
		transform: translateX(-50%);
	}

	#header .nav_links a { display: none;} /* hide navigation links */

	/* events have to appear when mobile */
	.nav_links .event
	{
		display: block !important;
		position: absolute !important;
		top: 25px !important;
		left: 55% !important;
	}

	#about p { width: 85% !important; } /* increase about text width */

	#wiki, #calendar, #media { padding: 10px 50px !important;} /* change padding for better readability */

	#wiki img, #calendar img { display: none; } /* hide wiki and calendar images */
}