* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/


.parent
{
  width: 100%;
  height: 100vh;
  position:relative;
}

.child1
{

position:absolute;
  top:40%;
  left:0px;

}
.child2
{
  float:right;
  height:auto;
  width:100%;
  position:absolute;
  bottom:0px;
}

.child3
{
  top:0px;
  height:auto;
  position:absolute;
  margin-left: 30%;
  margin-right: 35%;
}

.child4
{
    display:none;
}


#headerimg
{
  float:right;
  height:80vh;
  width:50%;
}


canvas
{
  width: 100%;
  height: 100vh;
}

footer
{
    width:80%;
}

@media screen and (max-width: 500px) {
.child3
  {
    display:none;
  }

.child1
{
  top:10%;
  display: flex;
  justify-content: center;
  height:auto;
  width:100%;
  position:absolute;
}
  .child2
  {
  top:50%;
  display: flex;
  justify-content: center;
  height:auto;
  width:100%;
  position:absolute;

}

.child4
{
  display:block;  
  top:0px;
  right:170px;
  height:auto;
  position:fixed;
}

#headerimg
{
  height:50vh;
  width:80%;
}
}

@media screen and (max-width: 950px) {
.child4
  {
    display:none;
  }

.child1
{

  top:10%;
  display: flex;
  justify-content: center;
  height:auto;
  width:100%;
  position:absolute;
}
  .child2
  {
  top:50%;
  display: flex;
  justify-content: center;
  height:auto;
  width:100%;
  position:absolute;

}
#headerimg
{
  height:50vh;
  width:50%;
}
}

@media screen and (max-width: 949px) {
.child3
  {
    display:none;
  }
.child4
{  
  display:block; 
  top:0px;
  right:80px;
  height:auto;
  position:fixed;
}


}