/* Week 2 CSS */
/* remember how to comment in CSS and HTML DARRELL */
*, html {
  box-sizing: border-box;
  margin: 0;
}
body {
  background: #f5f5f5;
  line-height: 130%;
}
/* remember to look up Myers Reset */
#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;
}
/* everythign in CSS is so different remember to practice this extra hard!*/
.webForm {
  grid-column: span 2;
}
.reference {
  grid-column: span 3;
  background-color:darkcyan;
  color: #fff;
}
/* Note: HTML and CSS are less pretty to write than PHP :( */
header {
  background-color: purple;
  color: white;
  text-align:center;
}
/* active links are red!!!!!!!!!!! */
header h1 {
  padding: 25px;
  /*added in week 4*/
  font-size: 10vh;
  
}
nav {
  background-color: darkcyan;
  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:cornsilk;
  color: #d2691e
}
.size{
  width:80%;
  height:80%;
  margin:auto;
  font-size: .70em;
  padding: 0px 10px;
}
/* Week 3 CSS */
.gFont {
  font-family: 'Indie Flower', cursive;
}
.serif{
  font-family: serif;
}
.sansserif {
  font-family: sans-serif;
}
.mono {
  font-family: "Courier New", monospace;
}
.underline {
  text-decoration: underline;
}
.fontWeight {
  font-weight: bold;
}
.fontStyle {
  font-style: italic;
}
.fontVariant {
  font-variant: small-caps;
}
.uppercase {
  text-transform: uppercase;
  /* for use in ALLCAPS*/
}
nav a {
  text-decoration: none;
  color: #fff; /*white code*/
  font-size: 1em;
  font-weight: bold;
  font-family: sans-serif;
  margin-right: 25px;
}
nav a:hover {
  color: red;  
}
/* Week 4 CSS */
.footer {
    background-color:purple;
    color:#fff;
    margin-top: 10px;
    padding: 10px;
    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;
  }
}