* {
	padding: 0;
	margin: 0;
}

body {
	background-color: lightblue;
	min-width: 935px;
}

nav {
	margin: 10px;
	height: 80px;
}

.modal-trasparency {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0, 0, 0, .7);
	/*display: none;*/
	transition: display 2s, width 2s, height 2s;
}

.modal-nav {
	position: fixed;
	width: 90%;
	height: 200px;
	margin: auto;
	margin: 100px 5%;
	border-radius: 20px;
	border: 2px solid green;
	background-color: rgba(100, 222, 111, .6);
	/*display: none;*/
	transition: display 2s, width 2s, height 2s;
}
.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}

.clearfix { 
	display: inline-block; 
}

li {
	list-style: none;
	padding: 5px 10px;
	margin: 10px 15px;
	float: left;
	border: 1px solid yellow;
	background-color: gray;
	color: yellow;
	font-family: sans-serif;
	font-size: 25px;	
}

li:hover {
	background-color: yellow;
	color: grey;
}

.modal-close {
	position: relative;
	margin-left: 80%;
	margin-bottom: 20px;
	padding: 0;
	color: red;
	diplay: inline;
	width: 20%;
	border: 2px solid grey;
	background-color: lime;
	border-radius: 30px;
	text-align: center;
}

.practice-material {
	padding: 15px 10px;
	margin: 1% 10px;
	width: calc(95% - 1px);
	height: 22vh;
	min-height: 22vh;
	border: 1px solid white;
	background-color: black;
	color: white;		
	letter-spacing: 2.3px;
	font-family: sans-serif;
	font-size: 300%;		
	border-radius: 15px;	
	min-width: 645px;
	overflow-y: hidden;
	z-index: 100;
}

.input {
	padding: 1%;
	/*margin: 1% 10px;*/
	margin: 0;
	/*width: calc(95% - 1px);*/
	width: 10px;
	border: 1px solid transparent;
	color: transparent;
	letter-spacing: 2px;
	background-color: transparent;
	border-radius: 15px;
	/*box-shadow: black 15px 20px 15px;	*/
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	/*visibility: hidden;*/
}

form {
	border: transparent;
}

textarea {
/*	width: 100%;
	height: 34px;*/
	width: 1px;
	height: 1px;
	overflow: hidden;
	font-family: sans-serif;
	font-size: .1rem;
	border: transparent;
	color: transparent;	
	background-color: transparent;
}

.key-board {
	padding: 1%;
	margin: 1% 10px 1% 5px;
	width: calc(95% - 1px);  /*changes t0 calc(95% - 1px)*/
	border-radius: 20px;
	border: 1px solid white;
	height: 56vh;
	background-color: grey;
	box-shadow: black 15px 20px 15px;
	clear: both;
	min-width: 645px;
	display: inline-block;
	transition: width 2s;
	/*transform: rotateX(-65deg);*/
}

.results {
	padding: 1%;
	margin: 1% 10px 1% 0;
	width: 0; 
	border-radius: 20px;
	border: 1px solid black;
	box-shadow: blue 15px 20px 15px;
	height: 56vh;
	background-color: silver;
	display: inline;
	visibility: hidden;
	float: right;
	transition: width 2s, visibility 0s;
	/*clear: both;*/
}

.second-row, .third-row, .fourth-row, .space-bar {
	clear: both;
} 

.key, .letter {
	height: 40px;
	margin: 7px .62% ;	
	padding: 10px .9092%;
	float: left;
	border: 1px solid black;
	background-color: black;
	color: white;
	font-size: 1.9rem;
	border-radius: 10px;
	text-align: center;	
	box-shadow: blue 4px 4px 5px;
}

.key:hover, .letter:hover {
	background-color: rgba(0, 0, 0, .7);
	box-shadow: blue 0px 0px 0px;
	position: relative;
	right: -.4545;
	bottom: -5px;
}

.key, .letter, .tilda, .dash, .equals, .left-bracket, .right-bracket, .back-slash, .semi-colon, .apostraphy, .comma, .period, .forward-slash {
 	width: 3.636%;
}

.double {	
	padding-top: 10px;
	font-size: 1rem;
}

.double p {
	padding-top: 0px;
}

.backspace, .tab {
	width: 6.817%;	
	font-size: .9rem;
	padding-left: 2px;
	line-height: 1rem;
	margin-right: 0;
}

.enter {
	margin-right: 0;
	width: 7.817%;
	font-size: 1rem;
}

.cap-locks {
	width: 8.6364%;
	font-size: 1rem;
}

.shift {
	width: 11.65%;	
	font-size: 1rem;
}

.stats {
	border: 1px solid black;
	border-radius: 15px;
	font-size: 75%;
	background-color: white;
	margin: 10px auto;
	padding : 5px;
	text-align: center
}

.keepGoing {
	font-size: 1.4rem;
	margin: 15px 0 0 0;
	border: 3px solid white;
	border-radius: 15px;
	background-color: rgba(111, 111, 111, .5);
	padding: 15px;
	text-align: center;
}

.time, .wpm, .accuracy, .advance {
	color: green;
}

.inlineH {
	display: inline;
}

.space-bar {
	width: 31.2727%;
	margin-left: 29.8182%;
}

/**********MEDIA QUERIES*************/
/*Change margin
Change fon size on Backspace button
Change actual button size on backspace
Caps Lock, and Shift*/

@media only screen and (max-width: 1050px) {
    #advance, #menu {
        font-size: 2.5rem;
    }

    .keepGoing {
    	padding: 5px;
    	margin-top: 8px;
    }
}