/* Week 1 CSS */
*, html {
		box-sizing: border-box;
		margin: 0;
}
body {
  background: #f5f5f5;
}
#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;
  		background-color: darkgreen;
  		color: #FFF;
}
.webForm {
  grid-column: span 2;
}
header { 
  background-color: darkgreen;
    color: #FFF;
}
header h1 {
  padding: 20px; 
  /*added in week 4*/
  font-size: 10vh;
  text-align: center;

}
nav {
  background-color: lightgreen; 
  color: white; 
  padding: 15px; 
  text-align: right; 
}
h1, h2, h3, h4, h5, h6 {
  padding: 10px 0px; 
}
div {
  border: solid thin black;
  padding: 10px;
  border-radius: 20px;
}
.border { 
  border-radius: 0px; 
  border: dashed thick green;
}

.margin {
  border-radius: 0px;
  margin: 20px;
}
.pattymelt {
  border-radius: 0px;
  padding: 20px;
}
.floatExistential {
  width: 25%;
  height: 25%;
  border-radius: 0px;
  background-color: lightsalmon;
  float: right;
}
.color {
  background-color: lightblue;
  color: darkgreen; 
  padding: 15px; 
}
.size {
  width: 80%; 
  margin: auto;
  font-size: .7em;   
}
.gFont {
font-family: 'Fugaz One', cursive;
}
/* Week 4 CSS*/
.footer {
background-color: darkgreen;
color:white;
margin-top: 10px;
padding:20px;
border-radius: 0px 0px 15px 15px;
}
/*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 ---------------------------*/
@media screen and (max-width: 600px){
	#HTML{
	display:block;
	}
	div{
		margin: 10px auto;
		border-radius: 0px;
	}
	img{
		width:100%;
	}
	#CSS{
	display:block;
}
	
}