@charset "UTF-8";
@media only screen and (max-width: 60rem) {

	body {
		width: 50rem;
		height: 75vh;
	}
	body, body > article, body > article > p {
		font-size: .85rem;
	}
	main {
	    overflow: hidden;
		grid-template-rows: 1.5rem 6.5rem 32rem 1.75rem;
		grid-row-gap: .75rem;
	}
	header {
		height: 5rem;
	    margin: -.75rem auto 0;
	    padding: .75rem;
	}
	.Three-Dee, a h1.Three-Dee {
	    font-size: 3.5rem;
	}
	section {
		margin: -1.5rem auto 0;
		display: grid;
		grid-template-rows: 7rem 7rem 7rem 7rem;
		grid-row-gap: 2rem;
	}
	article {
		padding: 0 .65rem;
	    height: 6rem;
	    margin: 2rem auto;
	    border: .2rem solid #C0F;
	}
	article:after {
		content: "";
	    box-shadow: inset 0 0 1.25rem #0CF;
	}
	article > p {
		font-size: .85rem;
		margin: 0 .6rem;
	}
	article:hover {
	    box-shadow: inset 0 0 1.2rem #3FF, inset 0 0 2rem #C3F;
	    border: 1.2rem inset #0C3,1rem outset #0FF;
	}
	article h2 {
	    height: 2rem;
	    font-size: 2rem;
	    color: #C04;
	    text-shadow: .1rem .1rem 0 #FF0, .1rem .1rem 0 #333, .2rem .2rem 0 #C0C, .35rem .35rem 0 #30F;
	    z-index: 3;
	}

	article h2:hover {
	    color: #3D3;
	    text-shadow: .1rem .1rem 0 #444, .1rem .1rem 0 #666, .2rem .2rem 0 #039, .3rem .3rem 0 #F3C,
	                 -.1rem -.1rem 0 #30F, -.2rem -.2rem 0 #C3F, -.3rem -.3rem 0 #604;
	}
	.flexx {
		width: 50rem;
	    padding: .65rem;
	    border: .1rem solid #CC3;
	    font-size: .7rem;
		color: #3A3;
	}
	.flexx label {
	    font-size: .7rem;
		color: #3A3;
	}
	.flexx select {
		width: .75rem;
	}
	input[type="submit"] {
		width: 1.25rem;
		color: #3A9;
	}
	.nav > ul, ul li, ul ul li, ul ul ul li,
	ul li ul li, ul li ul li ul li, li, button {
		width: 3rem;
		height: 1.1rem;
		font-size: .7rem;
		color: #F33;
	}
	.nav > ul a {
		color: #F33;
	}
	.nav:hover > ul a, 	.nav > ul:hover a, 	.nav > ul a:hover {
		color: #FFF;
	}
}