/* -=-=-=-=-=-=-=-=-=-=
-=-=-= CSS RESET =-=-=-
=-=-=-=-=-=-=-=-=-=- */

	* {
		margin: 0;
		padding: 0;
		text-align: center;
		background-color: black;
	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-= MOBILE DISPLAY -=-=-=-=-=-
=-=-=- (0px WIDE - 479px WIDE) -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

	@media screen and (max-width: 479px) {

		figure#mobile {
			width: 375px;
			height: 627px;
			margin: 2vh auto 0 auto;
		}

			h1 {
				color: white;
				padding: 0%;
			}

			h2, h3, h4, h5, h6 {
				display: none;
			}

	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= PHABLET (LARGE MOBILE) SCREEN DISPLAY =-=-=-
=-=-=-=-=-=- (480px WIDE - 512px WIDE) -=-=-=-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

	@media screen and (min-width: 480px) and (max-width: 511px) {

		figure#phablet {
			width: 480px;
			height: 768px;
			margin: 2vh auto 0 auto;
		}

			h2 {
				color: white;
				padding-top: 70%;
			}

			h1, h3, h4, h5, h6 {
				display: none;
			}

	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= ORIGINAL MACINTOSH SCREEN DISPLAY =-=-=-
=-=-=-=-=- (512px WIDE - 768px WIDE) -=-=-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

	@media screen and (min-width: 512px) and (max-width: 767px) {

		figure#original-macintosh {
			width: 512px;
			height: 342px;
			margin: 2vh auto 0 auto;
		}
			
			h3 {
				padding-top: 25%;
			}

			h1, h2, h4, h5, h6 {
				display: none;
			}

	}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-=-=- TABLET SCREEN DISPLAY -=-=-=-=
=-=-=- (768px WIDE - 1366px WIDE) =-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

	@media screen and (min-width: 768px) and (max-width: 1365px) {

		figure#tablet {
			width: 768px;
			height: 1024px;
			margin: 2vh auto 0 auto;
		}

			h4 {
				padding-top: 60%;
			}

			h1, h2, h3, h5, h6 {
				display: none;
			}

	}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-=-= LAPTOP DISPLAY -=-=-=-=-=--=
=-=-=- (1366px WIDE - 1920px WIDE) -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

	@media screen and (min-width: 1366px) and (max-width: 1919px) {

		figure#laptop {
			width: 1366px;
			height: 768px;
			margin: 2vh auto 0 auto;
		}

			h5 {
				padding-top: 25%;
				color: white;
			}

			h1, h2, h3, h4, h6 {
				display: none;
			}

	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= DESKTOP OR TELEVISION DISPLAY =-=-=-
=-=-=- (1920px OR WIDER BREAKPOINT) =-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

	@media screen and (min-width: 1920px) {

		figure#desktop {
			width: 1920px;
			height: 1080px;
			margin: 2vh auto 0 auto;
		}

			h6 {
				padding-top: 25%;
				color: white;
			}

			h1, h2, h3, h4, h5 {
				display: none;
			}

	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= CSS NAMED COLOR CLASSES =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

	.red {
		background-color: red;
	}

	.orange {
		background-color: orange;
	}

	.yellow {
		background-color: yellow;
	}

	.limegreen {
		background-color: limegreen;
	}

	.blue {
		background-color: blue;
	}

	.purple {
		background-color: purple;
	}