body { background-color: #2F4F4F;}
div {font-family: monospace;;}

/*.page-wrapper {color: white;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
  }*/
  .page-wrapper {
  display:grid;
  height: 100vh;
  grid-template-columns: 2fr 1fr;
  font-size: 2em;
  color: white;
  padding-left: 350px;
  padding-right:350px;

}
.sidebar {
  grid-column: 2;
  grid-row:1/span 2;
  padding-left:2em;
}
.intro {
  grid-column: 1;


}




h1{
  height:0px;
  width: 100px;
  border-top: 100px solid transparent;
  border-left: 150px solid red;
  border-bottom: 100px solid transparent;
  position: fixed;
  left: 0%;

}



header h2{
height:0px;
width: 200px;
border-top: 100px solid transparent;
border-left: 150px solid red;
border-bottom: 100px solid transparent;
position: fixed;
left: 0%;
top: 15%;
opacity: 0.1;
transition: 0.3s;

}


header h2:hover {opacity:1;


}







}

.explanation{
  position: absolute;
  top: 0px;
  right: 200px;




}

.participation h3 {
width: 0px;
height:0px;
border-top: 100px solid transparent;
border-left: 150px solid red;
border-bottom: 100px solid transparent;
position: fixed;
left: 0%;
top:30% ;
opacity: 0.1;
transition: 0.3s;

}
.participation h3:hover {opacity: 1;}


.summary { position: relative;
  border: 1px solid yellow;







}
.preamble {  border: 1px solid yellow;




}


.preamble h3{
  width: 0px;
height:0px;
border-top: 100px solid transparent;
border-left: 150px solid red;
border-bottom: 100px solid transparent;
position: fixed;
left: 0%;
top:45% ;
opacity: 0.1;
transition: 0.3s;

}









.preamble h3:hover { opacity: 1;

}

.benefits{
    border: 1px solid yellow;

}

.benefits h3 {
width: 0px;
height:0px;
border-top: 100px solid transparent;
border-left: 150px solid red;
border-bottom: 100px solid transparent;
position: fixed;
left: 0%;
top:60% ;
opacity: 0.1;
transition: 0.3s;

}
.benefits h3:hover {
  opacity: 1;
}
.explanation h3{
  width: 100px;
  height: 0;
  border-top: 100px solid transparent;
  border-right: 150px solid red;
  border-bottom: 100px solid transparent;
  position: fixed;
  right: 0%;
  top:30%;
  opacity: 0.1;
  transition: 0.3s;

}
.explanation h3:hover {
opacity: 1;
}


.archives{
  width: 100;
  height: 0;
  border-top: 100px solid transparent;
  border-right: 150px solid red;
  border-bottom: 100px solid transparent;
  position: fixed;
  right: 0%;
  top:45%;
  opacity: 0.1;
  transition: 0.3s;
}
.archives:hover {
  opacity: 1;
}

.resources {
  width: 100;
  height: 0;
  border-top: 100px solid transparent;
  border-right: 150px solid red;
  border-bottom: 100px solid transparent;
  position: fixed;
  right: 0%;
  top:60%;
  opacity: 0.1;
  transition: 0.3s;
}


.resources:hover {
  opacity:1;
}


}






.participation h3:hover {
  opacity: 1;
}


.participation {
    border: 1px solid yellow;




}




.select{

  width: 75px;
  height: 0;
  border-top: 100px solid transparent;
  border-right: 150px solid red;
  border-bottom: 100px solid transparent;
  position: fixed;
  right: 0%;
  top:0% ;

}




.requirements h3 {
    width: 100;
    height: 0;
    border-top: 100px solid transparent;
    border-right: 150px solid red;
    border-bottom: 100px solid transparent;
    position: fixed;
    right: 0%;
    top:15%;
    opacity: 0.1;
    transition: 0.3s;

  }

  .requirements h3:hover{ opacity:1;



  }

.requirements{grid-column: 300px;

}






@media screen and (max-width:800px)
{
  .page-wrapper {
  color: yellow;
}


h1{
border-left: 150px solid green;
}



header h2 {
    border-left: 150px solid green;

}
.participation h3{
border-left: 150px solid green;

}
.preamble h3{
border-left: 150px solid green;

}
.benefits h3{
border-left: 150px solid green;

}
.explanation h3{
border-right: 150px solid green;

}
.archives{
border-right: 150px solid green;

}
.resources{
border-right: 150px solid green;

}
.select{
border-right: 150px solid green;


}
.requirements h3{
border-right: 150px solid green;



}