Minimal CSS using the Media types: all, screen, print and speech.

style.css

/**
 * Media All
 *
 * For all media types (screen, print, speech).
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
 */
@media all {

	html,
	body {
		height: 100%;
	}

	body {
		font: 16px/1.6 sans-serif;
		background-color: hsl(0, 0%, 100%);
		color: hsl(0, 0%, 20%);
		max-width: 750px;
		display: block;
		margin: 0 auto;
	}

	a {
		color: hsl(204, 100%, 25%);
		text-decoration: none;
	}

	header,
	footer {
		text-align: center;
	}

	footer {
		font-size: 90%;
		opacity: .85;
	}

	footer a {
		font-weight: normal;
	}

	.hide {
		display: none;
	}

}
/* MEDIA ALL END */

/**
 * Screen Media
 *
 * Screen specific formatting that is not meant for printing.
 * This will include responsive layouts.
 */
@media screen {

	/** The color transitions over the time period specified. */
	a {
		transition: color .5s;
	}

	/** The color of the link, before any action has been taken. */
	a:link {
		color: hsl(204, 100%, 25%);
	}

	/** The cursor changes to a pointer, when mouse is over element. */
	a:hover {
		cursor: pointer;
	}

	/** Triggered when cursor is hovering over the element. */
	a:hover {
		color: hsl(75, 50%, 50%);
	}

	/** Triggered when the element has focus, such as after tabbing to it. */
	a:focus {
		color: hsl(4, 50%, 50%);
	}

	/** Triggered when the element is active. */
	a:active {
		color: hsl(75, 50%, 50%);
	}

	/** Triggered after the element has been visited. */
	a:visited {
		color: hsl(204, 100%, 40%);
	}

}
/* MEDIA SCREEN END */

/**
 * Print Media
 *
 * This is any formatting not covered by media all. Since additional styling
 * is added using @media screen, this should be minimal.
 */
@media print {

	nav {
		display: none !important;
	}
}
/* MEDIA PRINT END */

/**
 * Speech Media
 *
 * Extra formatting which may be useful for speech synthesizers.
 */
@media speech {


}
/* MEDIA SPEECH END */