*
{
  padding:0;
  margin:0;
  text-align: center;
}
p
{
  margin:5%;
}
body
{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  color:#ffffff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size:1.25rem;
}
main
{
  grid-column:1/5;
  grid-row:1/2;
  background-color:#121212;
  height:100vh;
  display: grid;

  overflow-y: auto;
}


section
{
  grid-column: 5/6;
  grid-row:1/2;
  background-color: #000000;
  height:100vh;
}

a, a:visited
{
  color: #ffFF00;
  text-decoration: none;
  cursor:crosshair;

}
a:hover
{
  color:#FFFFFF;
  font-weight:800;
}
#navBar
{
  height: 100%;
  width:94%;
  padding-left: 6%;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;

}
#picBox
{
  grid-row:1/2;
  text-align: center;
}
.picBoxImg
{
  width: 90%;
  margin: 10% 5% 10% 0%;
  border-color:#ff0066;
  border-style: solid;
  border-width:.25rem;

}
#menuBox
{
  grid-row:2/4;
  text-align: center;
  overflow-y: scroll;
  overflow-x: hidden;
}
#menuBox a
{
  display: block;
  background-color: #ff0066;
  width: 90%;
  color: #000000;
  padding: 5%;
  margin: auto;
}
#menuBox a:hover
{
  background-color: #FFFF00;
}
#descBox
{
  grid-row:3/4;
  text-align: center;
}
#mainRect1
{
  grid-row:1/2;
}
#mainRect1 img
{
  width:100%;

  border-bottom-color:#ff0066;
  border-bottom-style: solid;
  border-bottom-width:.25rem;
}
#mainRect2
{
  grid-row:3/4;
}
#mainRect2 img 
{
  display: inline-block;
  width: 25%;
  margin: 2.5%;
  border-color:#ff0066;
  border-style: solid;
  border-width:.25rem;
  background-color:rgba(0,0,0,.75)

}
#mainRect3
{
  grid-row:2/3;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  margin:5%;
}

#portfolioImg
{
  grid-column:1/2;
}

#portfolioImg img
{
  height:40vw;
  border-color:#ff0066;
  border-style: solid;
  border-width:.25rem;
  background-color:#000000;
}
#portfolioText
{
  grid-column:2/3;
  color:#ffffff;
  padding:5%;
  
}

h1
{	
  margin-top:2.5%;
  font-size:2.25rem;
  color:#FF0066;
  padding:2.5%;
}

h2
{	
  font-size:1.75rem;
  color:#FFFF00;
  padding:2.5%;
}
footer
{
  padding:2.5%;
  background-color:#000000;
  color:#FF0066;
  width:95%;

}

video
{
	width:100%;
	cursor: crosshair;
}
@media (min-width: 1600px) 
{
	h1
	{
		font-size:3.5rem;
	}
	h2
	{
		font-size:2.5rem;
	}
	body
	{
		font-size:1.75rem;
	}
}

@media (max-width: 840px) 
{
  body
  {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow: hidden
  }

  section
  {
    grid-column: 1/2;
    grid-row:1/2;
    background-color: #000000;
  }
  main
  {
    grid-column: 1/2;
    grid-row:1/2;
    overflow:auto;
  }
	
  #navBar
  {
    
    height:30vh;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }
  #picBox
  {
    grid-column:1/2;
    grid-row:1/2;
    text-align: center;
  }
  .picBoxImg 
  {
    
    margin: 5% 10% 5 10%;

  }
  #menuBox
  {
    grid-column:3/4;
    grid-row:1/2;
    height:50%;
    margin:5%;
  }
  #descBox
  {
    grid-column:3/4;
    grid-row:1/2;
    text-align: center;
  }
  #mainRect3
  {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  #portfolioImg
  {
    grid-row:1/2;
    grid-column:1/2;
  }

  #portfolioImg img
  {
    width:80%;
    height:auto;
  }
  #portfolioText
  {
    grid-column:1/2;
    grid-row:2/3;
  }
}