/*Space Painter css*/

div.logo {
	margin-left:auto;
	margin-right:auto;
	border-bottom:#ffffff 5px solid; 
	background-color:  #1c334c; /*space blue*/
	width:100%;
}

div.logo p {
	color: #ffffff; /*white*/
	font-family: 'Lexend Deca', sans-serif;
	font-size:175%;
	line-height:.9;
	text-align: left;
	vertical-align:bottom;
	padding-top:15px;
	margin-left:20px;
}

div.logo p span {
	font-family: 'Lexend Deca', sans-serif;
}

div.container {
	height:400px;
	width:100%;
	margin:25px;
}


	div.art {
		float:left;
		width:33%;
	}
	
		div.art img {
			height:400px;
			width:auto;
			/*
			clip-path: circle(10% at center);
			*/ 
		}
	
	div.exercise {
		float:left;
		width:33%;
		height:400px;
		position:relative;
		font-family: 'Lexend Deca', sans-serif;
	}
	
		div.exercise img {
			height:140px;
			width:auto;
		}
	
		div.exercise p.direct  {
			font-size:14px;
			color: #1c334c;
		}
		
		div.exercise p.sentence {
			font-size:18px;
			color:#000;
		}
			
		div.exercise ul {
			list-style-type:none;
		}
		
			div.exercise ul li {
				display:inline;
			}
		
			div.exercise ul li img {
				height:50px;
				width:auto;
			}
			
		#stats ul {
			list-style-type:none;
		}
		
			#stats ul li {
				display:block;
			}
	
	div.keypad {
		float:left;
		width:33%;
		font-family: 'Lexend Deca', sans-serif;
	}
	
	/*---styling for missed words list---*/
	
ul.missed {
	list-style:none;
	font-family: 'Lexend Deca', sans-serif;
	font-size:18px;
	font-weight:600;
	color:#000000;	
}

	
	ul.missed li::before {
		content: "❌";
		display: inline-block;
		margin-right: 0.5rem;
	}
	

		
		/*---styling for buttons---*/
		
		.keypad div ul {
			list-style-type:none;
			margin-left:auto;
			margin-right:auto;
		}
		
		.keypad div ul button {
			background: rgb(42,76,113);
			background: linear-gradient(0deg, rgba(42,76,113,1) 0%, rgba(33,33,33,1) 55%);
			border: none;
			border-radius: 4px;
			color: #ffff31;
			padding: 4px 8px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 28px;
			font-family: 'Quicksand', sans-serif;
			font-weight:700;
			margin: 2px;
			width:50px;
			-webkit-transition-duration: 0.4s; /* Safari */
			transition-duration: 0.4s;
			cursor: pointer;
		}
		
		.keypad div ul button.bar {
			width:104px;
		}
					
			.keypad div button:hover {
				background: rgb(97,97,97);
				background: linear-gradient(0deg, rgba(97,97,97,1) 0%, rgba(0,0,0,1) 55%);
				color:#e5e52c;
			}
				
		#answers {
			margin-left:auto;
			margin-right:auto;
		}
		
		#answers table {
				border:2px solid #1c334c;
				border-spacing:4px;
				margin-left:auto;
				margin-right:auto;
			}
			
				#answers table tr td {
					border: 1px solid #1c334c;
					color:#1c334c; 
					font-size:30px;
					font-family: 'Lexend Deca', sans-serif; 
					text-align:center; 
					margin-left:auto; 
					margin-right:auto;
					padding: 5px; 
				}
		
div.foot {
	background-color:  #1c334c; /*space blue*/
	border-top:#fff 5px solid;
	margin-left:auto;
    margin-right:auto;
	padding:2px 2px;
	width:100%;
}

div.foot img {
	vertical-align:middle;
	float:left;
	margin:5px 15px 0 15px;
	height:50px;
	width:auto;
}

div.foot p {
	font:80% 'Muli', "Arial Black", Gadget, sans-serif; 
	color: #fff;
	text-align: left;
	vertical-align:top;
}

div.foot p span {
	font-family: 'Lexend Deca', sans-serif; 
	font-size:140%; 
}

div.foot a:link {
	color: #D9CA73; /*gold*/
	text-decoration: none;
}

div.foot a:visited {
	color: #D9CA73; /*gold*/
	text-decoration: none;
}

div.foot a:hover {
	font-style: italic;
	color:#fff;         
}

div.foot a:active {
	font-style: italic;
	color:#fff;
}