/* Week 2 CSS */

*, html {
  box-sizing: border-box;
 margin: 0;
}
body {
 background: #f5f5f5;
 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; 
}
.webForm {
 grid-column: span 2;
}
.reference {
 grid-column: span 3;
 background-color: rosybrown;
 color: #F3F3F3;
}
header {
 background-color: #932432;
 color: #F3F3F3;
}
header h1 {
 padding: 25px;
 /* added in week 4 */
 font-size: 10vh;
 text-align: center;
}
nav {
 background-color: rosybrown;
 padding: 10px;
 text-align: right;
}
h1, h2, h3, h4, h5, h6 {
 padding: 10px 0px;
}
div {
 border: solid thin black;
 padding: 10px;
 border-radius: 25px;
}
.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: crimson;
 float: right;
 margin-top: 25px;
}
hr {
 margin: 25px 0px;
}
.color {
 background-color: maroon;
 color: bisque;
}
.size {
 width: 80%;
 height: 80%;
 margin: auto;
 font-size: .70em;
 padding: 0px 10px;
}
/* Week 3 CSS */
.gFont {
 font-family: 'Amatic SC', cursive;
}
.serif {
 font-family: serif;
}
.sanserif {
 font-family: sans-serif;
}
.mono {
 font-family: monospace
}
.underline {
 text-decoration: underline;
}
.bold {
 font-weight: bold;
}
.italic {
 font-style: italic;
}
.smallcaps {
 font-variant: small-caps;
}
.allcaps {
 text-transform: uppercase;
}
nav a {
 text-decoration: none;
 color: white;
 font-size: 1em;
 font-weight: bold;
 font-family: sans-serif;
 margin-right: 25px;
}
nav a:hover {
 color: black;
}

/* Week 4 CSS */
.footer {
 background-color: #932432;
 color: #F3F3F3;
 margin-top: 10px;
 padding: 10px;
 border-radius: 0px 0px 15px 15px;
}

/* Week 2 CSS */
/* Tablet View */
@media screen and (max-width:768px){
 #HTML {
  grid-template-columns: 1fr1fr;
}
#CSS {
 grid-template-columns: 1fr1fr;
}
.reference {
 grid-column: span 2;
 background-color: rosybrown;
 color: #F3F3F3;
}
}
/* Mobile View */
@media screen and (max-width: 600px){
 #HTML{
  display: block;
 }
 div{
  margin: 10px auto;
  border-radius: 0px;
 }
 img{
  width: 100%;
 }
 #CSS{
  display: block;
 }
 .float {
     min-height: 150px;
 }
}