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

}





  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: 40px;
  width: 100%;

}

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: 200px;
  background:url('../img/showcase.jpg') no-repeat;
  text-align:center;
  color:#FFFFFF;
}

#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;
}
img{width:420px}
#boxes .box img{
  width: 200px;



}

video{
  width:420px;

}

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

.box > a:visited {
  color:#8a2be2;
}
.box > a:hover {
  color:#00FF00;
  font-style:oblique;
}
.box > a:active {
  color:#00FF00;
  font-style:oblique;
  font-size:20px;
}
.scene,
canvas{
  position: absolute;
  width: 100%;
  height: 100%;
}

/*media q*/
@media(max-width: 768px){
  header #branding,
  header nav,
  header nav li,
  #boxes .box{
    float:none;
    text-align:center;
    width:100%;
  }