html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; }

html{
color: Black;
font-family: 'Gentium Book Plus', serif;
background-image: url("../media/starsbg.jpg");
font-size: large;
}

a{
  font-weight:bolder;
}

.projects{
    width: 90%;
    margin: 15px auto 15px auto;
    padding: 15px;
    background-color: rgba(255,255,255,0.8);
}

.reel{
  width: 90%;
  margin: 15px auto 15px auto;
  padding: 15px;
  background-color: rgba(255,255,255,0.8);
  text-align: center;
}

.reel h1{
  text-align: left;
}

video{
  margin: auto;
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  width: 95%;
  position: relative;
  margin: 10px auto 10px auto;
  
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position:absolute;
  top: 50%;
  width: auto;
  padding: 6px;
  color: white;
  background-color: black;
  font-weight: bold;
  font-size: 40px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}



.active, .dot:hover {
  background-color: #717171;
}


.project-box{
  margin: 10px 0 10px 0;
  padding: 15px;
  position: relative;
  border-top: 5px solid black;
}

header{
  background-color: rgba(255,255,255,0.8);
  margin-bottom: 20px;
  border-bottom: 10px solid #286819;
  height: 96px;
}


header h1{
  color: black;
  margin-left: 25px;
  position: absolute;
  top: 0px;
}

header h2{
  color:#286819;
  margin-left: 25px;
  padding-bottom: 10px;
  position: absolute;
  top: 45px;
}

.introbox{
  background-color: rgba(255,255,255,0.8);
  display: flex;
  width: 90%;
  margin: auto;
  padding: 15px;
}

.picbox img{
  height: 400px;
}

.wordsbox{
  margin:20px;
}

footer{
  background-color: rgba(206, 206, 206, 0.8);
  margin: 5vh auto auto auto;
  border-top: 10px solid #286819;
  text-align: center;
  display: grid;
  grid-template-areas: "contact resources";
  padding-bottom: 10px;
}

.slideshow-container h2{
  color:black;
  text-align: center;
}

@media only screen and (max-width: 1000px){
  .introbox {
    display: grid;
    margin: 5vh auto auto auto;
  }

  .introbox img {
    height: 250px;
  }

  .introbox h2{
    text-align: center;
  }

  .picbox{
    grid-area: "pic";
    text-align: center;
  }

  .wordsbox{
    grid-area: "head";
  }
 
 }