html{
  font-family: helvetica, sans-serif;
  background-image:url(heaven/heaven.gif);
  color:black; 
  font-size:100%;
}
.header-wrapper{
  text-align:center;
  align-content:center;
  width:100%;
  margin:0 auto;
  padding:0;
}

.header-wrapper img{
  max-width:50%;
}

#header{
  font-size:80px;
  margin-bottom: 0;
}

#header p{
  margin-top:0;
}

.navbar ul{
  list-style-type:none;
  margin:0;
  padding:0;}

.navbar a{
  color:black;
  font-size:10px;
}

.navbar li+li{
  margin-top:10px;
}
  
.main-columns{
  margin-top:0px;
  display:grid;
  grid-template-columns: 1fr 4fr;
}

.main{
  margin-top:50px;
  text-align:center;
}

.main img{
  text-align:center;
  width:50%;
}

footer{
  text-align:right;
}

footer ul li{
  display:inline;
    }

footer ul{
  list-style: none;
}


footer img{
  max-width:2%;
  padding:10px;
}


@media only screen and (max-width:320px){
  .wrapper-main{
   width:100%
  }
  #header{
    font-size:40px;
  }
}

@media only screen and (max-width:420px){
  .wrapper-main{
    width:100%
  }
  #header{
  font-size:40px;
  }
}

@media only screen and (max-width:480px){
  .wrapper-main{
    width:100%}
  #header{
    font-size:40px;
  }
}

@media only screen and (min-width:768px){
  .wrapper-main{
    width:100%}
}

@media only screen and (min-width:992px){
  .wrapper-main{
    width:100%
}
@media only screen and (min-width:1200px){
  .wrapper-main{
    width:100%
  }
}