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

	body {
		width: 25rem;
		height: 50vh;
	}
	body, body > article, body > article > p {
		font-size: .65rem;
	}
	main {
		width: 25rem;
	    overflow: hidden;
		grid-template-rows: 1.25rem 4rem 28rem 1.5rem;
		grid-row-gap: .75rem;
	}
	header {
		width: 25rem;
		height: 4rem;
	    margin: -.5rem auto 0;
	    padding: .5rem;
	}
	.Three-Dee, a h1.Three-Dee {
	    font-size: 3rem;
	}
	section {
		width: 25rem;
		margin: -1.2rem auto 0;
		display: grid;
		grid-template-rows: 6rem 6rem 6rem 6rem;
		grid-row-gap: 1.2rem;
	}
	article {
		width: 25rem;
		padding: 0 .5rem;
	    height: 5rem;
	    margin: 1.25rem auto;
	    border: .2rem solid #30F;
	}
	article:after {
		content: "";
	    box-shadow: inset 0 0 1rem #C95;
	}
	article > p {
		font-size: .65rem;
		margin: 0 .5rem;
	}
	article:hover {
	    box-shadow: inset 0 0 1rem #349, inset 0 0 1rem #9AF;
	    border: 1rem inset #2C3,1rem outset #FF3;
	}
	article h2 {
	    height: 1rem;
	    font-size: 1.2rem;
	    color: #6A4;
	    text-shadow: 0 .1rem 0 #03F, 0 .1rem 0 #303, .1rem .1rem 0 #23A, .15rem .15rem 0 #A69;
	}

	article h2:hover {
	    color: #3A3;
	}
	.flexx {
		width: 25rem;
	    padding: .3rem;
	    font-size: .55rem;
	}
	.flexx label {
	    font-size: .55rem;
		color: #1A3;
	}
	input[type="submit"] {
		width: 1.2rem;
		color: #39A;
	}
	.nav > ul, ul li, ul ul li, ul ul ul li,
	ul li ul li, ul li ul li ul li, li, button {
		width: 1.25rem;
		height: .8rem;
		font-size: .55rem;
		color: #A63;
	}
	.nav > ul a {
		color: #F3A;
	}
	.nav:hover > ul a, 	.nav > ul:hover a, 	.nav > ul a:hover {
		color: #FF0;
	}
}