body{
  font-family: monospace;
  font-size:22px;
  line-height:1;
  padding:0;
  margin:0;
  background-color:#000000;

}





  header{
    padding-bottom:11px;
  }
  #showcase h1{
    margin-top: 44px;
  }
}
/*global*/
.container0{
  width:80%;
  margin:auto;
  overflow:hidden;
}

/*header*/
header{
  background:#8a2be2;
  color:#FFFFFF;
  padding-top:44px;
  min-height:82px;

}

header a{
  color:#C0C0C0;
  text-decoration:none;
  font-size:14px;

}

header ul{
  margin:0;
  padding:0;
}

header li{
  float:left;
  display:inline;
  padding: 0 22px 0 22px;
}

header #branding{
  float:left;
  margin-left: 8px;
}

header #branding h1{
  margin:0;
}

header nav{
  float:right;
  margin-top:8px;

}

header a:hover{
  color:#00FF00;
  font-style:oblique;
}
header a:active{
  color:#00FF00;
  font-style:oblique;
  font-size:13px;
}

/*showcase*/

#showcase{
  text-decoration:underline;
    text-decoration-color: #000000;
  min-height: 400px;
  background:url('../img/showcase.jpg');
  text-align:center;
  color:#FFFFFF;
}

#showcase img{
  width: 100%;
  height: auto;
}


#showcase h1{
  margin-top: 74px;
  font-size:44px;
  margin-bottom:13px;
}

/*boxes*/
#boxes{
  margin-top:22px;

}

#boxes .box {
  color#8a2be2;
  float:left;
  text-align:center;
  width:30%;
  padding:8px;

}

#boxes .box:hover{
  color:#00FF00;
  font-weight:bold;
}

#boxes .box img{
  width: 200px;



}
.box  {
  color:#8a2be2;
  text-decoration: none;
}

.box :visited {
  color:#8a2be2;
  text-decoration:none;
}
.box :hover {
  color:#00FF00;
  font-style:oblique;
}
.box :active {
  color:#00FF00;
  font-style:oblique;
}
/*media q*/
@media(max-width: 1000px){
  header #branding,
  header nav,
  header nav li,
  #boxes .box{
    float:none;
    text-align:center;
    width:100%;
  }