@charset "utf-8";
/* CSS Document */
*,html {
	box-sizing: border-box;
	margin: 0px;
	padding:0px;
}

body {
  background: #FFFFFF;
	line-height: 130%;
}
#HTML{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap:25px;
	justify-content:center;
	width:95%;
	margin:25px auto;
}
#CSS{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:25px;
	justify-content:center;
	width:95%;
	margin:25px auto;
}
.reference{
	grid-column:span 3;
}
.webForm{
	grid-column:span 2;
}
header{
	background-color:black;
	color:white;
	
}
header h1{
	padding:40px;
	padding-bottom: 40px;
	font-family: 'Poppins', sans-serif;
	font-size: 60px;
}
nav{
	background-color:#D7D7D7;
	padding:10px;
	text-align:right
}
h1, h2, h3, h4, h5, h6{
	padding:10px 0px 0px 0px;
	font-family: 'Poppins', sans-serif;
}
div {
	border: solid thin black;
	padding:10px;
	border-radius:25px;
}
.lists li{
	margin-left:15px;
}
.border{
	border-radius:0px;
	border: dashed thin darkcyan;
}
.margin{
	border-radius:0px;
	margin:20px;
}
.padding{
	border-radius:0px;
	padding:20px;
}
.floatEx{
	width:25%;
	height:25%;
	border-radius:0px;
	background-color:black;
	float:left;
	margin-top:25px;
}
hr{
	margin:25px 0px;
}
.color{
	background-color:black;
	color:#d2691e;
}
.size{
	width:80%;
	height:80%;
	margin:auto;
	font-size:.70em;
	padding: 0 10px;
}
/*Week 3 CSS--------------------------*/
.webForm input, select{
	margin:5px 0px;
	color:#a6a6a6	;
}
.webForm #submit, #clear{
	margin:5px;
	background-color:black;
	color:white;
	padding:5px 15px;
}
#clear{
	background-color:red;
}
#male, #female{
	margin:0 5px;
}
#web{
	color:black;
}
.gFont{
	font-family: 'Poppins', sans-serif;
}
.underline{
	text-decoration:underline;
}
.fontWeight{
	font-weight:bold;
}
.fontStyle{
	font-style:italic;
}
.fontVariant{
	font-variant:small-caps;
}
.uppercase{
	text-transform:uppercase;
}
nav a{
	text-decoration:none;
	color:black;
	font-size:1em;
	font-weight:bold;
	font-family:sans-serif;
	margin-right:25px;
	}
nav a:hover{
	color:black;
	text-decoration:underline;
}
/*Week 2 CSS---------------------------*/
/*Tablet View -----------------------*/
@media screen and (max-width: 768px){
	#HTML{
	grid-template-columns:1fr 1fr;
	}
	#CSS{
	grid-template-columns:1fr 1fr;
	}
	.reference{
		grid-column:span 2;
	}
	}	
/*Mobile View ---------------------------*/
/*Mobile View ---------------------------*/
@media screen and (max-width: 600px){
	#HTML{
	display:block;
	}
	div{
		margin: 10px auto;
		border-radius: 0px;
	}
	img{
		width:100%;
	}
	#CSS{
	display:block;
}
	
}