body {
  background: black;
  margin:0;
  padding:0;
}

/*Navigation*/

.topbar {
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 70px;
  border-bottom: 0.25px solid white;
  z-index: 24;
  background-color: black;
  position: fixed;
}

.nav{
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
   -webkit-text-fill-color: black;
   -webkit-text-stroke-width: 0.75px;
   -webkit-text-stroke-color: white;
    font-weight: normal;
    -webkit-text-size-adjust: 100%;
                line-height: 23px;
}


a:link {
  text-decoration: none;
}

a:hover { 
  transform: skew(-20deg);
}

#bencain {
    cursor: pointer;
    position: fixed;
    z-index: 25;
    top: 21px;
    left: 25px;
}

#about {
    cursor: pointer;
    position: fixed;
    z-index: 25;
    top: 21px;
    right: 25px;
}


/*Text*/

#textbox {
  left: 17vw;
  width: 66vw;
  height: auto;
  z-index: 23;
/*  float: left;*/
/*  background-color: red;*/
  position: absolute;
  top: 140px;
    text-align: center;
/*    transform: skew(-20deg)*/
	            margin-bottom: 70px;
}

#textbox a {
/*	text-decoration: underline;*/
}

#textbox a:hover {
/*	text-decoration: underline;*/
	    transform: skew(-20deg);
	    display: inline-block;
	        text-align: center;


}

.years {
	width: 66vw;
	font-family: 'Archivo Black', sans-serif;
  font-size: 45px;
  color: white;
    font-weight: normal;
    -webkit-text-size-adjust: 100%;

}

.project-titles {
	width: 66vw;
	       font-family: 'Archivo Black', sans-serif;
  font-size: 45px;
   -webkit-text-fill-color: black;
   -webkit-text-stroke-width: 1.25px;
   -webkit-text-stroke-color: white;
    font-weight: normal;
    -webkit-text-size-adjust: 100%;
    line-height: 50px;

}

.project-titles:hover {
	  transform: skew(-20deg);
	}


/*.textbox:link {
	  text-decoration: none;
}


.textbox:hover { 
  transform: skew(-20deg);
}*/

#awp {
}

#awp:link {
	text-decoration: none;
}

#awp:hover { 
  transform: skew(-20deg);
}


@media screen and (max-width : 1030px) {


/*Navigation*/






@media screen and (max-width : 500px) {

/*Navigation*/

  .nav{
font-size: 18px;
   -webkit-text-stroke-width: 0.75px;
}

.topbar {
  height: 40px;
}


#bencain {
    top: 9px;
    left: 10px;
}

#about {
    top: 9px;
    right: 10px;
}



#textbox {
  left: 2.5vw;
  width: 95vw;
  height: auto;
  z-index: 23;
/*  float: left;*/
/*  background-color: red;*/
  position: absolute;
  top: 70px;
    text-align: center;
/*    transform: skew(-20deg)*/
              margin-bottom: 70px;
}

.years {
  width: 95vw;
  font-family: 'Archivo Black', sans-serif;
  font-size: 35px;
  text-decoration-color: white;
    font-weight: normal;
    -webkit-text-size-adjust: 100%;

}

.project-titles {
  width: 95vw;
         font-family: 'Archivo Black', sans-serif;
  font-size: 35px;
   -webkit-text-fill-color: black;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
    font-weight: normal;
    -webkit-text-size-adjust: 100%;
    line-height: 40px;

}



}