body {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 800px; 
}   
 @media only screen and (min-width: 992px) and (max-width: 1199px) {
    body {
      height: 600px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    body {
      height: 600px; } }
  @media only screen and (max-width: 767px) {
    body {
      height: 600px; } }

#canvas, #text {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 800px;
} 
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #canvas, #text {
      height: 600px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
    #canvas, #text {
      height: 600px; } }
@media only screen and (max-width: 767px) {
    #canvas, #text {
      height: 600px; } }



#text p{
min-height: 100vh;
width: 100vw;
z-index: 1;
color: #fff;
text-transform: uppercase;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
opacity: 0.9;
}
#text h1 {
min-height: 100vh;
width: 100vw;
z-index: 1;
color: #fff;
text-transform: uppercase;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
opacity: 0.9;
}