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

	body {
		width: 35rem;
		height: 50vh;
	}
	body, body > article, body > article > p {
		font-size: .65rem;
	}
	main {
	    overflow: hidden;
		grid-template-rows: 1.25rem 4rem 28rem 1.5rem;
		grid-row-gap: .75rem;
	}
	header {
		height: 4rem;
	    margin: -.5rem auto 0;
	    padding: .5rem;
	}
	.Three-Dee, a h1.Three-Dee {
	    font-size: 3rem;
	}
	section {
		margin: -1.2rem auto 0;
		display: grid;
		grid-template-rows: 6rem 6rem 6rem 6rem;
		grid-row-gap: 1.2rem;
	}
	article {
		padding: 0 .5rem;
	    height: 5rem;
	    margin: 1.25rem auto;
	    border: .2rem solid #30F;
	}
	article:after {
		content: "";
	    box-shadow: inset 0 0 1.2rem #CF5;
	}
	article > p {
		font-size: .65rem;
		margin: 0 .5rem;
	}
	article:hover {
	    box-shadow: inset 0 0 1rem #3F9, inset 0 0 1.2rem #93F;
	    border: 1rem inset #6C3,1rem outset #F32;
	}
	article h2 {
	    height: 1.2rem;
	    font-size: 1.52rem;
	    color: #C64;
	    text-shadow: 0 .1rem 0 #F3F, 0 .1rem 0 #393, .1rem .1rem 0 #2C0, .15rem .15rem 0 #36F;
	}

	article h2:hover {
	    color: #323;
	}
	.flexx {
		width: 35rem;
	    padding: .45rem;
	    font-size: .6rem;
	}
	.flexx label {
	    font-size: .65rem;
		color: #1B3;
	}
	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: 2rem;
		height: 1rem;
		font-size: .6rem;
		color: #F33;
	}
	.nav > ul a {
		color: #F33;
	}
	.nav:hover > ul a, 	.nav > ul:hover a, 	.nav > ul a:hover {
		color: #FFF;
	}
}