/*Week 4 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: green;
}
.webForm{
  grid-column:span 2;
}
.tables{
  grid-column:span 2;
}
.hyperlinks{
  grid-column:span 2;
}
header {
  background-color: blue;
  color:white;
text-align:center;
}
header h1 {
  padding:25px;
font-size: 10vh;  
}
nav {
  background-color: teal;
  padding: 15px;
  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: green;
  float: right;
  margin-top: 25px;
}
hr{
  margin:25px 0px;
}
.color {
  background-color: cornsilk;
    color: #d2691e;
}
.size {
  width: 80%;
  margin: auto;
  font-size: .70em;
  padding: 0px 10px;
}
/* Week 3 CSS*/
.webForm input, select{
  margin: 5px 0px;
}
.webForm #submit, #clear{
  margin: 5px;
  background-color: crimson;
  color: white;
  padding: 5px 15px;
}
.gFont {
  font-family: 'Lobster', cursive;
}
.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:white;
  font-size: 1em;
  font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
  margin-right: 25px;
}
nav a:hover{
  color: crimson;
}
table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
  
  .footer {
      background-color: darkgoldenrod;
  }
.pseudo-classEX a:hover{
 color: green;
}

/*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;
  }
}